如何在ember中添加新的记录UI

时间:2013-09-12 19:06:44

标签: ember.js

就在我认为我正在处理余烬的时候,这种情况发生了,我碰到了一堵砖墙。

我有

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}}

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

然而

:这是我的砖墙。

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

我假设我需要将“new”放入路由器地图

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>

我真的需要创建一个路线&amp;控制器&amp;模板只是为了处理新动作?或者我可以重用客户/ 1路线/控制器/模板吗?

感谢

1 个答案:

答案 0 :(得分: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,{});