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单击更改对象属性的操作

回答

相关问题