javascript - 带 Bootstrap 和 knockout 的可折叠面板

Question

我无法使用 KnockoutJS 制作 Accordion ，而 Bootstrap 无法正常工作。我是这样定义的:

<div class="panel-group" id="accordion" data-bind="foreach: Advertisers()">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <span data-toggle="collapse" data-bind="html: $data, attr: { 'data-target': '#' + $data }"></span>
            </h4>
        </div>
    </div>
    <div class="panel-collapse collapse" data-parent="#accordion" data-bind="attr: { id: $data }">
        <div class="panel-body">
             ...content...

"Advertisers"是一个可观察的字符串数组，因此 $data 是一个字符串。我为每个广告商得到一个“行”。

所有行最初都是折叠的，单击一行展开下面的内容。到目前为止一切顺利。

问题是，当我单击另一行时，我希望之前展开的行会折叠，但这种情况并没有发生。 (我也无法使用 Bootstrap 和 KnockoutJS...)

编辑了代码。

Answer 1

简单的自定义绑定(bind)怎么样，它还可以让您稍微整理一下 View :

ko.bindingHandlers.bootstrapAccordion = {
  init: function(elem, value, allBindings) {
    var options = ko.utils.unwrapObservable(value()),
        handleClass = '[data-toggle]',
        contentClass = '.collapse',
        openItem = ko.utils.unwrapObservable(options.openItem) || false,
        itemClass = '.' + ko.utils.unwrapObservable(options.item) || '.accordion-group',
        items = $(elem).find(contentClass);

    // toggle: false required to hide items on load
    items.collapse({ parent: elem, toggle: false });
    if (openItem > -1) items.eq(openItem).collapse('show');

    // if the array is dynamic, the collapse should be re-initiated to work properly
    var list = allBindings.get('foreach');
    if (ko.isObservable(list)) {
      list.subscribe(function() { 
        $(elem).find(contentClass).collapse({ parent: elem, toggle: false });              
      });
    }

    $(elem).on('click', handleClass, function() {
        $(elem).find(contentClass).collapse('hide');
        $(this).closest(itemClass).find(contentClass).collapse('show');
    });
  }
};

此绑定(bind)采用 2 个参数(容器的类名，以及可选的加载时打开的项目)，例如:bootstrapAccordion: {item: 'panel-group', openItem: 0}，以及应该设置在具有 foreach 绑定(bind)的同一元素上。它假定可折叠部分有一个 collapse 类，并且切换它们的句柄有一个 data-toggle 属性。

在此处查看实际效果: http://jsfiddle.net/pkvn79h8/22/