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 속성과 아코디언 본문 요소의 이름 속성을 연결합니다. 이를 위해 강력한 형식의 뷰에서 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> 

자바

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