使用 knockout.js 构建手风琴答案

【问题标题】：Building accordion with knockout.js使用 knockout.js 构建手风琴
【发布时间】：2012-11-20 20:58:37
【问题描述】：

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

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

【问题讨论】：

这个SO 问题的答案可能会帮助您指明正确的方向。
你的问题不容易。你能提供一些你的 HTML 标记和你的淘汰视图模型吗？

标签： javascript model-view-controller view knockout.js

【解决方案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());
});

【讨论】：