0

基本的に、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 を初めて使用するので、これがばかげた質問である場合はご容赦ください。

4

2 に答える 2

2

handlebars {{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()
  }
});
于 2012-10-11T02:11:03.027 に答える
0

こんな用途にも使え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>
于 2012-10-11T06:37:53.910 に答える