Альтернативный подход к <span class = "item-in-loop" data-index = "{^ {: # index}}"></span>

Question

Извините за вопрос noobish. Я чувствую, что должен быть лучший способ, но я этого не вижу. Я не хочу, чтобы цикл был нажат кнопку, ища идентификатор. Я просто хочу передать индекс, который нужно удалить.

Вот что я думаю, что я должен сделать

HTML

<div id="list"> 
    {^{for items}} 
     <div class="list-item"> 
     ... 
     <a href="#" class="remove-list-item">Remove 
      <span class="remove-list-item-index hide">{^{:#index}}</span> 
     </a> 
     </div> 
    {{/for}} 
</div> 

JS

$('a.remove-list-item').click(function() { 
    $.observable(listArray).remove(parseInt($(this).children('span.remove-list-item-index').text())); 
}); 

Вот что я хочу сделать

HTML

<div id="listing"> 
    {^{for items}} 
     <div class="listing-item"> 
     ... 
     <a href="#" data-index="{^{:#index}}">Remove</a> 
     </div> 
    {{/for}} 
</div> 

JS

$('a.remove-list-item').click(function() { 
    $.observable(listArray).remove(parseInt($(this).attr('data-index'))); 
}); 

Answer 1

Вы можете получить текущую позицию для любого элемента, используя var view = $.view(element).

И для представлений, соответствующих блоку {^ {items items}}, каждое представление имеет свойство индекса.

Так что вы можете сделать:

$('a.remove-list-item').click(function() { 
    $.observable(listArray).remove($.view(this).index); 
}); 

который проще, чем любой из ваших предложенных подходов.

Существует несколько образцов, использующих этот подход, например. http://www.jsviews.com/#samples/editable/tags