获取Handlebars和Ember中元素的值

Question

我正在使用Handlebars.Js和Ember来制作一个小应用程序。首先把手生成模板

{{#each model}} 
    <div class="media"> 
     {{#if isVoted}} 
      <a id="voteb" class="pull-left" href="#" {{action 'voteup'}}> 
      <i class="glyphicon glyphicon-chevron-down"></i> 
       <span id="votec">{{votecount}}</span> 
      </a> 
     {{else}} 
       <a id="voteb" class="pull-left" href="#" {{action 'votedown'}}> 
       <i class="glyphicon glyphicon-chevron-up"></i> 
       <span id="votec">{{votecount}}</span> 
       </a> 
     {{/if}} 
     <div class="media-body col-md-offset-1"> 
       <h4 class="media-heading"><a id="linkt">{{title}}</a></h4> 
      </div> 
     </div> 
{{/each}} 

所以有投票上下按钮，这里的时候，点击一个按钮动作被触发的灰烬

App.IndexController = Ember.ObjectController.extend({ 

actions: { 
    voteup: function(){ 
     this.set('isVoted' , true); 
}, 
    votedown: function(){ 
     this.set('isVoted' , false); 
} 
} 

}); 

这将改变按钮的投票与否状态。

但它不会改变按钮的投票/未投票状态。我在控制台中没有任何错误。那么这里有什么问题？

还请告诉我一种方法来检测哪个投票按钮被点击因为会有很多？

谢谢

Answer 1

的{{#each}}环通过一个数组，所以应该是一个ArrayController例如。

App.IndexController = Ember.ArrayController.extend({ 
}) 

而每个项目需要媒体有它自己的特性，所以应使用ObjectController如

App.MediaController = Ember.ObjectController.extend({ 
    isVoted: false, 

    actions: { 
    voteup: function(){ 
     this.set('isVoted' , true); 
    }, 
    votedown: function(){ 
     this.set('isVoted' , false); 
    } 
    } 
}); 

可以用各种不同的方式实现这一目标，一个将其封装在一个component ，但在这种情况下，最简单的可以告诉ArrayController使用ObjectController您已经定义为itemController如

App.IndexController = Ember.ArrayController.extend({ 
    itemController: 'media' 
}) 

这里是一个工作JSBin例如：http://jsbin.com/sufudo/2

Answer 2

也许你应该在控制器中定义isVoted-var。

App.IndexController = Ember.ObjectController.extend({ 
    //or get the initial value from somewhere 
    voteUp: false, 

    actions: { 
    voteup: function(){ 
     this.set('isVoted' , true); 
    }, 
    votedown: function(){ 
     this.set('isVoted' , false); 
    } 
    } 

});