8

私は ember js でアプリを構築していますが、ember で jQuery を使用する方法がわかりません。私が達成しようとしているものの例は、API から販売データを取得するページです。

私のapp.jsで私は持っています

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

開始日と終了日を App.Transaction.find() メソッドに渡すと、API はそれらの日付内に送り返すデータを制限します。

ページに開始日と終了日を入力するフォームがあり、これを jQuery UI の日付ピッカーに接続したいと考えています。

これは私が立ち往生しているところです。私はこれを私のemberアプリコードの最後に置きました

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

しかし、それは何もせず、エラーはスローされません。

jqueryを実行するにはどうすればよいですか? また、入力された日付変数を呼び出しにフックする方法App.Transaction.find({startDate: startDateVariable, endDate: endDateVariable})

ご協力いただきありがとうございます！

編集 修正jQueryは実行されていますが、ビューがレンダリングされる前に実行されています。ember には、ビューがレンダリングされたときに呼び出すことができるフックまたは何かがありますか?

4

1 に答える 1

11

日付ピッカーの初期化を jQuery(document).ready() フックに配置する代わりに、ビューの didInsertElement メソッドに

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

Ember の組み込みの 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>

コントローラーでアクション fetchTransactions を定義します

App.TransactionsController = Ember.ArrayController.extend({
    fetchTransactions:function() {
        this.set('model', App.Transaction.find({startDate:this.get('startDate'), endDate:this.get('endDate')}));    
    }
});
于 2013-02-22T06:12:26.450 に答える