2013-02-22 7 views
8

sto costruendo un app con Ember js e non sono sicuro come utilizzare jQuery con brace. Un esempio di quello che sto cercando di realizzare è una pagina che riceve i dati di vendita dal mio api.utilizzando jQuery nella brace app

nei miei app.js ho

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

Se mi passa in una data di inizio e una data di fine per il metodo() App.Transaction.find mio API limitare i dati rimanda entro quelle date.

Ho un modulo nella pagina di un ingresso per le date di inizio e fine e voglio agganciare questo fino a datepicker di jQuery UI.

Questo è dove mi sono bloccato ho messo questo alla fine della mia brace codice app

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

ma non fa nulla e nessun errore sono gettati.

Come posso ottenere il jquery per funzionare? anche come faccio collego le variabili di data in ingresso al chiamata a App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

grazie per il vostro aiuto!

EDIT Correzione jQuery è in esecuzione ma è in esecuzione prima del rendering della vista. Ha un gancio o qualcosa che posso chiamare quando viene visualizzata la mia vista?

risposta

11

Invece di mettere l'inizializzazione DatePicker jQuery (document) .ready() agganciare nel metodo didInsertElement della vista

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

utilizzo Ember costruito in vista 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> 

e definire la action fetchTransazioni sul controller

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

Che dire della versione Ember 2.0? Le viste sono deprecate al suo interno. –

+0

@MaksimLuzik è ancora didInsertElement sui componenti 2.0. https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/#toc_integrating-with-third-party-libraries-with-code-didinsertelement-code –

Problemi correlati