3

まず、jsfiddle リンクhttp://jsfiddle.net/wenbert/m5pHs/36/

<button data-bind="click: addHero">Add Hero With Meta</button>

<ul data-bind="foreach: heroes">
    <li class="parent" data-bind="ifnot: isDeleted">
        <input class="big-box" type="text" data-bind="value: name" />
        <button class="btn-small" data-bind="click: $parent.removeHero">Remove Hero</button>
        <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;<button class="btn-small" data-bind="click: $parent.addMeta">Add Meta</button>
        <div class="child" data-bind="template: { name: 'checkbox-template' }"></div>
    </li>
</ul>

<script type="text/html" id="checkbox-template">
    <ul data-bind="foreach: meta">
        <li data-bind="ifnot: isDeleted">
            <input class="child-item blue" type="text" data-bind="value: name" />: 
            <input class="child-item small" type="text" data-bind="value: damage" />
            <button class="btn-small" data-bind="click: $parent.removeMeta">Remove Meta</button>
            <br/>
        </li>
    </ul>
</script>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
​

Javascript

var initialData = [
    {
        name: "Batman",
        isDelete: false,
        meta: [
            { name: "Belt", damage: "99", isDeleted: false },
            { name: "Gun", damage: "104", isDeleted: false}
        ]
    },
    {
        name: "Hulk",
        isDelete: false,
        meta: [
            { name: "Pants", damage: "1", isDeleted: false }
        ]
    },
];


function Hero(data) {
    var self = this;
    self.name = ko.observable(data.name);
    self.meta = ko.observableArray(data.meta);
    self.isDeleted = ko.observable(data.isDeleted);
}

function Meta(data) {
    var self = this;
    self.name= ko.observable(data.name);
    self.damage= ko.observable(data.damage);
    self.isDeleted = ko.observable(data.isDeleted);
}

function SuperheroViewModel() {
    var self = this;
    self.heroes = ko.observableArray();
    self.heroes.meta = ko.observableArray();

    self.heroes.push(new Hero(initialData[0]));
    self.heroes.push(new Hero(initialData[1]));

    self.addHero = function() {
        self.heroes.push(
            new Hero({
                name: 'Wolverine',
                isDelete: false,
                meta: [new Meta({name: 'Claws', damage: '200', isDeleted: false})]
            })
        );
        /*
        //Using something like this also does not enable me to update the child items when adding.
        self.heroes.push(new Hero(initialData[1])
        );*/
    }

    self.addMeta = function(item) {
        item.meta.push(new Meta({name: '--', damage: '0', isDeleted: false}));
    }

    self.removeHero= function(item) {
        item.isDeleted(true);
    }

    self.removeMeta = function(item) {
        item.isDeleted(true);
    }

}

ko.applyBindings(new SuperheroViewModel());

<strong>どのように見えるか

出力

機能するもの:

  1. ヒーローを追加
  2. ヒーローの削除 ( isDeletedtrue に設定)
  3. メタの追加
  4. ヒーロー名を更新すると、デバッグ ビューのデータが更新されます

機能しないもの:

  1. メタの削除 - をmeta.isDeletedtrue に設定できません
  2. メタ(例: ベルト、ガン、パンツ)は、テキスト ボックスの値を変更しても更新されません。ただし、メタを編集してから親を編集すると、メタが更新されます。子アイテムは、親が更新されたときにのみトリガーされるようです。

ガッチャ

  1. 新しいヒーローを追加してからメタを編集すると、親アイテムを更新しなくても自動的に更新されます。

だから2つの質問：

  1. jsfiddle にあるものを使用して子オブジェクトの値を設定するにはどうすればよいですか? http://jsfiddle.net/wenbert/m5pHs/36/
  2. 子アイテムが更新されたときに更新をトリガーするにはどうすればよいですか? 現在、子アイテムの更新は、親アイテムも更新した場合にのみトリガーされます(例: バットマン、ハルク)

更新: を使用して追加されているため、子アイテムは更新されていないようですinitialData array。

ありがとうございました！

4

1 に答える 1

3

わかりました、この fiddleの変更を検討してください。これは機能します。よりクリーンになったと思います。

私がしたことを分解します

まず、data再利用できるように、viewmodels コンストラクターを介して in を渡します。

ko.applyBindings(new SuperheroViewModel(initialData));

heroes次に、マップを使用して配列を構築し、受信データのサイズに関係なくデータを入力できるようにします。

self.heroes = ko.observableArray(ko.utils.arrayMap(data, function(i){
    return new Hero(i);
}));

また、ルート ビューモデルではなく、の子であるmetaため、構成をヒーロー オブジェクトに移動しました。metaheroes

self.meta = ko.observableArray(ko.utils.arrayMap(data.meta, function(i){
        return new Meta(i);
    }));

heroコンストラクターが構築を処理するためmeta、addHero関数は不要になり、そのmeta行は initialData 行と同じように見えます。

meta: [{name: 'Claws', damage: '200', isDeleted: false}]

最後に、add/removeメタ関数をheroビューモデルに移動しました。これはより理にかなっており、$parentfromを使用しようとするスコープの問題を解決しますmeta。

ご不明な点がございましたら、お知らせください。

于 2012-11-08T05:35:16.453 に答える