0

我正在尝试让多嵌套手风琴控件与 Knockout 一起使用，但是在添加面板时，通过 KO 绑定创建的项目不会与手风琴作为新面板绑定。

代码如下所示：

<div data-bind="accordion: {collapsible: true, active: false, heightStyle: 'content'}, template: { name: 'queryTemplate', foreach: children }">
</div>

<script id="queryTemplate" type="text/html">
    <h3>
        <div>
            <a href="#" data-bind="text: id"></a>&nbsp;
            <span data-bind="text: name"></span>&nbsp;
            <button data-bind="click: addNext">Add Next Item</button>
        </div>
    </h3>
    <div >
        <input data-bind="value: name"></input>
        <input data-bind="value: id"></input>
        <button data-bind="click: addSubitem">Add SubItem</button>
        <hr/>
        <div data-bind="accordion: {collapsible: true, active: false, heightStyle: 'content'}, template: { name: 'queryTemplate', foreach: children }">
        </div>
    </div>
</script>

<script>
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() || {},
            existing = $(element).data("accordion");
        //if it has been reinitialized and our model data changed, then need to recreate until they have a "refresh" method
        if (existing) {
           $(element).accordion("destroy").accordion(options);   
           //$(element).accordion("refresh");
        }

    }
};

function Item(id, name, parent) {
    var self = this;
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.children = ko.observableArray();
    this.addSubitem = function(){
        self.children.push(new Item(self.children().length + 1, "", this));
    }
    this.parent = ko.observable(parent);
    this.addNext = function(){parent.addSubitem()};
}

var model = new Item(0, "Top");
var tmp = new Item(1, "First", model);
tmp.children.push(new Item(0, "SubItem!", tmp));
model.children.push(tmp);
tmp = new Item(2, "Second", model);
tmp.children.push(new Item(0, "SubItem!", tmp));
model.children.push(tmp);

ko.applyBindings(model);

</script>

我的印象可能是由于我如何构建模板循环，但我对此束手无策 - 谢谢大家

笔记：

我会尝试澄清我遇到的问题 - （这里是小提琴：http: //jsfiddle.net/QChon/aUJFg/4/）

手风琴和嵌套手风琴按照视图模型正确加载（带有“子”数组的项目再次包含项目对象，应该无限期地继续）。

“添加下一个项目”按钮将同级添加到当前项目，因此添加到当前手风琴面板，“添加子项目”将子项添加到当前项目的子项，因此当前面板下的嵌套手风琴面板。

问题是，当我单击按钮时，正确的 html 元素会添加到正确的位置（即作为标题和内容面板），但 jquery 类和 id 未绑定到创建的 html 控件，因此不渲染也不作为手风琴结构的一部分，行为正确。希望能有所澄清。

4

1 回答 1

0

问题出在您的自定义绑定函数中

您正在通过查看 data-accordion 属性来检查当前元素是否是手风琴，即使在正确初始化的手风琴上也不存在该属性。其次，即使它找到了该属性，它也会尝试在错误的级别上“重新创建”手风琴。手风琴的容器类是父级的父级，相对于您在更新方法中获得的元素。

因此，如果您从此更改功能

var existing = $(element).data("accordion"); 
if (existing)  $(element).accordion("destroy").accordion(options);

对此

var existing = $(element).parent().parent().hasClass("ui-accordion"); 
if (existing)  $(element).parent().parent().accordion('refresh');

它应该按预期工作。

http://jsfiddle.net/M9222/1/

于 2013-10-07T14:04:04.127 回答