使用jQuery与Ember动作处理程序

时间:2015-02-24 07:55:18

标签: javascript jquery ember.js

我试图从ember控制器中的动作处理程序中访问jquery对象($)。但它说$未定义。

如何从动作处理程序访问jQuery对象?

以此应用为例:

<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    <div id="scroll-div">
        <h1>Test Div</h1>

    </div>
    <a href="" {{action "findHeight"}}>Find height</a>
</script>

JS

App = Ember.Application.create({
    rootElement: '#main'
});

App.IndexController = Ember.ArrayController.extend({
    actions: {
        findHeight: function(){
            console.log(this.$('#scroll-div').height);
        }
    }
});

JS小提琴:http://jsfiddle.net/sisir/5ammt2fv/

2 个答案:

答案 0 :(得分:1)

我想你需要改变:

findHeight: function(){
   console.log(this.$('#scroll-div').height);
}

至于此:

findHeight: function(){
   console.log($('#scroll-div').height());
}

Fiddle


在代码console.log(this.$('#scroll-div').height);中的这一行$('#scroll-div').height这里scroll-div是一个id,它应该只有一个,因为每个元素的ID应该是唯一的,并且要获得它的高度您应该使用.height()而不仅仅是.height

答案 1 :(得分:1)

首先,不建议在控制器中进行dom操作。更好的方法是设置target =“view”并在那里处理此操作。然后你的代码内部动作将正常工作。如果您想在控制器本身中处理它,请使用此代码段

App.IndexController = Ember.ArrayController.extend({
    actions: {
        findHeight: function(){
            alert($('#scroll-div').height());
        }
    }
});