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

时间:2014-02-18 12:48:44

标签: node.js ember.js express ember-data

我的模特:

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的官方指南,这会向POST发送/Contacts请求,所以为了处理它,我在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指南,模型钩子支持开箱即用的承诺。所以我认为这应该有用。

我的模板

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

1 个答案:

答案 0 :(得分:0)

如果你能提供一个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}}

进行日志记录以验证预期值 祝你好运