web-applications - 为什么淘汰赛第一次只绑定我的桌子？

Question

我有以下代码使用敲除将 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]);