Question

我正在用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是否有钩子或者我可以调用的东西？

Answer 1

而不是将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')}));    
    }
});

在ember app中使用jquery

1 个答案: