Ember.js:如何将事件处理程序绑定到dom元素?

时间:2013-12-03 18:37:13

标签: ember.js jquery

我正在使用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);

0 个答案:

没有答案