knockout.js 和 jQueryUI 创建手风琴菜单

Question

尝试让 jquery UI 和 knockout js 协作时遇到了一个小问题。基本上我想创建一个手风琴，其中的项目是通过 foreach （或模板）从淘汰赛中添加的。

基本代码如下：

<div id="accordion">
    <div data-bind="foreach: items">
        <h3><a href="#" data-bind="text: text"></a></h3>
        <div><a class="linkField" href="#" data-bind="text: link"></a></div>
    </div>
</div>

这里没有什么令人印象深刻的...问题是，如果我执行以下操作：

$('#accordion').accordion();

将创建手风琴，但内部 div 将是标头选择器（第一个子级，默认情况下），因此效果不是想要一个。

用这个修复东西：

$('#accordion').accordion({ header: 'h3' });

似乎工作得更好，但实际上创建了 2 个手风琴，而不是一个有 2 个部分的......奇怪。

我尝试探索淘汰模板并使用“afterRender”重新手风琴化 div，但无济于事......它似乎仅将第一个链接重新渲染为手风琴，而不是第二个链接。无论如何，这可能是由于我对 jquery UI 的初学者了解。

您知道如何使一切协同工作吗？

Answer 1

我会使用自定义绑定来实现此类功能。

就像 RP Niemeyer 一样，有一个 jQuery Accordion 绑定到 knockoutjs 的示例 http://jsfiddle.net/rniemeyer/MfegM/

Answer 2

我曾尝试集成淘汰赛和 JQuery UI 手风琴，后来又集成了 Bootstrap 可折叠手风琴。在这两种情况下它都有效，但我发现我必须实施一些解决方法才能使所有内容正确显示，特别是在通过淘汰赛动态添加元素时。提到的小部件并不总是知道淘汰赛中发生的情况，并且事情可能会变得混乱（div 高度计算错误等......）。特别是使用 JQuery 手风琴时，它往往会重写 html，因为它认为合适，这可能是一个真正的痛苦。

因此，我决定使用核心 JQuery 和 Knockout 制作自己的手风琴小部件。看看这个工作示例： http://jsfiddle.net/matt_friedman/KXgPN/

当然，使用不同的标记和 CSS，这可以根据您的需要进行定制。

好处是它完全是数据驱动的，并且除了您决定使用的任何 CSS 之外，不会对布局做出任何假设。您会注意到标记非常简单。这只是一个例子。它的目的是定制。

标记：

<div data-bind="foreach:groups" id="menu">
    <div class="header" data-bind="text:name, accordion: openState, click: toggle"> </div>
    <div class="items" data-bind="foreach:items">
        <div data-bind="text:name"> </div>
    </div>
</div>

JavaScript：

ko.bindingHandlers.accordion = {

    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).next().hide();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var slideUpTime = 300;
        var slideDownTime = 400;

        var openState = ko.utils.unwrapObservable(valueAccessor());
        var focussed = openState.focussed;
        var shouldOpen = openState.shouldOpen;

        /*
         * This following says that if this group is the one that has 
         * been clicked upon (gains focus) find the other groups and 
         * set them to unfocussed and close them.
         */
        if (focussed) {

            var clickedGroup = viewModel;

            $.each(bindingContext.$root.groups(), function (idx, group) {
                if (clickedGroup != group) {
                    group.openState({focussed: false, shouldOpen: false});
                }
            });
        }

        var dropDown = $(element).next();

        if (focussed && shouldOpen) {
            dropDown.slideDown(slideDownTime);
        } else if (focussed && !shouldOpen) {
            dropDown.slideUp(slideUpTime);
        } else if (!focussed && !shouldOpen) {
            dropDown.slideUp(slideUpTime);
        }
    }
};

function ViewModel() {

    var self = this;
    self.groups = ko.observableArray([]);

    function Group(id, name) {

        var self = this;
        self.id = id;
        self.name = name;

        self.openState = ko.observable({focussed: false, shouldOpen: false});

        self.items = ko.observableArray([]);

        self.toggle = function (group, event) {
            var shouldOpen = group.openState().shouldOpen;
            self.openState({focussed: true, shouldOpen: !shouldOpen});
        }
    }

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

    var g1 = new Group(1, "Group 1");
    var g2 = new Group(2, "Group 2");
    var g3 = new Group(3, "Group 3");

    g1.items.push(new Item(1, "Item 1"));
    g1.items.push(new Item(2, "Item 2"));

    g2.items.push(new Item(3, "Item 3"));
    g2.items.push(new Item(4, "Item 4"));
    g2.items.push(new Item(5, "Item 5"));

    g3.items.push(new Item(6, "Item 6"));

    self.groups.push(g1);
    self.groups.push(g2);
    self.groups.push(g3);
}

ko.applyBindings(new ViewModel());

Answer 3

有什么原因不能将折叠小部件应用到此处的内部 div 吗？例如：

<div id="accordion" data-bind="foreach: items">
    <h3><a href="#" data-bind="text: text"></a></h3>
    <div><a class="linkField" href="#" data-bind="text: link"></a></div>
</div>

Answer 4

我尝试了公认的解决方案并且它有效。只需要进行一些更改，因为我收到以下错误，

Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'

只需添加以下内容即可，

if(typeof $(element).data("ui-accordion") != "undefined"){
$(element).accordion("destroy").accordion(options);
}

详细信息请参阅 淘汰赛手风琴绑定断裂

Answer 5

您可以尝试将其模板化，类似于：

<div id="accordion" data-bind="myAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"></div>   

<script type="text/html" id="task-template">
    <div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group">
        <h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName"/></b></h3>
         <p>
             <label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>
          </p> 
     </div>
 </script>

“Tasks()”是一个 ko.observableArray，其中填充了任务，并带有属性
“TaskId”、“TaskName”、“Description”、“SelectedTask”声明为 ko.observable()；

“我的手风琴”是

ko.bindingHandlers.myAccordion = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).accordion(options);
        $(element).bind("valueChanged", function () {
           ko.bindingHandlers.myAccordion.update(element, valueAccessor);
       });
      ...
}

Answer 6

我所做的是，由于我的数据是从 AJAX 加载的，并且我显示了一个“正在加载”微调器，所以我将手风琴附加到 ajaxStop，如下所示：

$(document).ajaxStart(function(){$("#cargando").dialog("open");}).ajaxStop(function(){$("#cargando").dialog("close");$("#acordion").accordion({heightStyle: "content"});});

工作完美。