Question

基本上，我有一个模板，在Objects中显示ArrayController的列表。每个列出的项目都有一个按钮，应该更新该特定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>

Ember.js单击更改对象属性的操作

2 个答案: