Question

我试图使用Ember查询JSON API，从数据中创建对象，然后遍历Handlebars模板中的对象。我能够记录response以及categories数组，我看到它们都被创建了。我一直在＆＃34;没有找到任何类别＆＃34;在我的模板中。

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数组的屏幕截图： array screenshot

Answer 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

Answer 2

接受的解决方案是我遇到的问题。我试图使用上面提出的解决方案，但它没有解决我的问题。在我自己调试这个问题几个小时之后，我意识到我们都在制造一个问题！经过进一步的评估，看起来其中一条评论注意到了这个问题，但我想让这一点更明确，因为一些不同的人在没有真正解决方案的论坛中遇到这种麻烦。

此代码：

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函数，并认为调用已完成。

如果修改了代码，则返回了承诺：

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将阻止模型钩子直到承诺成功或失败，因为Ember很棒。

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

2 个答案: