javascript - 使用 knockout.js 构建 Accordion

Question

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

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"
     },
  ]},
]);

我想构建一个 Accordion ，它将隐藏事件数组并显示日期。每当单击一个日期时，将通过展开下面的相应面板来显示与该日期匹配的事件列表。现在，在我不使用 Knockout.js 的项目中，我只使用一般 Activity 对象的 Id 将 Accordion header 的 ID 属性与 Accordion 主体元素中的名称属性链接起来。我在强类型 View 中使用模型属性来实现这一点。由于在 Knockout.js 中我提供了一个包含事件细节的 View 模型，因此我对数据绑定(bind)时创建的 Html 结构的控制有限。那么我怎样才能将 Accordion 标题与匹配的正文元素链接起来呢？

Answer 1

这假定您正在使用自举 Accordion ，但应该让您很好地了解如何使用任何 Accordion 系统进行操作。

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