我正在用ember js构建一个应用程序,我不知道如何在ember中使用jQuery.我想要实现的一个例子是一个从我的api获取销售数据的页面.
在我的app.js我有
App.TransactionsRoute = Ember.Route.extend({
model: function() {
return App.Transaction.find();
}
});
如果我将开始日期和结束日期传递给App.Transaction.find()方法,我的api将限制它在这些日期内发回的数据.
我在页面上有一个表单,其中包含开始日期和结束日期的输入,我想将其连接到jQuery UI的datepicker.
这就是我被困住的地方我把它放在我的余烬应用程序代码的末尾
jQuery(document).ready(function() {
jQuery("#transactionsStartDate").datepicker();
jQuery("#transactionsEndDate").datepicker();
});
但它没有做任何事情,也没有抛出任何错误.
我怎样才能运行jquery？另外我如何将输入的日期变量挂钩到对App.Transaction.find的调用({startDate：startDateVariable,endDate：endDateVariable})
谢谢你的帮助！
编辑
更正jQuery正在运行但它在呈现视图之前正在运行.在渲染视图时,ember是否有钩子或者我可以调用的东西？
解决方法
而不是将jQuery(document).ready()中的datepicker初始化挂钩到视图的didInsertElement方法中
App.TransactionsView = Ember.View.extend({
templateName: 'transactions',didInsertElement: function() {
jQuery("#transactionsStartDate,#transactionsEndDate").datepicker();
}
});
使用Ember内置的TextField视图
<script type="text/x-handlebars" data-template-name="transactions">
<form>
<label for="transactionsStartDate">Start Date</label>
{{view Ember.TextField id="transactionsStartDate" valueBinding="startDate"}}
<label for="transactionsEndDate">End Date</label>
{{view Ember.TextField id="transactionsEndDate" valueBinding="endDate"}}
<button {{action fetchTransactions}}>Fetch Data</button>
</form>
</script>
并在控制器上定义动作fetchTransactions
App.TransactionsController = Ember.ArrayController.extend({
fetchTransactions:function() {
this.set('model',App.Transaction.find({startDate:this.get('startDate'),endDate:this.get('endDate')}));
}
});
