3

次のコードを使用して、ノックアウト js で複数レベルのデータを含むツリーを作成しました。

<ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <input type='checkbox'>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }">

        </ul>
    </li>
</script>

しかし今、これをノックアウトで拡張して、親をチェックするとそのすべての子が選択され、親のチェックを外すと子のチェックが外されるようにしたいと考えています。

Here is js fiddle link

http://jsfiddle.net/tEGUp/

4

1 に答える 1

1

元のデータを変更せず、KO マッピングを使用するバージョンを作成しました。

また、Convention ライブラリを使用して記述する必要があるコードがどれだけ少ないかを示すために、この機会を利用しました。

MyApp.TreeViewModel = function(data) {
    var mapping = {
        items: {
            create: function(options) {
                return new MyApp.TreeViewModel(options.data);
            }
        }
    };
    this.checked = ko.observable(false); 
    this.checked.subscribe(this.onChecked, this);

    this.items = ko.observableArray();

    ko.mapping.fromJS(data, mapping, this);     
};

MyApp.TreeViewModel.prototype = {
    constructor: MyApp.TreeViewModel,
    onChecked: function(checked) {
        ko.utils.arrayForEach(this.items(), function(item) {
            item.checked(checked);
        });
    }
};
于 2013-09-28T15:16:03.463 に答える