建築手風琴與knockout.js

可能是一些微不足道的問題。我有我的對象視圖模型，看起來像這樣：建築手風琴與knockout.js

this.Activities = ko.observableArray([ 
{ "date": "28/11/2012 00:00:00", 
    "activities": [ 
    { "company": "BOW", 
     "description": "Backup Checks", 
     "length": "60" 
    }, 
    { "company": "AMS", 
     "description": "Data Request", 
     "length": "135" 
    }, 
    ]}, 
{ "date": "30/11/2012 00:00:00", 
    "activities": [ 
    { "company": "BOW", 
     "description": "Backup Checks", 
     "length": "60" 
    }, 
    { "company": "SLGT", 
     "description": "Software Development", 
     "length": "240" 
    }, 
    { "company": "BOW", 
     "description": "Data Request", 
     "length": "30" 
    }, 
    ]}, 
]);

我想建立一個手風琴，這將隱藏活動陣列，將顯示日期。無論何時點擊某個日期，將通過展開下面的相應面板展示與該日期匹配的活動列表。現在，在我沒有使用Knockout.js的項目中，我只是使用一般Activity對象的Id將accordion頭的ID屬性與accordion body元素中的name屬性鏈接起來。我在強類型視圖中使用模型屬性來實現這一點。由於在Knockout.js中，我爲視圖模型提供了活動的詳細信息。我對數據綁定時創建的Html結構的控制有限。那麼我怎樣才能連接手風琴頭與匹配的身體元素呢？

來源

2012-12-03 Bartosz

這個問題的答案[SO]（http://stackoverflow.com/questions/9036343/knockout- js-and-jqueryui-to-create-an-accordion-menu）問題可能會幫助你指出正確的方向。 – heads5150

追隨你的問題並不容易。你能提供一些你的HTML標記和你的淘汰賽視圖模型嗎？ – delixfe

這裏假設你使用的是引導式手風琴，但應該給你一個關於如何使用任何手風琴系統做的好主意。

http://jsfiddle.net/billpull/f8Cbb/1/show/

HTML

<div class="accordion" id="accordion2" data-bind="foreach: {data: Activities, as: 'activity'}"> 
    <!-- ko template: 'accordionTmpl' --><!-- /ko --> 
</div> 

<script type="text/html" id="accordionTmpl"> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-bind="text: activity.date, attr: { href: '#' + activity.order}"></a> 
     </a> 
    </div> 
    <div class="accordion-body collapse" data-bind="attr: { id: activity.order}"> 
     <div class="accordion-inner"> 
     <ul data-bind="foreach: {data: activity.activities, as: 'subActivity'}"> 
      <li> 
       <span data-bind="text: subActivity.company"></span><br> 
       <span data-bind="text: subActivity.description"></span><br> 
       <span data-bind="text: subActivity.length"></span> 
      </li> 
     </ul> 
     </div> 
    </div> 
</div> 
</script>

的Javascript

var ViewModel = function() { 
    this.Activities = ko.observableArray([ 
     { "date": "28/11/2012 00:00:00", 
     "order" : 1, 
      "activities": [ 
      { "company": "BOW", 
       "description": "Backup Checks", 
       "length": "60" 
      }, 
      { "company": "AMS", 
       "description": "Data Request", 
       "length": "135" 
      }, 
      ]}, 
     { "date": "30/11/2012 00:00:00", 
     "order" : 2, 
      "activities": [ 
      { "company": "BOW", 
       "description": "Backup Checks", 
       "length": "60" 
      }, 
      { "company": "SLGT", 
       "description": "Software Development", 
       "length": "240" 
      }, 
      { "company": "BOW", 
       "description": "Data Request", 
       "length": "30" 
      }, 
      ]}, 
     ]); 
}; 

$(function() { 
    ko.applyBindings(new ViewModel()); 
});

來源

2013-03-05 04:40:42 BillPull

建築手風琴與knockout.js

回答

相關問題