8

我正在用 ember js 构建一个应用程序，但我不确定如何将 jQuery 与 ember 一起使用。我试图实现的一个示例是从我的 api 获取销售数据的页面。

在我的 app.js 我有

App.TransactionsRoute = Ember.Route.extend({
    model: function() {
        return App.Transaction.find();
    }
});

如果我将开始日期和结束日期传递给 App.Transaction.find() 方法，我的 api 将限制它在这些日期内发送回的数据。

我在页面上有一个输入开始和结束日期的表单，我想将它连接到 jQuery UI 的日期选择器。

这就是我卡住的地方我把它放在我的 ember 应用程序代码的末尾

jQuery(document).ready(function() {
    jQuery("#transactionsStartDate").datepicker();      
    jQuery("#transactionsEndDate").datepicker();
});

但它什么也不做，也不会抛出任何错误。

如何让 jquery 运行？还有我如何将输入的日期变量连接到调用App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

感谢您的帮助！

编辑 更正 jQuery 正在运行，但它在视图呈现之前运行。当我的视图被渲染时，ember 是否有一个钩子或我可以调用的东西？

4

1 回答 1

11

而不是将 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')}));    
    }
});
于 2013-02-22T06:12:26.450 回答