Question

我有一个非常简单的CRUD应用程序，允许创建新对象以及编辑它们。

用于添加记录和编辑记录的模板几乎相同。

他们使用完全相同的表单元素。唯一的区别是表单下方的标题和按钮（应该更新或创建记录）

在我的实施中，我有

2路线定义
2个路线对象
2个控制器对象
2个模板

我想知道是否

我不能在这里推广重复使用
如果需要所有这些对象。

困扰我的是什么：

我有两个单独的模板用于创建和编辑（虽然它们几乎相同）
我有2个独立的控制器完全相同。

我希望在控制器级别上解决这个问题。当控制器装饰模型时，在我的情况下，单个控制器对象可以包装新记录或现有记录。然后它可以公开一个属性（isNewObject），以便模板可以决定我们是在“新”还是“编辑”流程中。控制器可以有一个createOrUpdate方法，该方法适用于new和update方案。

路线

当前的实现是为我的资源使用新的和编辑路径。

this.resource("locations", function(){
  this.route("new", {path:"/new"});
  this.route("edit", {path: "/:location_id" });
});

新路线

new route负责创建新记录，并在用户导航到新记录屏幕时调用。

App.LocationsNewRoute = Ember.Route.extend({
  model: function() {
    return App.Location.createRecord();
  }
});

编辑路线

当用户单击概览屏幕中的编辑按钮时，edit route负责编辑现有对象。我没有扩展默认的编辑路线，而是使用自动生成的路线。

控制器

new和edit控制器负责处理模板中发生的操作（保存或更新记录）

两个控制器唯一做的就是提交事务。

注意：我想这是重复使用的候选者，但我如何使用单个控制器来驱动2个不同的路线/模板？

App.LocationsNewController = Ember.ObjectController.extend({
  addItem: function(location) {
    location.transaction.commit();
    this.get("target").transitionTo("locations");
  }
});

App.LocationsEditController = Ember.ObjectController.extend({
  updateItem: function(location) {
    location.transaction.commit();
    this.get("target").transitionTo("locations");
  }
});

模板：

正如您所看到的，我在这里唯一的代码重用是部分（模型字段绑定）。我仍然有2个控制器（新的和编辑）和2个模板。

新模板设置正确的标题/按钮并重新使用表格部分。

<script type="text/x-handlebars" data-template-name="locations/new" >
    <h1>New location</h1>
    {{partial "locationForm"}}
    <p><button {{action addItem this}}>Add record</button></p>
</script>

编辑模板设置正确的标题/按钮并重新使用表单部分。

<script type="text/x-handlebars" data-template-name="locations/edit" >
    <h1>Edit location</h1>
    {{partial "locationForm"}}
    <p><button {{action updateItem this}}>Update record</button></p>
</script>

部分

<script type="text/x-handlebars" data-template-name="_locationForm" >
  <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="latitude">Latitude</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="latitude"}}
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="latitude">Longitude</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="longitude"}}
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="accuracy">Accuracy</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="accuracy"}}
    </div>
  </div>
</form>
</script>

注意：我希望我能在这里做一些高效/聪明的事情。

我希望我的模板看起来像这样:(从控制器获取标题，并有一个处理更新和创建的动作）

<script type="text/x-handlebars" data-template-name="locations" >
    <h1>{{title}}</h1>
    {{partial "locationForm"}}
    <p><button {{action createOrUpdateItem this}}>Add record</button></p>
</script>

问题

我是否可以重新使用此代码以获得更多的代码重用，或者尝试使用单个模板和单个控制器来执行“编辑记录”和“新记录”流程是不明智的。如果是这样，怎么办呢？我错过了我的2条路线（创建和编辑）将重复使用相同控制器/模板的部分。

Answer 1

你在整个过程中都是正确的。

您也可以在edit route中使用新的控制器和模板。

你只需做两件事。

首先在renderTemplate的{{1}}挂钩中将模板名称设为新的。

edit route

在呈现新模板时，控制器也将是App.LocationsEditRoute = Ember.Route.extend({ setupController: function(controller, model) { this.controllerFor('locations.new').setProperties({isNew:false,content:model}); }, renderTemplate: function() { this.render('locations/new') } });，您可以将操作指向newController中的事件。

如果要更改标题和按钮文本，可以将它们作为计算属性来观察newController属性。

希望这有帮助。

P.S：不要忘记在isNew的{{1}}中将isNew属性设置为true

Answer 2

使用此：

App.YourNewRoute = Em.Route.extend ({
   controllerName: 'controllerName',
   templateName: 'templateName'
 });

仅对homeController用户“home”使用初始名称。

示例：

App.YourNewRoute =  Em.Route.extend ({
   controllerName: 'home',
   templateName: 'home'
});

现在您可以使用“home”的模板和控制器方法。

EmberJS - 为不同的路线共享控制器/模板

路线

新路线

编辑路线

控制器

模板：

问题

2 个答案: