Ember.js單擊更改對象屬性的操作

Question

基本上，我有一個模板，顯示ArrayController中的Objects列表。 每個列出的項目都有一個按鈕，應該更新該特定Object的屬性。 我覺得我比這更困難，但我似乎無法弄明白。

這是帶有模板的HTML：

  <script type="text/x-handlebars">
      {{view App.MainView}}
  </script>

  <script type="text/x-handlebars" data-template-name="item_template">
      {{#view App.addButtonView}}
          <div id="add_button"><span>Add Item</span></div>
      {{/view}}

      <div id="item_list">
          {{#each App.itemsController}}
              <div class="item_title">{{title}}</div>
                  {{#view App.updateTitleBtnView}}
                       <div class="title_btn">UPDATE THE TITLE</div>
                  {{/view}}
              </div>
          {{/each}}
      </div>
  </script>

然后我的腳本是這樣的：

var App = Em.Application.create({
    ready:function(){
        this.itemsController.createItem();
    }
});

App.Item=Em.Object.extend({
    title:"An Item"
});

App.itemsController = Ember.ArrayController.create({
    content: [],
    createItem: function(){
        var item = App.Item.create();
        this.pushObject(item);
    }
});


App.addButtonView = Ember.View.extend({
    click: function(){
          App.itemsController.createItem();
    }
});

App.updateTitleBtnView = Ember.View.extend({
    click: function(){

        ////////////////////////////////////////////////////////////////
        // Change the value of the title property for a single Object //
        ////////////////////////////////////////////////////////////////

    }
});

App.MainView = Ember.View.extend({
    templateName: 'item_template'
});

我需要在視圖中包含哪些代碼： App.updateTitleBtnView ？ 我是以正確的方式解決這個問題嗎？

我是Ember的新手，如果這是一個愚蠢的問題，請原諒我。

Answer 1

您需要使用把手{{action}}處理程序。

<script type="text/x-handlebars">
  {{view App.MainView}}
</script>

<script type="text/x-handlebars" data-template-name="item_template">
  <button id="add_button" {{action addItem}}>Add Item</button>

  <div id="item_list">
      {{#each item in App.itemsController}}
          <div class="item_title">{{item.title}}</div>
          <a href="#" {{action updateTitle item}}>UPDATE THE TITLE</a>
      {{/each}}
  </div>
</script>

並將所有視圖邏輯放在App.MainView上。

App.MainView = Ember.View.extend({
  templateName: 'item_template',
  addItem: function(event){
    App.itemsController.createItem();
  },
  updateTitle: function(event){
    event.context.updateTitle()
  }
});

Answer 2

您也可以使用CollectionView 。

    var App = Em.Application.create();

    App.itemsController = Ember.ArrayController.create({
        content: [],
        createItem: function(){
            this.pushObject(
                Ember.Object.create({title:"old Title"})
            );
        }
    });

    App.MainView = Ember.CollectionView.extend({
      contentBinding: 'App.itemsController.content'
      itemViewClass: Ember.View.extend({
        update: ->
            this.get('content').set('title', "Updated Title")
      })
    })

    <script type="text/x-handlebars">
      <a {{action createItem target="App.itemsController"}} href="#">Add Item</a>
      {{#collection App.MainView}}
        Title: {{view.content.title}}
        <a {{action update}} href="#"> Update Title </a>
      {{/collection}}
    </script>