当我使用.save()和Ember-Data时,查看闪烁然后消失

时间:2014-01-22 03:44:40

标签: ember.js ember-data

我使用的是Ember版本:1.2.1和Ember-Data 1.0.0-beta.5。

我正在使用FixtureAdapter来存储我的数据。如果我使用.save()然后转换到另一个路线,新视图会短暂显示然后消失。

如果我不使用.save(),数据就像我想要的那样显示。我需要使用save(),因为我需要以后能够使用.find().findQuery()

您可以在行动here(包含.save())和here(不包含.save())中看到代码。

以下是.save()的代码。

把手:

<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
<ul> <li> <button {{action loginGo on="click"}}>Login</button></li></ul>
</script>

<script type="text/x-handlebars" data-template-name="mainpage">
   Hello User! You have access to the following modules:
    <ul> 
    {{#each modules}}
       <li>{{name}}</li>
    {{/each}}
    </ul>
</script>

这是JavaScript:

App = Ember.Application.create();

App.Router.map(function () {
    this.route('mainpage', {
        path: '/mainpage'
    });
});

/* The mainpage router returns an object with the user's modules */
App.MainpageRoute = Ember.Route.extend({
    model: function(){
         console.log("Insite the mainpage route, user had access to " + App.currentUser.get('modules').toArray().length + " modules");
        return {
            modules: App.currentUser.get('modules')
        };
    }
});

/* Two stores. A User and the user's modules */
App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter
});

App.User = DS.Model.extend({
    name: DS.attr('string'),
    modules: DS.hasMany('module')
});

App.Module = DS.Model.extend({
    name: DS.attr('string'),
    user: DS.belongsTo('user')
});

/* When the user clicks the login button their User object is created
and assigned several modules, then we transition to the mainpage */
App.IndexController = Ember.Controller.extend({
    actions: {
        loginGo: function () {
            App.currentUser = this.store.createRecord('user', {
                name: "Bob",
            });
            App.currentUser.save();

            this.store.createRecord('module', {
                name: "Module 1",
                user: App.currentUser
            }).save();

            this.store.createRecord('module', {
                name: "Module 2",
                user: App.currentUser
            }).save();

            this.store.createRecord('module', {
                name: "Module 3",
                user: App.currentUser
            }).save();

            console.log("Right before transitioning to route, user had access to " + App.currentUser.get('modules').toArray().length + " modules");

            this.transitionToRoute('mainpage');
        }
    }
});

单击“登录”按钮将运行loginGo操作,该操作初始化用户对象和3个模块对象。然后它转换到主页路由,该路由应该返回3个模块并将它们显示在列表中。

1 个答案:

答案 0 :(得分:1)

在向用户添加模块之前,您应该等到用户完成保存

http://jsfiddle.net/6Evrq/25/

        App.currentUser.save().then(function(){
          self.store.createRecord('module', {
            name: "Module 1",
            user: App.currentUser
          }).save();

          self.store.createRecord('module', {
            name: "Module 2",
            user: App.currentUser
          }).save();

          self.store.createRecord('module', {
            name: "Module 3",
            user: App.currentUser
          }).save();

          console.log("Right before transitioning to route, user had access to " + App.currentUser.get('modules').toArray().length + " modules");

           self.transitionToRoute('mainpage');
        });