Question

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
    });

Answer 1

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/