用于显示/编辑和创建的相同Ember.JS模板

时间:2013-03-04 11:17:11

标签: ember.js ember-router

我正在使用Ember.JS编写CRUD应用程序:

  • 显示“操作”列表;
  • 用户可以单击一个操作以显示它,或单击按钮以创建新操作。

我想使用相同的模板来显示/编辑现有的模型对象并创建一个新模型。

这是我使用的路由器代码。

App = Ember.Application.create();

App.Router.map(function() {
    this.resource('actions', {path: "/actions"}, function() {
        this.resource('action', {path: '/:action_id'});
        this.route('new', {path: "/new"});
    });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('actions');
    }   
});

App.ActionsIndexRoute = Ember.Route.extend({
    model: function () {
        return App.Action.find();
    }
});

App.ActionRoute = Ember.Route.extend({
    events: {
        submitSave: function () {
            this.get("store").commit();
        }
    }
});

App.ActionsNewRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('action');
    },

    model: function() {
        var action = this.get('store').createRecord(App.Action);       
        return action;
     },

    events: {
        submitSave: function () {
            this.get("store").commit();
        }
    }
});

问题在于,当我第一次显示一个动作,然后再回来创建一个动作时,看起来模板没有使用新创建的记录,而是使用之前显示的记录。

我的解释是控制器和模板不同步。 你会怎么做? 也许有一种更简单的方法来实现这一目标?

这是一个代码为http://jsbin.com/owiwak/10/edit

的JSBin

1 个答案:

答案 0 :(得分:5)

通过说this.render('action'),您不仅要告诉它使用action模板,还要使用ActionController,而实际上您需要action模板,使用ActionNewController

您需要覆盖:

this.render('action', {
  controller: 'actions.new'
});

Updated JS Bin