4

おそらく一部の人にとっては些細な質問です。次のようなオブジェクトのビューモデルがあります。

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の構造を制御することは制限されています。次に、アコーディオンヘッダーを一致するボディ要素にリンクするにはどうすればよいですか？

4

1 に答える 1

5

これは、ブートストラップ アコーディオンを使用していることを前提としていますが、任意のアコーディオン システムでそれを行う方法についての良いアイデアが得られるはずです。

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());
});
于 2013-03-05T04:40:42.703 に答える