Javascript 从JSON响应创建余烬对象，并用手柄显示_Javascript_Arrays_Json_Ember.js_Handlebars.js

Javascript 从JSON响应创建余烬对象，并用手柄显示

javascript arrays json ember.js

Javascript 从JSON响应创建余烬对象，并用手柄显示,javascript,arrays,json,ember.js,handlebars.js,Javascript,Arrays,Json,Ember.js,Handlebars.js,我试图使用Ember查询JSON API，从数据中创建对象，然后在我的Handlebar模板中循环遍历对象。我能够记录响应以及类别数组，我看到它们都被创建。我一直在模板中找到“未找到类别” app.js: App = Ember.Application.create({ LOG_TRANSITIONS: true }); App.Category = Ember.Object.extend(); App.Category.reopenClass({ list: functio

我试图使用Ember查询JSON API，从数据中创建对象，然后在我的Handlebar模板中循环遍历对象。我能够记录

响应

以及

类别

数组，我看到它们都被创建。我一直在模板中找到“未找到类别”

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();
    }
});

<!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>

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

记录的

类别的屏幕截图

数组：

按照设置方式（这很好），您应该基于ArrayController类创建IndexController：

App.IndexController = Ember.ArrayController.extend({

});

现在，您的控制器可以与

#每个助手循环：
<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each}}
      <li>Name: {{name}}</li>
    {{else}}
      li>No categories found</li>
    {{/each}}
  </ul>
</script>



{{{#各}
名称：{{Name}
{{else}
li>未找到任何类别
{{/每个}}


下面是一个快速的JSBin示例：
公认的解决方案就是针对我遇到的一个问题。我试图使用上面提出的解决方案，但它并没有解决我的问题。在我自己调试这个问题几个小时后，我意识到我们都在制造一个问题！经过进一步的评估，其中一条评论似乎注意到了这个问题，但我想把这个问题说得更清楚，因为有几个不同的人在论坛上遇到了这个问题，没有真正的解决办法
此代码：
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;
    });
}

余烬会阻止模型挂钩，直到承诺成功或失败，因为余烬是可怕的那样
 在您的模板中，您是否尝试过简单的{{{{{each}}
而不是{{{{each category}}
？刚刚尝试过，我得到了以下错误：未捕获错误：断言失败：{each loops}的值必须是一个数组。您通过了（生成的索引控制器）
检查应用程序类别中的列表
方法。此方法没有return语句，因此如果调用它，将不会返回任何内容。@Myslik您是对的，我必须return
getJSON调用。为什么从each语句中删除“category”可以修复它？是因为我已经在IndexRoute中设置了范围吗？@kmm正如你所说的那样。如果在路径中的模型
钩子中返回数组，则数组将直接指向控制器的内容
。因此没有类别属性。
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;
    });
}