0

ノックアウトを使用して 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 結果が返されるため、最初のバインディングを「解放」して後続のバインディングなどに道を譲るノックアウト呼び出しが欠落している可能性があると思われます。

4

1 に答える 1

0

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]);
于 2012-10-14T12:42:35.143 に答える