使用knockout.js 构建手风琴

Question

对某些人来说可能是一个微不足道的问题。我的对象有一个视图模型，如下所示：

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 将手风琴标题的 ID 属性与手风琴主体元素中的名称属性链接起来。我在强类型视图中使用模型属性来实现这一点。由于在 Knockout.js 中我提供了一个包含活动细节的视图模型，因此我对在数据绑定时创建的 Html 结构的控制有限。那么如何将手风琴标题与匹配的正文元素链接起来？

Answer 1

这假设您使用的是 bootstrap 手风琴，但应该让您对如何使用任何手风琴系统有一个很好的了解。

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());
});