Question

    var viewModel = {
        foos: ko.observableArray([]),

        reloadFoos: function () {
            getFoos();
        }
    };

    var foo = function () {
        this.Id = ko.observable();
        this.Name = ko.observable();
    };

    function getFoos() {
        $.get("/myroute/", "", function (data) {
            for (var i = 0; i < data.length; i++) {
                var f = new foo();
                f.Id = data[i].Id;
                f.Name = data[i].Name;
                viewModel.foos.push(f);
            }

            ko.applyBindings(viewModel);
        });        
    }


<div data-bind="foreach: viewModel.foos">
    <button data-bind="click : $parent.reloadFoos, attr: { id: Id }"></button>
    <label data-bind="value: Name"></label>
</div>

Everything loads ok onload, but when I click the button, div label is blank and nothing is binded but I get no errors and seems to run through all the code.

Answer 1

I created a fiddle with a few changes that makes this work: http://jsfiddle.net/johnpapa/dft3Z/

I admittedly cannot figure out exactly what you are trying to do. But the fiddle reads the array (which i I used an array instead of an ajax call just to keep ti local), and creates a series of buttons. It then binds the click event for each, which then adds a whole new set of buttons. There were a few problems with the code you had. The applyBindings should only happen once, the viewModel was already bound so the HTML did not need it specified, and the label should have been using the text binding, I suspect.

In any event, this does run now.

I still suspect this is not what you want. Perhaps if you explain what you are trying to accomplish, we can help further.