0

燃えさしを手に入れたと思ったら、これが起こり、レンガの壁にぶつかります。

私は持っている

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>

新しいアクションを処理するためだけにルートとコントローラーとテンプレートを作成する必要がありますか? または、 customer/1 route/controller/template を再利用できますか?

ありがとう

4

1 に答える 1

1

The 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,{});
于 2013-09-14T21:13:01.013 に答える