ember.js - EmberJS - 为不同的路线共享 Controller /模板

Question

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

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

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

在我的实现中，我有

• 2 条路线定义
• 2 个路线对象
• 2 个 Controller 对象
• 2 个模板

我想知道是否

• 我无法在这里提倡重复使用
• 如果需要所有这些对象。

什么让我烦恼:

• 我有 2 个单独的模板用于创建和编辑(虽然它们几乎相同)
• 我有 2 个独立的 Controller ，它们执行完全相同的操作。

我希望在 Controller 级别解决这个问题。当 Controller 装饰模型时，在我的例子中，1 个 Controller 对象可以包装新记录或现有记录。然后它可以公开一个属性(isNewObject)，以便模板可以决定我们是否处于“新建”或“编辑”流程。 Controller 可以有一个 createOrUpdate 方法，该方法可以在 new 和 update 场景中工作。

路线

当前的实现正在为我的资源使用新的编辑路由。

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

新路线

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

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

编辑路线

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

Controller

new 和 edit Controller 负责处理模板中发生的操作(保存或更新记录)

两个 Controller 所做的唯一一件事就是提交事务。

注意:我想这是一个可以重复使用的候选者，但是我如何使用单个 Controller 来驱动 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");
  }
});

模板:

如您所见，我这里唯一的代码重用是部分代码(模型字段绑定(bind))。我还有 2 个 Controller (新 Controller 和编辑 Controller )和 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>

注意:我希望我可以在这里做一些高效/智能的事情。

我希望我的模板看起来像这样:(从 Controller 获取标题，并有一个操作来处​​理更新和创建)

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

问题

我可以重新编写此代码以实现更多代码重用吗？或者尝试使用单个模板和单个 Controller 来实现“编辑记录”和“新记录”流程是一个坏主意吗？如果是这样，该怎么办？我缺少我的 2 条路线(创建和编辑)将重复使用相同 Controller /模板的部分。

Answer 1

你自始至终都是正确的。

您还可以在编辑路线中使用新的 Controller 和模板。

你只需要做两件事。

首先在编辑路由的renderTemplate Hook 中将模板名称指定为新名称。

App.LocationsEditRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('locations.new').setProperties({isNew:false,content:model});
  },
  renderTemplate: function() {
    this.render('locations/new')         
  }
});

随着新模板的呈现， Controller 也将成为 newController，并且您可以让操作指向 newController 中的事件。

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

希望这有帮助。

P.S: 不要忘记在new Route的setupController中将isNew属性设置为true