jQuery模板，將jQuery插件應用於每個模板項目

Question

在我的webapp中，我需要創建一些具有不同內容的相同塊（某些文本，評級，某些按鈕）（即文本和評分不同，按鈕ID是不同的）。爲此，我使用jQuery模板。

同時，對於評價，我使用「Raty」jQuery插件。它將評分顯示爲填充星號和空星號的數量，並且在模板填充數據時應將值傳遞給它。

但是，我找不到在模板處理時將插件應用於相應div的方法。

這是代碼。

1. 模板

    
   <script id="clientTemplate" type="text/html"> 
       <span class="firstline" id="firstline_${id}">${firstline} 
       <div class="star" id="s_${id}" style="cursor: pointer; width: 100px;"></div> 
       {{if unescape(alert($data.importance) )}}{{/if}} 
       </span> 
   </script> 
   

   //警告是有隻是爲了檢查我們能夠訪問所需數據
2. 這是我們需要應用到star DIV：

    
   $(".star").raty({ 
       half : true, 
       score : 2.5, 
       readOnly : false, 
       click : function(score, evt) { 
        if (readonly) { 
         return false; 
        } 
        _id = $(this).attr("id"); 
        _id = id.replace("s", ""); 
        _id = _id.trim(); 
         $.ajax({ 
          url : "importancereceive.html", 
          type : "POST", 
          data : { 
          id : _id, 
          importance : score 
         }, 
         success : function(data) { 
          if (data != "1") { 
           alert("Failed to mark plan as completed"); 
          } 
         }, 
         error : function(jqXHR, textStatus, errorThrown) { 
          alert("error: " + textStatus); 
          alert("error: " + errorThronwn); 
         } 
        }); 
       } 
   }); 
   

   //我需要更換score值從低於
3. 而這裏importance值是數據

    
   <script> 
       var clientData = [ { 
        id : 1, 
        firstline : "My first line", 
        importance : 2.0 
       } ]; 
   </script> 
   

我怎樣才能將這個插件應用於star div的每個生成？據我所知，知道我可以迭代整個DOM的項目ID並將具體的importance值設置爲特定的star div，但這意味着需要多次遍歷整個DOM，這可能會給手機/平板電腦帶來問題尤其是，如果列表變大。有沒有辦法將這件事情應用到div中？

Answer 1

與許多依賴每個實例的特定數據的插件一樣，您必須遍歷元素才能將正確的數據應用到每個實例。

使用模板

$('.star').each(function(){ 
    var score=$(this).data('score') 
    $(this).raty({ 
      half : true, 
      score : score, 
      /* other options*/ 
    }); 
}); 

你的模板引擎應該給你訪問它插入之前，它產生的HTML正如上面所提到存放在data-屬性的分數。

您可以調用它生成的html上的插件，也可以在插入DOM之前循環該html。

某些模板引擎在處理這個問題上稍微靈活一些。這取決於使用的模板系統

Answer 2

將重要性存儲在div的自定義屬性中是不是一個想法？

所以，你的模板將成爲類似：

<script id="clientTemplate" type="text/html"> 
    <span class="firstline" id="firstline_${id}">${firstline} 
    <div class="star" id="s_${id}" style="cursor: pointer; width: 100px;" data-importance="${importance}"></div> 
    {{if unescape(alert($data.importance) )}}{{/if}} 
    </span> 
</script> 

_{（我想這是這樣的事情，我不知道你的模板語言）}

又見Is it OK to add your own attributes to HTML elements?有關創建更多信息你自己的屬性。

然後你可以使用 $(this).attr("data-importance")得到你的重要性。

編輯：然後你可以使用$(this).data("importance")得到你的重要性。 （請參閱source）