0

JSON から選択したキーに基づいてデータを dom に追加したい、つまり 100,101 だけのデータを dom に追加したい

JSON

var school = {
        "students": {
            "100": {
                "name": "abc",
                "bdate": "02/19/2000"

            },
            "101": {
                "name": "xyz",
                "sdate": "05/22/2001"

            },
            "103": {
                "name": "pqr",
                "sdate": "08/11/2001"

            }
        }

    };

HTML

    <div class="container">
       <ul>
       <script id="lst_template" type="text/x-handlebars-template">

          {{#each students}} 

    <li>

           {{name}}
           {{bdate}}            

    </li>

       {{/each}}


     </script>  
    </ul>
</div>

ハンドルバー

var studentsSelected = [100,101];
var tmpl = Handlebars.compile($('#lst_template').html());
var container = $('.container ul');

ハンドルバーに 100 と 101 だけのデータを追加するにはどうすればよいですか?

4

1 に答える 1

0

これを行うビルトインは何もないため、ヘルパーを追加するか、JavaScript でデータを前処理して、単純な{{#each}}.

ヘルパーは非常に単純で、次のようになります。

Handlebars.registerHelper('each_from', function(keys, obj, block) {
    var html = '';
    for(i = 0; i < keys.length; ++i)
        html += block.fn(obj[keys[i]]);
    return html;
});

テンプレートは次のようになります。

{{#each_from want_these students}}
    <li>{{name}} {{bdate}}</li>
{{/each_from}}

次のようにテンプレート関数を呼び出します。

var html = tmpl({
    students:   school.students,
    want_these: ['100', '101']
});

デモ: http://jsfiddle.net/ambiguous/JkVWh/

データを前処理したい場合は、単純なループだけで十分です。

var students = [ ];
for(var i = 0; i < studentsSelected.length; ++i)
    students.push(school.students[studentsSelected[i]]);

{{#each students}}次に、テンプレート内で簡単にtmpl({ students: students })HTML を取得するための呼び出しを行います。

デモ: http://jsfiddle.net/ambiguous/YQGRs/

schoolあなたのデータにbdateはいくつかのデータが含まれていることに注意してください。sdateこれが意図的なものかどうかはわかりませんので、そのままにしておきます。

<script id="lst_template">を の中に入れないでください<ul>。操作中に上書きしてしまう可能性<ul>があります<ul>。

于 2012-08-20T07:41:52.217 に答える