Używanie jquery w aplikacji ember

Question

Buduję aplikację z ember js i nie jestem pewien, jak używać jQuery z ember. Przykładem tego, co próbuję osiągnąć, jest strona, która pobiera dane o sprzedaży z mojego api.

w moich app.js Mam

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

Gdybym przekazać w dniu rozpoczęcia i data zakończenia do App.Transaction.find metoda() mój API ograniczy dane wysyła z powrotem w te daty.

Mam formularz na stronie z danymi wejściowymi dla dat początkowych i końcowych i chcę go podłączyć do datepicker jQuery UI.

To gdzie utknąłem kładę to na końcu mojego ember kodzie aplikacji

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

ale nic nie robi i nie ma błędów są wyrzucane.

Jak mogę uruchomić jquery? także jak podłączyć zmienne daty do wywołania do App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

dziękuję za pomoc!

EDYCJA Korekta jQuery działa, ale działa przed renderowaniem widoku. Czy ember ma hak lub coś, co mogę wywołać, gdy mój widok jest renderowany?

Answer 1

Zamiast umieszczać inicjowanie datepicker w jQuery (document) .ready() hak do metody didInsertElement widoku

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

użycie Ember wbudowanego w świetle 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> 

i określ akcja fetchTransakcje na kontrolerze

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