建筑手风琴与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

回答

相关问题