如何在 ember 中添加新记录 UI

Question

就在我认为我正在处理 ember 时，发生了这种情况，我碰到了一堵砖墙。

我有

App.Router.map(function() {

this.resource('customers', function() {
    this.resource('customer', {
        path : ':customer_id'
    });

客户路线：

App.CustomersRoute = Ember.Route.extend({
model: function() {
    return this.store.find('customer');
},

客户控制器：

App.CustomerController = Em.ObjectController.extend({
needs: ['state'],
isEditing: false,
isNotEditing: Ember.computed.not('isEditing'),

actions : {

    startEditing: function() {
        this.set('isEditing',true);
        this.set('validationErrors', '');
    },

    save: function() {

还有这些模板：

<script type="text/x-handlebars" data-template-name="customers">
 ...
 {{outlet}}
  ...
</script>

<script type="text/x-handlebars" data-template-name="customer">
...
{{#if isEditing}}
        <div class="well well-sm">
            <a class="btn btn-success" {{action save}}>Save</a>
            <a class="btn btn-warning" {{action cancel}}>Cancel</a>
        </div>
      {{else}}
        <div class="well well-sm">
            <a class="btn btn-primary" {{action startEditing}}>Edit</a>
            <a class="btn btn-danger" {{action delete}}>Remove</a>
        </div>
{{/if}}

这一切对我来说都很好。我可以选择一个客户，按下编辑按钮，启用表单输入，按下保存按钮，更改的数据将持久返回到数据库

然而：这是我的砖墙。

如何启用功能来创建新记录：我不想复制编辑表单，只显示空白

我假设我需要将“新”放入路由器映射中

this.resource('customers', function() {
  this.resource('customer', {
path : ':customer_id'
});

route('new');
 });

但是我要创建一个 CustomerNew 控制器和 CustomerNew 路由以及 CustomerNew 模板吗？

我已将操作放入客户控制器

<a class="btn btn-primary btn-xs pull-right" {{action startNew}}>New</a>

我真的需要创建路由、控制器和模板来处理新操作吗？或者我可以重复使用 customer/1 route/controller/template 吗？

谢谢

Answer 1

要使用 Ember Way (TM) 做事，您需要使用新的路由、控制器和模板。 Ember 确实可以轻松整合您的逻辑，而不必重复代码。在模板中您可以使用partial 执行此操作，在您的JS 代码中您可以使用Ember.Mixin 执行此操作。

这是一个 JSBin 的总体思路：http://jsbin.com/ucanam/1056/edit

这是模板中有趣的部分：

  <script type="text/x-handlebars" data-template-name="customers/new">
    Add a new customer<br/>
    {{partial "customers/form"}}
  </script>
  <script type="text/x-handlebars" data-template-name="customer/edit">
    Edit a customer<br/>
    {{partial "customers/form"}}
  </script>
  <script type="text/x-handlebars" data-template-name="customers/_form">
    {{input value=name}}
    <button {{action save}}>Save</button>
    <button {{action cancel}}>Cancel</button>
  </script>

然后是控制器：

App.CrudController = Ember.Mixin.create({
  actions : {
    save : function(){
      this.get('model').save();
      this.transitionToRoute('customers');
    },
    cancel : function(){
      this.get('model').rollback();
      this.transitionToRoute('customers');
    }
  }
});

App.CustomersNewController = Ember.ObjectController.extend(App.CrudController,{});

App.CustomerEditController = Ember.ObjectController.extend(App.CrudController,{});