我正在使用jquery插件 scrollTo 创建按钮以“跳转”到长列表中的特定项目。我打赌有一种方法可以遍历每个项目并将事件绑定到它的相应按钮,但我不知道如何处理它。听起来像是在视图中会出现的东西......
如何将jQuery事件绑定到下面的ember模板中呈现的每个'item'?
Ember'项目'模板
<div class="buttons">
{{#each}}<a href="#" {{bindAttr class="isActive slug"}}></a>{{/each}}
</div>
<section class='region region-main-upper clearfix items'>
{{#each}}
<div {{bindAttr class=":postcard-left :item isActive slug"}}>
<div><img class='img-polaroid' {{bind-attr src=image}}></div>
<div>
<h4>{{title}}</h4>
<div class="span2">
<span class="item-property clear-row">Cost: {{printUSD itemCost}}</span>
<span class="item-property clear-row">Percent: {{percentVec}}%</span>
</div>
{{render 'options' options}}
</div>
</div>
{{/each}}
</section>
直接javascript
这有效,但不可取:
(function($){
$(document).ready(function() {
// this does what I am trying to achive, but is not maintainable...
$( "body" ).on( "click", ".solar", function(e) {
$('.items').stop().scrollTo( '.item.solar', 800 );
e.preventDefault();
});
$( "body" ).on( "click", ".coal", function(e) {
$('.items').stop().scrollTo( '.item.coal', 800 );
e.preventDefault();
});
});
})(jQuery);