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将accordion header的ID属性与accordion body元素中的name属性相关联。我在强类型视图中使用Model属性来实现这一点。因为在Knockout.js中我向视图模型提供了活动的细节，所以我对数据绑定时创建的Html结构的控制有限。如何将手风琴标题与匹配的主体元素相关联呢？

Answer 1

这假设您正在使用自举手风琴，但应该让您知道如何使用任何手风琴系统。

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

用knockout.js制作手风琴

1 个答案: