Ember.js 개체 속성을 변경하는 작업을 클릭하십시오.

Question

기본적으로 의 목록을 ArrayController 내에 표시하는 템플릿이 있습니다. 나열된 각 항목에는 특정 Object에 대한 속성을 업데이트해야하는 버튼이 있습니다. 나는 이것이 이보다 더 어렵게 만들고있는 것처럼 느낀다. 그러나 나는 그것을 이해하는 것처럼 보이지 않는다.

이

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

그럼 내 스크립트가 이것이다 : 여기

템플릿과 함께 HTML입니다

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>