3

問題：サーバーからJsonが戻ってきました。Jsonは、各ビジネスが複数の連絡先を持つことができる一連のビジネスです。連絡先を監視可能な配列にして、連絡先にバインドされているhtml要素が削除時に更新され、配列が編集時に更新されるようにします。

次のjsFiddleを設定しました-http ://jsfiddle.net/rdotlee/GCwjX/1/。

これがjsFiddleからの私のビューモデルです。 

    var businessViewModel =
{
    allBusinesses: ko.observableArray([
                                        { name: "Biz1", id: 1, Contacts: [{ name: "Joe", email: "test@test", phone: "555-111-1111" }, { name: "Smith", email: "smith@test", phone: "777-111-2223"}] },
                                        { name: "Biz2", id: 2, Contacts: [{ name: "Joe", email: "test@test", phone: "555-222-1111" }, { name: "Smith", email: "smith@test", phone: "555-111-2222"}] }
                                      ]),

    businessId: ko.observable(1)

};

businessViewModel.selectedBusiness = ko.dependentObservable(function () {
    var biz = this.allBusinesses()[0];

    for (var i = 0; i < this.allBusinesses().length; i++) {
        if (this.allBusinesses()[i].id == this.businessId()) {
            biz = this.allBusinesses()[i];
            break;
        }
    }
    return biz;
}, businessViewModel);

businessViewModel.removeContact = function (contact) {
    ko.utils.arrayRemoveItem(this.selectedBusiness().Contacts, contact);
    ko.applyBindings(businessViewModel, $("#sectionBusinesses")[0]);
} .bind(businessViewModel);

私が必要なことをするための最もクリーンで推奨される方法は何ですか？

ありがとう、

4

1 に答える 1

1

まず、連絡先が削除されるたびにko.applyBindingsを呼び出す理由がわかりません。通常、applyBindingsを呼び出すのは1回だけで、それを超えると通常問題が発生します。

ko.mappingプラグインを使用することをお勧めします。これにより、プロセス全体がかなり簡単になります。

また、removeContactを更新して、更新されたViewModelで動作するようにし、選択したビジネスも少し変更しました。

これがフィドルです：http：//jsfiddle.net/GCwjX/5/ とコード：

var jsonData = {
    allBusinesses: [{
        name: "Biz1",
        id: 1,
        Contacts: [{
            name: "Joe",
            email: "test@test",
            phone: "555-111-1111"},
        {
            name: "Smith",
            email: "smith@test",
            phone: "777-111-2223"}]},
    {
        name: "Biz2",
        id: 2,
        Contacts: [{
            name: "Joe",
            email: "test@test",
            phone: "555-222-1111"},
        {
            name: "Smith",
            email: "smith@test",
            phone: "555-111-2222"}]}]
};
var businessViewModel = {
    allBusinesses: ko.observableArray(),
    businessId: ko.observable(1)
};

businessViewModel.selectedBusiness = ko.dependentObservable(function() {
    var biz = this.allBusinesses()[0];
    biz = ko.utils.arrayFirst(this.allBusinesses(), function(item) { 
        return (item.id() === parseInt(this.businessId())); 
    }, this);
    return biz;
}, businessViewModel);

businessViewModel.removeContact = function(contact) {
    this.selectedBusiness().Contacts.remove(contact);
}.bind(businessViewModel);

ko.mapping.fromJS(jsonData, {}, businessViewModel);
ko.applyBindings(businessViewModel);​
于 2012-09-07T12:57:55.350 に答える