在ember应用程序中使用jquery [英] Using jquery in ember app

问题描述

我正在构建一个使用ember js的应用程序，我不知道如何使用jQuery和ember。我想要实现的一个例子是从我的api获取销售数据的页面。

在我的app.js中我有

 应用程序。 TransactionsRoute = Ember.Route.extend（{
 model：function（）{
 return App.Transaction.find（）; 
} 
}）; 
  

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

我在页面上有一个表单，其中包含开始和结束日期的输入，我想钩这是jQuery UI的datepicker。

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

  jQuery（document）.ready（function（）{
 jQuery（＃transactionsStartDate）。datepicker（）; 
 jQuery（＃transactionsEndDate ）.datepicker（）; 
}）; 
  

但它没有做任何事情，没有错误被抛出。

如何让jquery运行？还如何将输入的日期变量连接到调用 App.Transaction.find（{startDate：startDateVariable，endDate：endDateVariable}）

感谢您的帮助！

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

解决方案

而不是将datepicker初始化放在jQuery中（document）.ready（）钩入视图的didInsertElement方法

  App.TransactionsView = Ember.View.extend（{ 
 templateName：'transactions'，
 didInsertElement：function（）{
 jQuery（＃transactionsStartDate，#transactionsEndDate）。datepicker（）; 
} 
}） ; 
  

使用Ember内置的TextField视图

 < script type =text / x-handlebarsdata-template-name =transactions> 
< form> 
< label for =transactionsStartDate>开始日期< / label> 
 {{view Ember.TextField id =transactionsStartDatevalueBinding =startDate}} 
< label for =transactionsEndDate>结束日期< / label> 
 {{view Ember.TextField id =transactionsEndDatevalueBinding =endDate}} 
< button {{action fetchTransactions}}>获取数据< / 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'）}））; 
} 
}）; 
  

I'm building an app with ember js and I'm not sure how to use jQuery with ember. An example of what I'm trying to achieve is a page that gets sale data from my api.

in my app.js I've got

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

If I pass in a start date and an end date to the App.Transaction.find() method my api will restrict the data it sends back to within those dates.

I have a form on the page with an input for the start and end dates and I want to hook this up to jQuery UI's datepicker.

This is where I'm stuck I put this at the end of my ember app code

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

but it doesn't do anything and no errors are thrown.

How can I get the jquery to run? also how do I hook up the inputted date variables to the call to App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

thanks for your help!

EDIT Correction the jQuery is running but it's running before the view is rendered. Does ember have a hook or something that I can call when my view is rendered?

解决方案

Instead of putting the datepicker initialization in jQuery(document).ready() hook into the didInsertElement method of the view

App.TransactionsView = Ember.View.extend({
    templateName: 'transactions',
    didInsertElement: function() {
        jQuery("#transactionsStartDate, #transactionsEndDate").datepicker();    
    }
});

use Ember's built in TextField view

<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>

and define the action fetchTransactions on the controller

App.TransactionsController = Ember.ArrayController.extend({
    fetchTransactions:function() {
        this.set('model', App.Transaction.find({startDate:this.get('startDate'), endDate:this.get('endDate')}));    
    }
});

这篇关于在ember应用程序中使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！