淘汰 如果绑定破坏了手风琴，如何重新应用手风琴？

Question

这里是小提琴：http://jsfiddle.net/46LXU/7/

我正在使用 jqAccordion 自定义绑定处理程序从可观察数组构建手风琴

ko.bindingHandlers.jqAccordion = {
        init: function (element, valueAccessor) {
            console.log(element);
            //var options = valueAccessor() || {};
            //Wait for the element to build before applying accordion
            var valueAccessor1 = {heightStyle: 'content', navigation: true, collapsible: true, active: false};
            setTimeout(function () {
                $(element).accordion(valueAccessor1)
            }, 100);

            //Sense whether value is updated when sorting and them apply accordion effect
            $(element).bind('valuechanged', function () {
                ko.bindingHandlers.jqAccordion.update(element, valueAccessor1);
            });

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).accordion("destroy");
            });

        },
        //Runs on every update
        update: function (element, valueAccessor) {
            console.log(element);
            //var options = valueAccessor() || {};
            var valueAccessor = {heightStyle: 'content', navigation: true, collapsible: true, active: false};
            //condition to check whether ui accordion is defined before applying it to UI element
            if(typeof $(element).data("ui-accordion") != "undefined"){
            $(element).accordion('destroy').accordion({heightStyle: 'content', navigation: true, active: false});
            }

        }

    };

jQuery UI 手风琴在应用绑定时首先完美应用，如小提琴http://jsfiddle.net/46LXU/7/所示

但是，如果我使用敲除，如果绑定来删除和重新插入 DOM 元素，手风琴会破坏但不会重新创建。

我使用无容器的 if 绑定如下图，由checked 复选框的绑定控制如下图

 <!-- ko foreach: sections -->
<label class="pull-left"><input type="checkbox" data-bind="checked: hide" /> Hide </label><br />
 <!--/ko -->

<div id="mobprev" data-bind="foreach: { data: sections, afterAdd: function(elem){jQuery(elem).trigger('valuechanged')} }, jqAccordion: {active: false, heightStyle: 'content', navigation: true}">
 <!-- ko ifnot: hide -->
        <h3><a href="#" data-bind="text: section_name">HTML5</a></h3>
        <div>
            <p data-bind="html: data">Data</p>
        </div>
 <!--/ko -->

</div>

如果我动态创建一个新元素，afterAdd 会创建一个自动应用手风琴的新元素，但是当我隐藏和显示该元素时，手风琴会破坏。

隐藏后显示元素时如何重新应用 jquery 手风琴？

Answer 1

手风琴创建后添加的元素不会自动集成到其中。
在您的情况下，您必须找到一种方法来在任何部分的 hide 属性更改时重建小部件。

示例：在主虚拟机中创建一个订阅，每当隐藏/显示部分时触发该订阅。 jqAccordion bindingHandler 可以在需要时使用它来刷新手风琴。

Demo: JSFiddle

虚拟机：

my.vm = {
    // observable array of sections
    sections: ...
    hideall: ...
    load: ...
    subscribe: function(handler) {
        $.each(my.vm.sections(), function(index, section) {
            section.hide.subscribe(function(value) {
                handler(section, value);
            });
        });
    }

绑定处理程序：

...

//Sense whether value is updated when sorting and them apply accordion effect
$(element).bind('valuechanged', function () {
    ko.bindingHandlers.jqAccordion.update(element, valueAccessor1);
});

// viewmodel to subscribe to its changes to rebuild the widget
var vm = allBindings.get('jqAccordionViewmodel');
if(vm) {
    vm.subscribe(function(item, value) {                    
        ko.bindingHandlers.jqAccordion.update(element, valueAccessor1);
    });
}
...

HTML：

<div id="mobprev" data-bind="foreach: {
                                 data: sections, 
                                 afterAdd: function(elem) {
                                     jQuery(elem).trigger('valuechanged')
                                 }
                             },
                             jqAccordion: {
                                 active: false,
                                 heightStyle: 'content',
                                 navigation: true
                             },
                             jqAccordionViewmodel: $root">