javascript - 获取 Handlebars 和 Ember 中元素的值

Question

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

{{#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}}

所以有投票向上向下按钮，当单击按钮时，Ember 中会触发操作

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);
    }
  }
});

您可以通过各种不同的方式实现这一点，其中一种是将其封装在组件中，但在这种情况下，最简单的可能是告诉ArrayController使用您定义为 itemController 的 ObjectController 例如

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

这是一个有效的 JSBin 示例:http://jsbin.com/sufudo/2