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?

Devin Crossman · Accepted Answer · 2013-02-22 06:18:40Z

11

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

edited Feb 22, 2013 at 6:18

answered Feb 22, 2013 at 6:12

Devin Crossman

7,59013 gold badges67 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maksim Luzik Over a year ago

What about with the Ember 2.0 version? Views are deprecated in it.

Jasmine Hegman Over a year ago

@MaksimLuzik it's still didInsertElement on the 2.0 components. guides.emberjs.com/v2.6.0/components/the-component-lifecycle/…

Collectives™ on Stack Overflow

Using jquery in ember app

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related