knockoutjsで観察されている配列の観察特性

Question

ASP.NET MVCアプリケーションに取り組んでいます。私のアクションは、オブジェクトの配列であるモデル（名前、ID、iSViewableなどのプロパティを持つクラス）でビューを返すことです。

var model = @Model.ToJson(); // done via extension call

この配列を観察したいので、変更するたびにテンプレートにバインドされているテーブルを更新できます。

var viewModel = {
    accounts = ko.observableArray(model)
}

これは、配列から要素を追加および削除するために正常に機能します。ただし、アカウントのいずれかのプロパティが変更された場合（つまり、名前またはIDなど）、テンプレートを更新したいと思います。

NockoutJSのWebサイトでは、次のように書かれています。 もちろん、必要に応じてそれらのプロパティを観察可能にすることができますが、それは独立した選択です. 。これは私がやり方を理解できないことです。

私はこのようなことを役に立たずに試しました：

var viewModel = {
    accounts = ko.oservableArray([])
}

for(var i = 0; i < model.length; i++) {
    ko.observableArray(model[i]);
    viewModel.accounts.push(model[i]);
}

必要に応じてテンプレートとテーブルを投稿できます。

Answer 1

あなたはを調べる必要があります ノックアウト。マッピング プラグイン。私はあなたがやろうとしていることすべてをすると思います。

Answer 2

私はこれを機能させることになったので、同じ問題を抱えているかもしれない人と共有すると思いました。

JavaScriptクラスで配列アイテムをラップする必要があります。次に、コンストラクターで、各プロパティを観察可能に設定します。

var model = @Model.ToJson();

var viewModel = {
    accounts = ko.observableArray(ko.utils.arrayMap(model, function(account) {
        return new AccountWrapper(account);
    }))
};

function AccountWrapper(account) {
    this.Property1 = ko.observable(account.Propery1);
    this.Property2 = ko.observable(account.Propery2);
    this.Property3 = ko.observable(account.Propery3);
}

ko.applyBindings(viewModel);

また、変更を確認するためにアイテムの1つを直接変更したい場合は、次のようなことをすることができます。

viewModel.accounts()[3].Name('My Name Changed');

また、アイテムが追加された場合、または削除された場合でも通知を受けることができます。

viewModel.accounts.remove(viewModel.accounts()[4]);

Answer 3

これは、マッピングプラグインを機能させ、必要としない別のアプローチです。

var model = @Model.ToJson();

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

    fromJS: function(js) {
        for (var i = 0; i < js.length; i++) {
            this.accounts.push({ 
                Property1: ko.observable(js[i].Property1),
                Property2: ko.observable(js[i].Property2),
                Property3: ko.observable(js[i].Property3)
            });
        }
    }
};

viewModel.fromJS(model);
ko.applyBindings(viewModel);