1

次のコンポーネントがあります。

<template id="fruits-tpl">
    <p>Name: <input data-bind="value: name" /></p>
    <p>Type: <input data-bind="value: color" /></p>
</template>


ko.components.register('fruits', {
    viewModel: function(params) {
        this.name = params.name;
        this.color   = params.color;
    },
    template: { element: 'fruits-tpl' }
});

このコンポーネントを以下のビューモデルと一緒に使用しています。監視可能なリストの項目はさまざまなタイプで、さまざまなプロパティがあります。

function Fruit(data) {
    this.name = ko.observable(data.name);
    this.color = ko.observable(data.color);
}
function Dessert(data) {
    this.name = ko.observable(data.name);
    this.packaging = ko.observable(data.packaging);
}
function Vm(){
    var data = [{name:"Apples",color:"Yellow"},{name:"Cookies",packaging:"Box"}];
    this.items = ko.observableArray([new Fruit(data[0]),new Dessert(data[1])]);
    this.items.choice = ko.observable(this.items()[0]);
}

このコンポーネントは非常にうまく機能し、入力ボックスのテキストを変更するたびに基になるデータが更新されます。

<div data-bind="component: {name: 'fruits', params: items.choice}"></div>

ここで、オブザーバブルのロジックをコンポーネント自体にカプセル化したいので、コンポーネントを次のように変更しました。

ko.components.register('fruits', {
    viewModel: function(params) {
        this.name = ko.observable(params.name);
        this.color   = ko.observable(params.color);
    },
    template: { element: 'fruits-tpl' }
});

...そして今、私は観察可能なitems.choiceを内部にデータだけで持っています:

function Vm(){
    var data = [{name:"Apples",color:"Yellow"},{name:"Cookies",packaging:"Box"}];
    this.items = ko.observableArray(data);
    this.items.choice = ko.observable(this.items()[0]);
}

2 番目の例で、items.choice はまだ監視可能であるにもかかわらず、メイン ビューモデルの基になるデータが更新されないのはなぜですか? いくつかの概念が欠けていると確信しています。おそらく、監視可能な配列の各項目も監視可能である必要がありますが、2番目の例を機能させる方法があるかどうかはわかりません。

最初の例: http://jsfiddle.net/5739ht0q/2/ 2 番目の例: http://jsfiddle.net/079tx0nn/

4

2 に答える 2