如何使用KnockoutJS foreach模板使用Bootstrap摺疊

我有一個用於將「商品」添加到商店庫存頁面的模板。我需要將項目最小化以僅顯示名稱和價格等信息，但一旦點擊它就會擴展到其他信息。該列表正在使用knockoutJS，我不知道如何去關聯Twitter Bootstrap Collapse項目。我所引用的div的id被複制，因此切換「more info」div的鏈接僅切換頁面上的第一個div。這是我的代碼到目前爲止。無論模板標記了多少個實例，我都需要每個鏈接切換後面的div。如何使用KnockoutJS foreach模板使用Bootstrap摺疊

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

謝謝你的任何信息，你可能有。

來源

2012-07-05 Dmase05

對於開始，您應該通過班級掛鉤摺疊項目，而不是他們的ID。 Ids的意思是獨特的，所以你只需要重構你的代碼來處理類... – Ingro 2012-07-06 08:18:45

沒錯，我做了一個反映你的建議的編輯。因此，每個摺疊鏈接項目仍需要知道如何綁定到相應的可摺疊項目。我很困惑如何實現這一點。 – Dmase05 2012-07-06 13:55:53

更好地看待bootstrap的文檔，我不太喜歡如何實現可摺疊。使用可摺疊選項的jqueryUI手風琴小部件可能會更容易嗎？看看這個例子：[jqueryUI accordion]（http://jqueryui.com/demos/accordion/#collapsible） – Ingro 2012-07-06 14:38:57

我只是用下面的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中的「摺疊」類，它提供了一個很好的邊框效果，所以我不必手動提出一些東西。

來源

2012-07-08 00:37:23 Dmase05

幹得好:) – Ingro 2012-07-08 08:57:26

謝謝，感謝幫助！ – Dmase05 2012-07-09 14:38:16

如何使用KnockoutJS foreach模板使用Bootstrap摺疊

回答

相關問題