2

私がこの見解を得たとしましょう：

var HomeView = Backbone.View.extend({
    el: '#application',
    initialize: function() {
        this.template = template; // Comes from requireJS (not relevant)
        this.$elements = {};
    },
    render: function() {
        this.$el.html(this.template);

        this.$elements = {
            signIn: {
                email: $('#sign-in-email'),
                password: $('#sign-in-password')
            }
        };

        // Demonstration.
        this.$elements.signIn.email.myPluginInit();
        this.$elements.signIn.password.myPluginInit();

        //
        // NOTE: How to handle the events?
        //
    }
});

this。$elementsオブジェクトがあります。これにはDOMのすべてのオブジェクトが含まれますが、このソリューションではイベントが可変であるため、どのようにイベントを配置できますか。これは私が以前行っていたことです（backbone.orgを参照）。

var HomeView = Backbone.View.extend({
  events: {
    'click #sign-in-email': 'clickedSignInEmail',
    'focus #sign-in-password': 'focusSignInPassword'
  }
});
4

2 に答える 2

8

デリゲートイベントを使用すると、レンダリング中にjQueryを手動で使用してイベントを子要素にバインドするよりも多くの利点があります。アタッチされたすべてのコールバックは、jQueryに渡される前にビューにバインドされるため、コールバックが呼び出されても、これは引き続きビューオブジェクトを参照します。おそらく異なるイベントハッシュを使用してdelegateEventsを再度実行すると、すべてのコールバックが削除され、新たに委任されます。これは、異なるモードで異なる動作をする必要があるビューに役立ちます。

コード例：

initialiaze: function () {
  // …
  this.events = this.events || {};
  // dynamically build event key
  var eventKey = 'click ' + '#sign-in-email';
  this.events[eventKey] = 'clickedSignInEmail';
  this.delegateEvents();
  // …
}
于 2012-12-07T11:40:54.793 に答える
1

通常のjQueryイベント処理構文を使用するのはどうですか？

this.$elements.signIn.email.click(this.clickedSignInEmail);
this.$elements.signIn.password.focus(this.focusSignInPassword);

Backbone.View.delegateEventsメソッドを使用することもできますが、その場合は、セレクターからイベントハッシュを作成する必要があります。

于 2012-12-07T11:33:33.947 に答える