<span class="item-in-loop" data-index="{^{:#index}}"></span> 的替代方法

Question

抱歉这个菜鸟问题。我觉得必须有更好的方法，但我没有看到。我不想在按钮点击中循环查找 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

<span class="item-in-loop" data-index="{^{:#index}}"></span> 的替代方法

Alternate approach to <span class="item-in-loop" data-index="{^{:#index}}"></span>

jsrender

jsviews