流星JQuery開始評級問題

Question

我遇到的問題試圖使用下面的流星包：dandv：jquery-rateit。

我使用它作爲票據系統，每個更新都將有一個開始評級。但是，當我有超過1條評論時，第二條總是返回0值。

這裏是我的代碼：

JS：

Template.rating.events({ 
    'click .rateit': function(e){ 
    var rating = $('#rate').rateit('value'); 
    console.log(rating); 
    Session.set('UpdateId', this._id); 
    var UpdateId = this._id; 
    console.log(UpdateId); 
    /*Meteor.call('saveRate',rating,UpdateId);*/ 

    return false; 
    } 
}); 


Template.rating.rendered = function() { 
    this.$('.rateit').rateit(); 
} 

HTML：

<template name="Update"> 

    {{#each Updates}} 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       <h3 class="panel-title" align="center">Update</h3> 
      </div> 
      <div class="panel-body"> 
       <table class="table"> 
        <tr> 
         <td width="15%" nowrap align="left">Created By:</td> 
         <td width="35%" align="left">{{createdBy.username}}</td> 
         <td width="15%" nowrap align="left">Created At:</td> 
         <td width="35%" align="left">{{formatDate createdAt}}</td> 
         <td width="15%" nowrap align="left">Rating:</td> 

         <td width="35%" align="left">{{> rating}}</td> 

        </tr> 
        <tr> 
         <td colspan="4">{{description}}</td> 
        </tr> 
       </table> 
      </div> 
      </div> 
    {{/each}} 
</template> 

<template name="rating"> 
    <div class="rateit" id="rate"></div> 
</template> 

現在，當我嘗試進行評分的第二個意見是返回0截圖：http://screencast.com/t/ejaTI98X

無論什麼星星如果我選擇，它總是返回0.我認爲錯誤應該可能在HTML中。

我真的很感激你的幫助。如果您有任何問題，請告訴我。

祝您有美好的一天。

Answer 1

您遍歷更新，我假設有多個更新。對於每次更新，您都會調用模板{{> rateit}}，然後呈現id = rate的div，因此您最終會得到多個具有相同ID的div，因此您不知道哪一個$（'＃rate '）你正在訪問。

在您的事件處理程序中，您還使用全局jQuery處理程序。

我建議您使用以下方式而不是範圍jQuery的本地模板背景

Template.rating.events({ 
    'click .rateit': function(e,template){ 
    var rating = template.$('.rateit').rateit('value'); 
    console.log(rating); 
    Session.set('UpdateId', template.data._id); 
    var UpdateId = template.data._id; 
    console.log(UpdateId); 
    /*Meteor.call('saveRate',rating,UpdateId);*/ 

    return false; 
    } 
});