Question

我有以下代码使用knockout将HTML表绑定到Person对象列表：

function PersonModel(person) {
    var self = this;
    self.id = person.Id;
    self.firstName = person.FirstName;
    self.surname = person.Surname;
    self.email = person.Email;
    self.cell = person.Cell;
}

function PersonListModel(personList) {
    var self = this;
    self.persons = ko.observableArray(personList);
}

function getPersonList() {
    $.getJSON("Person/IndexJson", function (allData) {
        var mappedPersons = $.map(allData, function (item) { return new PersonModel(item); });
        ko.applyBindings(new PersonListModel(mappedPersons), $("#person-list")[0]);
    });
}

$(function () {
    $("#refresh").click(function() {
        getPersonList();
    });
    getPersonList();            
});

绑定的HTML如下所示：

<table>
    <tbody id="person-list" data-bind="foreach: persons">
        <tr data-bind="attr: { 'data-id': id }, click: $parent.personClicked">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: surname"></td>
            <td data-bind="text: email"></td>
            <td data-bind="text: cell"></td>
        </tr>
    </tbody>
</table>
<a id="refresh" href="#"></a>

我的问题是该表只在第一次加载页面时正确填充。在通过单击“刷新”链接触发的所有后续ajax调用中，表为空。在所有情况下都会返回相同的ajax结果，所以我怀疑我可能会遗漏一些淘汰调用“释放”初始绑定以便为后续绑定或其他东西腾出空间。

Answer 1

您无需在ajax例程中进行新建模。下面应该解决你的问题

var perList = ko.observableArray({});

function getPersonList() {
    $.getJSON("Person/IndexJson", function(allData) {
        var mappedPersons = $.map(allData, function(item) {
            return new PersonModel(item);
        });
        perList(PersonListModel(mappedPersons));
    });
}
ko.applyBindings(perList, $("#person-list")[0]);

为什么淘汰赛只会在第一次绑定我的桌子？

1 个答案: