如何使用带有 KnockoutJS foreach 模板的 Bootstrap Collapse答案

【问题标题】：How to use Bootstrap Collapse with KnockoutJS foreach template如何使用带有 KnockoutJS foreach 模板的 Bootstrap Collapse
【发布时间】：2012-07-06 07:00:37
【问题描述】：

我有一个用于将“项目”添加到商店库存页面的模板。我需要将项目最小化以仅显示名称和价格等信息，但是一旦单击它将扩展到其他信息。该列表使用的是 knockoutJS，我不确定如何连接 Twitter Bootstrap Collapse 项目。我引用的 div 的 id 是重复的，因此切换“更多信息”div 的链接仅切换页面上的第一个 div。到目前为止，这是我的代码。无论模板标记的实例有多少，我都需要每个链接来切换它后面的 div。

    <ul data-bind="foreach: items" class="inline">
  <fieldset>
    <legend>Store Item List</legend>
    <li class="separator"><div id="item-accordian">
        <div class="row">
            <a id="store-item" data-toggle="collapse" data-target=".collapse" href="#store-item-details">
                <div class="span2">
                    <strong>Name: </strong><span data-bind="text: Name"></span>
                </div>
                <div class="span2">
                    <strong>Price: </strong><span data-bind="text: FormatUnitPrice"></span>
                </div>
                <div class="span2">
                    <strong>Type: </strong><span data-bind="text: ItemType"></span>
                </div>
                <div class="span2">
                    <strong>Status: </strong><span data-bind="text: Status"></span>
                </div>
            </a>
        </div>
        <div id="store-item-details" class="collapse">
            <div class="row">
                <div class="span1">
                    <strong>Description:</strong>
                </div>
                <div class="span4">
                    <span data-bind="text: Description"></span>
                </div>
            </div>
            <div class="row">
                <div class="span8">
                    <ul data-bind="foreach: ItemAttributes">
                        <li class="control-group">
                            <div class="controls">
                                <div class="float-left omega-spacer-10">
                                    <strong data-bind="text: Name">:</strong></div>
                                <div class="float-left omega-spacer-35">
                                    <select class="input-medium" data-bind="options: AttributeValues, optionsText: 'Text', optionsValue: 'Value'">
                                    </select></div>
                            </div>
                        </li>
                    </ul>
                    <div class="row">
                        <div class="span8 float-right">
                            <div class="float-right">
                                <button data-bind="click: $parent.deleteItem">
                                    Delete</button></div>
                            <div class="float-right">
                                <button data-bind="click: $parent.editItem">
                                    Edit</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div></div>
    </li>
  </fieldset>
</ul>

感谢您提供的任何信息。

【问题讨论】：

一开始你应该按它们的类而不是它们的 ID 来挂钩折叠项。 ID 是唯一的，因此您只需重构代码以使用类...
没错，我进行了修改以反映您的建议。所以每个折叠链接项仍然需要知道如何绑定到它对应的可折叠项。我很困惑如何实现这一目标。
更好地查看 bootstrap 的文档我不太喜欢可折叠的实现方式。也许使用带有可折叠选项的 jqueryUI 手风琴小部件会更容易？看这个例子：jqueryUI accordion
否则您可以使用您的绑定以这种方式创建一些唯一 ID：data-bind="attr: { id:'store-item-details_'+Name() }"
感谢@Ingro，我将尝试您的第二个建议，看看会发生什么。但你是对的，jquery UI 手风琴有一个更好的实现。我可能会切换到那个。

标签： jquery twitter-bootstrap knockout.js collapse

【解决方案1】：

我只是使用了以下 jQuery：

jQuery(document).ready(function(){
$('.accordion .head').click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();
});

此代码在@Ingro 建议的Jquery UI accordion documentation 上指定。谢谢你指点我那里。

这允许打开多个部分，也让我不必与我不想使用的 jQuery UI 样式作斗争。我实际上使用了 twitter bootstrap 中的“collapse”类，它提供了很好的边框效果，所以我不必手动想出一些东西。

【讨论】：

谢谢，感谢您的帮助！