javascript - 基于json键值的特定 Handlebars 模板

Question

我有一个食谱 API，其中包含不同类型的食谱:开胃菜、主菜、甜点等。

我想要做的是在一次调用中从 API 获取所有数据，并让 Handlebars 根据“类别”字段填充特定模板(这些模板相同，但添加到不同的占位符)。然而，从下面的代码中，我将 HTML 注入(inject)到占位符 div 中，但没有数据。奇怪的是，我还获得了 4 个模板数据实例。

这是我的代码:

jQuery AJAX 调用 API:

$( document ).ready(function() {
 $.ajax({
     type: "GET",
     url: "http://example.org/api/recipes",
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (msg) {           

        var source;
        var template;

        $.each(msg, function (i, o) {
            if (o['Category'] === "Starter") {
                source = $("#startertemplate").html();
                template = Handlebars.compile(source);
                $("#starters").html(template(o));
            } else if (o['Category'] === "Main") {
                source = $("#maintemplate").html();
                template = Handlebars.compile(source);
                $("#main").html(template(o));
            } 
        });
    }
});
});

Handlebars 模板:

<script id="startertemplate" type="text/x-handlebars-template">
    {{#each this}}
        <div class="col-sm-6">
            <h3>{{Title}}</h3>
            <img src="{{ImagePath}}" alt="{{Title}}" height="200" width="300" /><br />
            <a href="recipe.html?id={{ID}}">See more</a>
        </div>
    {{/each}}
    </script>
    <script id="maintemplate" type="text/x-handlebars-template">
    {{#each this}}
        <div class="col-sm-6">
            <h3>{{Title}}</h3>
            <img src="{{ImagePath}}" alt="{{Title}}" height="200" width="300" /><br />
            <a href="recipe.html?id={{ID}}">See more</a>
        </div>
    {{/each}}
    </script>

示例 JSON:

[
    {"ID":1,"Title":"Aioli","Category":"Starter","ImagePath":"/assets/recipes/Aioli.jpg"},
    {"ID":3,"Title":"Asparagus and Parmesan Tartlets","Category":"Starter","ImagePath":"/assets/recipes/Asparagus_and_Parmesan_Tartlets.jpg"}, 
    {"ID":4,"Title":"Broad Bean Pate with Melba Toasts","Category":"Main","ImagePath":"/assets/recipes/Broad_bean-pate.jpg"}
]

有什么想法我哪里出错了吗？

Answer 1

首先，您需要将食谱分成不同的列表。

var starterList = [],
    mainList = [];
$.each(msg, function (i, o) {
    if (o['Category'] === "Starter") {
        starterList.push(o);
    } if (o['Category'] === "Main") {
        mainList.push(o);
    }
});

然后立即将列表提供给模板。

$("#starters").html(templateStarter(starterList));
$("#main").html(templateMain(mainList));

这是一个工作 jsfiddle .