0

ネストされたアコーディオンを使用して、データ主導のリストを構築しようとしています。最初のプロトタイプではうまく機能しましたが、実装をハードコーディングしていたため、明らかに異なるアコーディオンがありました。

そのロードを動的に行うために移動すると、構造はそこにあるように見えますが、別個のアコーディオンがなくなったため、独立して動作しません。これを機能させるカスタム バインディングに追加できるものはありますか? または、子アコーディオンを分離しておくために設定できるその他のプロパティ。

この例では 2 レベルの深さしかネストしていませんが、最終的には 4 レベルをサポートする必要があります。

これが現在のプロトタイプです: http://jsfiddle.net/blunde/agjFn/

4

1 に答える 1

0

これが、あなたが抱えていた問題を修正すると私が信じているJSFiddleです。

http://jsfiddle.net/JasonMore/gbhfT/6/

見る

<div data-bind="foreach: items, accordion: {}">
    <h3>
        <a href="#" data-bind="text: id"></a>
    </h3>
    <div>    
        <span data-bind="text: name"></span>
        <div data-bind="foreach: items, accordion: {}">
            <h3>
                <a href="#" data-bind="text: id"></a>
            </h3>
            <div data-bind="text: name">
            </div> 
        </div>
        <button data-bind="click: add">Add Sub Item</button>
    </div> 
</div>
<button data-bind="click: add">Add Item</button>
<hr/>

Javascript

ko.bindingHandlers.accordion = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        setTimeout(function() {
            $(element).accordion(options);
        }, 0);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).accordion("destroy");
        });
    },
    update: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).accordion("destroy").accordion(options);
    }
}

function Item(id, name, subItems) {
    var self = this;

    //properties
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.items = ko.observableArray(subItems);

    //actions
    this.add = function() {
        self.items.push(new Item(4, "bar"));
    };
}

var viewModel = {
    items: ko.observableArray([
        new Item(1, "one", 
            [
             new Item(11, "one-one"), 
             new Item(12, "one-two")
            ]),
        new Item(2, "two", []), 
        new Item(3, "three", []) 
    ]),

    add: function() {
        viewModel.items.push(new Item(4, "foo"));
    }
};

ko.applyBindings(viewModel);​

</ p>

foreachをテンプレートに変更することで、この作業をnレベル深くすることができるはずです。 http://knockoutjs.com/documentation/template-binding.html

これがお役に立てば幸いです。

ジェイソン

于 2012-04-17T18:02:26.787 に答える