jQuery templates, apply jQuery plugin to each template item

Question

In my webapp i need to create a number of identical blocks (some text, rating, some buttons) with different content (that is, the text and rating is different, and the button id's are different). To that end, I am using jQuery templates.

At the same time, for the rating I use the "Raty" jQuery plugin. It shows the rating as a number of filled in and empty stars, and the value should be passed to it when the templates are populated with the data.

However, I cannot find a way to apply the plugin to the corresponding div at the moment of template processing.

Here is the code.

1. the template

   <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>
   

   //the alert is there just to check that we can access the necessary data
2. This is what we need to apply to the 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);
               }
           });
       }
   });
   

   // I need to replace the score value with the importance value from below
3. And here is the data

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

How can i apply this plugin to each of the star divs while they are generated? I understand, that knowing the id of items I can iterate over the whole DOM and set the specific importance value to a specific star div, but that would mean iterating over the whole DOM a lot of times, that could pose problems for phones/tablets, esp. if the lists get big. Is there a way to apply the said thing to the div as it is being generated?

Answer 1

As with many plugins that rely on specific data for each instance you will have to loop over the elements to apply correct data to each instance.

As previously suggested store the scores in a data- attribute using template

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

Your template engine should give you access to the html it generates before it is inserted.

You could call the plugin on the html it generates and you could loop over that html prior to DOM insertion also.

Some template engines are a little more flexible in how you can handle this. It depends on the template system used