12345


javascript初心者です。

[code]

    [{"Category":"A","Title":"△△△","Uri":"○○○"},{"Category":"A","Title":"□□□","Uri":"×××"},]
    
    <div data-bind="foreach:$data">
        <dl data-bind="data:Category">
            <dt data-bind="text:Category"></dt>
            <dd>
                <a data-bind="attr:{href:Uri}"><span data-bind="text:Title">/span></a>
            </dd>
        </dl>
    </div>
    
    <script>
        $(function () {
            $.getJSON("/data/somefile", function (data) {
                ko.applyBindings(data);
            })
        });
    </script> 
    
[/code]

上記の場合、「Category」と「リンク」が交互に表示されてしまいます。  
Categoryのデータが同じ場合、そのカテゴリを「dl」でまとめて、データを「dd」でリスト表示したいのですが、可能でしょうか。  
可能であれば教えていただければと思います。  
よろしくお願いします。


CC BY-SA 3.0
2015-07-14T03:47:09.137
12334
2015-07-14T11:36:55.623
10519
question
javascript knockout.js
knockoutjsを使用してjsonデータをカテゴリ毎にまとめて表示する方法


$indexとバインディング・コンテキストより、一つ前の値と比較しif文でdtを制御します。

<http://kojs.sukobuto.com/docs/foreach-binding>  
<http://kojs.sukobuto.com/docs/binding-context>  
$indexとバインディング・コンテキストの詳しい説明は上記参照。

また、サンプルを以下に記載します。

[code]

    var data = [];
    for(var i=0; i<20; i++){
      var category = String.fromCharCode(65 + (i/5 || 0))
      
      data.push({
        Category: category,
        Title: category + '-' + (i%5 || 0)
      });
    }
    
    ko.applyBindings({data: data});
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <dl data-bind="foreach:data">
      <!-- ko if:$index() === 0 || $parent.data[$index()-1].Category !== $data.Category -->
      <dt data-bind="text:Category"></dt>
      <!-- /ko -->
      <dd>
        <a>
            <span data-bind="text:Title"></span>
        </a>
       </dd>
    </dl>
[/code]


CC BY-SA 3.0
2015-07-14T11:36:55.623
12345
2015-07-14T11:36:55.623
4191
12334
answer