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

基本上，我有一個模板，它在ArrayController內顯示Objects的列表。每個列出的項目都有一個按鈕，應該更新該特定的屬性Object。我覺得我比現在更困難，但我似乎無法弄清楚。Ember.js單擊更改對象屬性的操作

這裏是模板中的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的新手，所以請原諒我，如果這是一個愚蠢的問題。

來源

2012-10-10 twiz

您需要利用手柄{{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-11 02:11:03

感謝您的答覆。我如何實際更新該特定對象上的「標題」屬性？ – twiz

我剛剛更新了示例，您可以將對象作爲第二個參數傳遞給動作助手，並將其作爲事件的上下文屬性提供。 –

對不起，我花了幾天來測試這個，但無論如何代碼工作很好。有一個小問題讓我失望。看來'{{title}}'應該是'{{item.title}}'。只要您做出更改，我會盡快接受您的答案。再次感謝。 – twiz

您還可以使用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-11 06:37:53

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

回答

相關問題