Question

我正在使用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/

所示

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

如果绑定如下所示，我使用无容器，由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会创建一个自动应用accordion的新元素，但是当我隐藏并显示该元素时，手风琴会被破坏。

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

Answer 1

手风琴创作后添加的元素未自动整合到其中在您的情况下，当任何部分的hide属性发生更改时，您必须找到重建窗口小部件的方法。

示例：在隐藏/显示某个部分时触发的主vm中创建子部分。然后jqAccordion bindingHandler可以在需要时使用它来刷新手风琴。

Demo: JSFiddle

VM：

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);
            });
        });
    }

bindingHandler：

...

//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">

敲门如果绑定会破坏手风琴，如何重新应用手风琴？

1 个答案:

VM：

bindingHandler：

HTML：