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 回答