Sử dụng jquery trong ứng dụng ember

Question

Tôi đang xây dựng một ứng dụng với js ember và tôi không chắc chắn làm thế nào để sử dụng jQuery với ember. Một ví dụ về những gì tôi đang cố gắng đạt được là một trang nhận dữ liệu bán hàng từ api của tôi.

trong app.js của tôi, tôi đã có

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

Nếu tôi vượt qua trong một ngày bắt đầu và ngày kết thúc để các phương pháp() App.Transaction.find api tôi sẽ hạn chế các dữ liệu mà nó gửi lại trong những ngày đó.

Tôi có một biểu mẫu trên trang có đầu vào cho ngày bắt đầu và ngày kết thúc và tôi muốn kết nối điều này với trình ghi ngày tháng của giao diện người dùng jQuery.

Đây là nơi tôi đang mắc kẹt Tôi đặt này vào cuối ember mã ứng dụng của tôi

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

nhưng nó không làm bất cứ điều gì và không có lỗi được ném.

Làm cách nào để chạy jquery? cũng làm cách nào để tôi kết nối các biến ngày đã nhập vào cuộc gọi đến App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

cảm ơn sự giúp đỡ của bạn!

EDIT Chỉnh sửa jQuery đang chạy nhưng nó đang chạy trước khi chế độ xem được hiển thị. Ember có móc hay thứ gì đó mà tôi có thể gọi khi chế độ xem của tôi được hiển thị không?

Answer 1

Thay vì đặt khởi datepicker trong .ready jQuery (document)() móc vào phương pháp didInsertElement của xem

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

sử dụng Ember của xây dựng trong TextField xem

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

và xác định hành động fetchTransactions trên bộ điều khiển

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