jsrender - 替代方法

Question

对不起这个noobish问题。我觉得必须有更好的方法，但我没有看到它。我不想在按钮单击中循环查找 ID。我只想传递要删除的索引。

这就是我认为我必须做的事情

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

对于 {^{for items}} 块对应的视图，每个视图都有一个索引属性。

所以你可以这样做：

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

这比您建议的任何一种方法都简单。

有许多使用这种方法的示例，例如http://www.jsviews.com/#samples/editable/tags