1

私はbackbone.jsから始めたばかりで、現在、#listing_filterテキスト入力要素を含むdivと、RESTfulバックエンド（PHP / Codeigniter）からフェッチされたいくつかのリストを示すテーブルを含むページを作成しています。テキスト入力の値は、サーバーによって取得された結果を絞り込むためのフィルターとして機能します。

問題：テキストボックスのいずれかの値が変更されるたびに、ブラウザーがフィルター値に基づいて別の結果セットを取得するようにします。updateFilter以下は、テキスト入力値が変更されても関数が起動しない私の試みです。何がうまくいかなかったのか？

もう1つの質問は、のコンテンツをテンプレートに入れるべきか#listing_filter、それとも本体のHTMLにハードコードするだけなのかということです。ありがとう！

JSコード

window.ListingFilterView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'updateFilter');
    },

    events: {
        'change input' : 'updateFilter'
    },

    updateFilter: function() {
        console.log('hey');
    }

});

// Router

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'listings',
    },

    listings: function() {
       //... some other code here
        this.listingFilterView = new ListingFilterView();
    }
});

HTMLコード

<div id="listing_filter">
    Price: <input type="text" id="listing_filter_price" />
    Beds: <input type="text" id="listing_filter_bedroom" />
    Baths: <input type="text" id="listing_filter_bathroom" />
</div>
4

1 に答える 1

3

バックボーンビューは、ビューelまたはその内部にある要素のイベントにのみ応答しますel。デフォルトでは、ビューelは空<div>であり、他のものを使用するようにビューに指示していません。

どちらを使用するかをビューに伝えることができelます（http://jsfiddle.net/ambiguous/5yXcU/1/）：

new ListingFilterView({ el: $('#listing_filter') })
// Or like this:
new ListingFilterView({ el: '#listing_filter' })

setElementまたは、 （http://jsfiddle.net/ambiguous/APEfa/1/）を使用して、ビューをその要素にアタッチさせることができます。

initialize: function() {
    this.setElement($('#listing_filter'));
    // or setElement('#listing_filter')
}

またはel、ビューを定義するときにを設定します（http://jsfiddle.net/ambiguous/nyTZU/）：

window.ListingFilterView = Backbone.View.extend({
    el: '#listing_filter',
    //...
});

それが邪魔にならないようになったら、フォーカスが失われるまで<input>変更イベントがトリガーされないことを理解する必要があります。そのため、ユーザーが入力をタブアウトするか、イベントのリッスンに切り替えるのを待つ必要があります。タイマーを使用して、入力が停止したことを検出します。keypress

于 2012-06-16T22:31:04.503 に答える