"micro" controller for each list item - i am messing this up, need help!!

Hi,

I have a controller that is responsible to print out a list of items, in this controller i have 2 templates, one generates the "<li>"s, and the other outputs the content of each li:

            init.ejs:

...
<ul>
    <% list.each(function(item){ %>
        <li class="tutor" <%= (el) -> el.data('tutor', item) %> >
          <%== options.templates.tutor.render({item : item, options: options}) %>         
        </li>
    <% }) %>
</ul>
...

  tutor.ejs:
  ....
   <div class="box3">
      <div class="price"><%= item.price %>€</div>     
      <div class="ranking"> <%= (el) -> new options.ratingtutor( $(el).find('.ranking'), {item:item}) %></div>
      <div class="status"><span><%= item.status %></span></div>
   </div>
....

I want to include another controller inside tutor.ejs, i followed Justin suggestion from following post:

            https://forum.javascriptmvc.com/topic/instantiate-control-iteratively#32525000001068467



3 Questions:
 
   Creating the "micro" controller:
         (el) -> new options.ratingtutor( $(el).find('.ranking'), {item:item})

  - Do you know why (el)  points to parent  <li> instead of <div class="ranking"> element?
  - Even if i use $(el).find('.ranking'), first element of the list does not get this controller (all other items are ok), do you know why this happens?
  - Do you know if there is a better way to do this?

My main problem here is that i want to access each <li> element that is being created to dynamically populate with another control.

(cannot debug ejs with firebug)

Thanks a lot in advance.

Cheers,
Linton Fernandes