Mit jquery in Glut App

Question

Ich baue eine App mit Ember js und ich bin mir nicht sicher, wie man jQuery mit Ember verwenden. Ein Beispiel für das, was ich erreichen möchte, ist eine Seite, die Verkaufsdaten von meiner API erhält.

in meinem app.js Ich habe

bekam

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

Wenn ich in einem Startdatum und ein Enddatum der App.Transaction.find() -Methode meine api die Daten übergeben Sie es zurückschickt wird beschränken zu diesen Daten.

Ich habe ein Formular auf der Seite mit einer Eingabe für die Anfangs- und Enddaten und ich möchte dies mit dem Datepicker von jQuery UI verbinden. Diese

ist, wo ich bin stecken ich diese App am Ende meines ember Code

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

setzen, aber es tut nichts und keine Fehler geworfen.

Wie kann ich die Jquery ausführen? auch wie hänge ich die eingegebenen Datumsvariablen an den Anruf an App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

danke für Ihre Hilfe!

EDIT Korrektur die jQuery läuft, aber es läuft, bevor die Ansicht gerendert wird. Hat Ember einen Haken oder etwas, das ich aufrufen kann, wenn meine Ansicht gerendert wird?

Answer 1

Statt die Datumsauswahl-Initialisierung in jQuery des Setzens (document) .ready() Haken in die didInsertElement Verfahren der Ansicht

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

Verwendung Ember errichtet wird in TextField- Ansicht

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

und definieren die Aktion fetchTransactions auf dem Controller

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