5

動的データ バインドのノックアウトを調べていて、複数の監視可能なオブジェクトを含めるために監視可能な配列が必要な状況があります。

これは私のコードです:

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
                <input type="text" data-bind="value: item"/>
            </li>
        </ul>
    </li>
</ul>

$(document).ready(function () {
            ko.applyBindings(viewModel);
        });

        var viewModel = {
            categories: ko.observableArray([
                { name: 'Fruit', items: [ko.observable('Apple'), ko.observable('Orange'), ko.observable('Banana')] },
                { name: 'Vegetables', items: [ko.observable('Celery'), ko.observable('Corn'), ko.observable('Spinach')] }
            ])
        };

オブジェクトオブザーバブルを操作する場合、通常、入力テキストボックスの値を変更でき、その値は、そのプロパティが表示されていたページ全体に設定されます。

現在の例では、入力ボックスで同じことをしようとしましたが、テキスト ボックスの値を変更した後、スパンは現在の値になりませんでした。

observableArray 内の監視可能なオブジェクトを、スタンドアロンの監視可能なオブジェクトの場合と同じように動作させるにはどうすればよいですか?

4

2 に答える 2

1

これらの問題が発生した場合は、それらをサブ VM に分割して、コンテキストの各レベルで何が起こっているかをより適切に制御できるようにします。上記の問題については、次のようにします。

var produceVM = function (data) {
    var self = this;

    self.item = ko.observable(data);
}

var categoryVM = function (data) {
    var self = this;

    self.name = ko.observable(data.name);
    self.items = ko.observableArray();

    var items = ko.utils.arrayMap(data.items, function (item) {
        return new produceVM(item);
    });

    self.items(items);
}

var viewModel = function (data) {
    var self = this;

    self.categories = ko.observableArray();

    var categories = ko.utils.arrayMap(data, function (category) {
       return new categoryVM(category); 
    });

    self.categories(categories);
}

var data = [
    { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
    { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach' ]}
];

ko.applyBindings(new viewModel(data));

ko マッピング プラグインは、上記のコードをすべて書かなくても、これと同様のことを実現できると思います。データモデルを渡すと、各アイテムのオブザーバブルが構築されます。

于 2013-05-25T23:18:44.847 に答える
0

@nemesvが指摘したように、答えはすぐ下にあります。

すべての配列項目をオブジェクトにラップするだけで、問題なく動作します。

これはビューモデルがどのように見えるかであり、ここに動作するjsfiddleがあります

var viewModel = {
    categories: ko.observableArray([{
        name: 'Fruit',
        items: [
            {name: ko.observable('Apple')},
            {name: ko.observable('Orange')},
            {name: ko.observable('Banana')}
        ]
    }, {
        name: 'Vegetables',
        items: [
            {name: ko.observable('Celery')},
            {name: ko.observable('Corn')},
            {name: ko.observable('Spinach')}
        ]
    }])
};

私自身の経験から言うと、通常はとにかく配列内にオブジェクトがあり、他のユースケースがないと主張するのではなく、配列内にオブジェクトがあり、それらを動的に変更する機能があると非常に便利であると言うだけです他のことを心配する必要はありません。

于 2013-05-25T23:14:20.707 に答える