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>

一切都加载好了onload，但当我点击按钮时，div标签是空白的，没有任何绑定但我没有错误，似乎贯穿所有代码。

Answer 1

我创建了一个小提琴，其中包含一些可以使其工作的变化：http://jsfiddle.net/johnpapa/dft3Z/

我当然无法确切地知道你想要做什么。但小提琴读取数组（我使用数组而不是ajax调用只是为了保持ti本地），并创建一系列按钮。然后它为每个点击事件绑定，然后添加一组全新的按钮。您的代码存在一些问题。 applyBindings应该只发生一次，viewModel已经绑定，因此HTML不需要指定它，并且标签本应该使用文本绑定，我怀疑。

无论如何，现在确实如此。

我仍然怀疑这不是你想要的。也许如果你解释一下你想要完成什么，我们可以进一步提供帮助。

Answer 2

在html中，您不需要viewModel.将其更改为：

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

更新：

好的，试试这样：

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


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

ko.applyBindings(viewModel);

HTML：

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

请注意您需要ko.applyBindings(viewModel);函数定义之外的getFoos - 目前您每次调用时都会重新绑定，这可能导致消失

Answer 3

我认为reloadFoos不是foos数组中foo Item的父级。你能做这样的事吗

for (var i = 0; i < data.length; i++) {
            var f = new foo();
            f.Id = data[i].Id;
            f.Name = data[i].Name;
            f.reloadFoos = function() { getFoos(); }
            viewModel.foos.push(f);
        }

然后让你的点击只需调用reloadFoos

刷新敲除数据绑定为空

3 个答案: