Using jquery in ember app

Question

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?

Answer 1

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')}));    
    }
});