使用 Ember Data 从节点服务器异步加载数据

Question

我的模特：

App.Contacts = DS.Model.extend({
        name : DS.attr('string'),
        number : DS.attr('number')
    });

这就是我保存记录的方式：

        App.AddController = Ember.Controller.extend({
            actions : {
                addContact : function(){

                var post =  this.store.createRecord('Contacts',{
                        name :  this.get('name') ,
                        number : this.get('number')
                    });
                post.save();
                }
            }
        });

根据 Ember 的官方指南，这会向 /Contacts 发送一个 POST 请求，所以为了处理它，我在 nodejs/expressjs 中使用了它

        app.post('/contacts',function(req,res){
            posts.push( req.body);
            console.log(posts);
            res.send({status: 'OK'});
        });

现在我想将它检索到另一个名为 all 的模板中，所以我使用了：

                           App.AllRoute = Ember.Route.extend({
            model : function(){
            return this.store.find('Contacts');

            },
            setupController : function(controller,model){
                controller.set('contactList',model);
            }
        });

符合 Emberjs 指南，模型钩子支持开箱即用的 Promise。所以我认为这应该可行。

我的模板：

        <script type="text/x-handlebars" id="all" >

        Hello
          <table>
          {{#each contact in contactList}}
            <tr>
            <td>{{contact.name}} </td>
            <td>{{contact.number}} </td>
            </tr>
            {{else}}
            <tr><td>No contacts yet </td> </tr>
          {{/each}}
          </table>

        </script>

问题

但是模型什么也没返回，我知道this.store.find('Contacts') 不返回一个javascript数组，而是本质上和对象，暗示Ember.Enumerable 但在服务器端，posts 是一个 javascript 数组，因此在这之间可能存在类型不匹配。如何解决？

编辑： 为了避免客户端 Ember 代码中的任何混淆，这可以正常工作，因此往返服务器存在一些问题。

App.AllRoute = Ember.Route.extend({
        model : function(){
            return this.store.all('Contacts');

            },
        setupController : function(controller,model){
            controller.set('contactList',model);
        }
        });

Answer 1

如果你能提供一个 jsfiddle，那就太好了。我不确定是否定义了contactList，以及是否实际定义了该控制器的别名。因此，根据我所看到的，我认为问题在于您正在迭代一个没有正确定义模型的控制器。

我建议尝试这样做：

{{#each}}
    <tr>
      <td>{{contact.name}} </td>
      <td>{{contact.number}} </td>
    </tr>
    {{else}}
    <tr><td>No contacts yet </td> </tr>
{{/each}}

如果你真的想使用contactList控制器，那么你需要确保App.AllController“需要”contactListController。

App.ContactListController = Ember.ArrayController.extend({}) // needs to be an array controller
App.AddController = Ember.ArrayController.extend({
   needs: ["contactList"], // controller's used within this controller
contactList: Ember.computed.alias("controllers.contactList"), // needed to iterate over the model how you're doing it.

假设您的数据实际加载到 Ember Data 中，这两种解决方案都应该可以工作。您可能需要检查 ember-data 控制台上的“数据”选项卡。如果您没有安装该浏览器扩展程序，请执行此操作。它非常有用。

如果所有其他方法都失败，请尝试使用 {{log contactList}} 记录以验证预期值

祝你好运