Knockout mapping & adding a new item

2
votes

I have an example jsfiddle here that generates some html content based on a server model (local in the example provided) using knockout mapping.

http://jsfiddle.net/QShrA/

How do I create a new address block for the nested address? i.e. How do I create a button called 'Add New' and have that create an empty address block at the bottom?

Thanks in advance for any assistance provided.

EDIT - REOPENED

The problem isn't solved. I noticed that after I implemented Bill's solution (below) my computed observable's for the newly added address block don't work because they've been disabled. Hope someone can figure this out. Thanks.

  self.SMMDD = ko.computed({
        read: function() {
            **if ($.isFunction(self.SMONTH)) {**
                return self.SMONTH() + "/" + self.SDAY();
            **}**
        },
        write: function(value) {
            self.SMONTH(value.substring(0, 2));
            self.SDAY(value.substring(2, 4));
        },
        owner: self
    });

EDIT - SOLVED

Adding the deferEvaluation option appears to have fixed the issue.

  self.SMMDD = ko.computed({
        read: function() {
            return self.SMONTH() + "/" + self.SDAY();
        },
        write: function(value) {
            self.SMONTH(value.substring(0, 2));
            self.SDAY(value.substring(2, 4));
        },
        owner: self,
        deferEvaluation: true
    });
1
knockout.jsknockout-mapping-plugin
Are you wanting to add a button that says "Add New Address" and have that create an empty address block at the bottom? – themanatuf
I'm not sure what you want either. Please clarify. – deltree
Sorry about the lack of clarity. Yes, I want a button that says 'Add New Address' and have that create an empty address block at the bottom. – Bookamp

1 Answers

0
votes

Here is a forked/fixed version in which I uncommented your button and wired it up so that it adds an empty address to the array.

http://jsfiddle.net/RLNPa/