从 JSON 响应创建 Ember 对象并使用 Handlebars 显示答案

【问题标题】：Create Ember objects from JSON response and display with Handlebars从 JSON 响应创建 Ember 对象并使用 Handlebars 显示
【发布时间】：2014-04-03 22:08:57
【问题描述】：

我正在尝试使用 Ember 查询 JSON API，从数据中创建对象，然后遍历我的 Handlebars 模板中的对象。我能够记录response 和categories 数组，并且我看到它们都被创建了。我的模板中不断出现“未找到类别”。

app.js：

App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Category = Ember.Object.extend();

App.Category.reopenClass({
    list: function() {
        $.getJSON("/api_url").then(function(response) {
                var categories = [];
                for(var i = 0; i < response.length; i++) {
                    // create a Category with a "name" property
                    categories.push(App.Category.create({ name: response[i]}));
                }
            // see screenshot for what this looks like logged to console
            return categories;
        });
    }
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.Category.list();
    }
});

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My App</title>
    </head>
    <body>

        <script type="text/x-handlebars" data-template-name="application">

        <h1>My App</h1>

        <div class="content">
            {{outlet}}
        </div>

        </script>

        <script type="text/x-handlebars" data-template-name="index">
            <ul>
                {{#each category}}
                    <li>Name: {{name}}</li>
                    {{else}}
                        <li>No categories found</li>
                {{/each}}
            </ul>
        </script>

        <script src="/kory/js/libs/jquery-1.10.2.js"></script>
        <script src="/kory/js/libs/handlebars-1.1.2.js"></script>
        <script src="/kory/js/libs/ember-1.5.0.js"></script>
        <script src="/kory/js/app.js"></script>

    </body>
</html>

JSON 响应示例：

[
    "Foo",
    "Bar",
    "Meow",
    "Woof"
]

记录的categories 数组的屏幕截图：

【问题讨论】：

在您的模板中，您是否尝试过简单地使用{{#each}} 而不是{{#each category}}？
刚试过，我收到了这个错误：Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed (generated index controller)
检查App.Categories 中的list 方法。此方法没有返回语句，因此如果您调用它，则不会返回任何内容。
@Myslik 你是对的，我不得不return getJSON 调用。为什么从每个语句中删除“类别”会修复它？是因为我已经在我的 IndexRoute 中设置了范围吗？
@kmm 正如你所说。如果您在路由中的model 钩子中返回数组，则数组将直接到达控制器的content。所以没有category 属性。

标签： javascript arrays json ember.js handlebars.js

【解决方案1】：

您设置事物的方式（这很好）您应该基于 ArrayController 类创建一个 IndexController：

App.IndexController = Ember.ArrayController.extend({

});

现在您的控制器可以使用 #each 助手循环：

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each}}
      <li>Name: {{name}}</li>
    {{else}}
      li>No categories found</li>
    {{/each}}
  </ul>
</script>

这是一个快速的 JSBin 示例：http://jsbin.com/wefof/4/edit

【讨论】：

【解决方案2】：

公认的解决方案是针对我遇到的问题。我尝试使用上面提出的解决方案，但它没有解决我的问题。在我自己调试这个问题几个小时后，我意识到我们都在制造一个问题！经过进一步评估，似乎其中一位 cmets 注意到了这个问题，但我想更明确地说明这一点，因为有几个不同的人在论坛上遇到了这个问题，但没有真正的解决方案。

这段代码：

list: function() {
    $.getJSON("/api_url").then(function(response) {
            var categories = [];
            for(var i = 0; i < response.length; i++) {
                // create a Category with a "name" property
                categories.push(App.Category.create({ name: response[i]}));
            }
        // see screenshot for what this looks like logged to console
        return categories;
    });
}

是异步的。每当 REST API 返回 JSON 时，就会创建 Ember category 对象，然后返回。由于它是异步的，模型钩子调用列表函数，并认为调用完成。

如果代码被修改为返回承诺：

list: function() {
    return $.getJSON("/api_url").then(function(response) {
            var categories = [];
            for(var i = 0; i < response.length; i++) {
                // create a Category with a "name" property
                categories.push(App.Category.create({ name: response[i]}));
            }
        // see screenshot for what this looks like logged to console
        return categories;
    });
}

Ember 会阻塞模型钩子，直到 promise 成功或失败，因为 Ember 就是这么棒的。

【讨论】：