jQuery 模板，将 jQuery 插件应用到每个模板项

Question

在我的 web 应用程序中，我需要创建许多具有不同内容（即文本和评级不同，按钮 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);
               }
           });
       }
   });
   

   // 我需要用下面的importance 值替换score 值
3. 这是数据

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

如何在生成 star div 时将此插件应用到每个 div？我知道，知道项目的 id 我可以遍历整个 DOM 并将特定的 importance 值设置为特定的 star div，但这意味着多次遍历整个 DOM，这可能会带来问题对于手机/平板电脑，特别是。如果列表变大。有没有办法在生成时将上述内容应用于 div？

Answer 1

与许多依赖于每个实例的特定数据的插件一样，您必须遍历元素才能将正确的数据应用于每个实例。

如前所述，使用模板将分数存储在 data- 属性中

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

您的模板引擎应该允许您访问它在插入之前生成的 html。

您可以在它生成的 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）