4

内部divを含むバックボーンのビューがあります。ユーザーがdivの外側をクリックしたときにdivを非表示にしたい。

ビュー内で「クリックしないでください#inner_div」：「removeDiv」というイベントを設定する方法がわかりません。

これを行う方法について何か提案はありますか？

4

3 に答える 3

3

通常のアプローチは、クリックハンドラーをに直接アタッチしてから<body>、を閉じるか非表示にすること<div>です。例えば：

render: function() {
    $('body').on('click', this.remove);
    this.$el.html('<div id="d"></div>');
    return this;
},
remove: function() {
    $('body').off('click', this.remove);
    // This is what the default `remove` does.
    this.$el.remove();
    return this;
}

<div>削除するのではなく非表示にしたい場合は、クリックを;<body>とは別のメソッドにバインドするだけです。removeただし、クリックハンドラーをから削除することをお勧めし<body>ますremove。また、ビューのクリックイベントをトラップelして、に到達しないようにする必要があり<body>ます。

デモ： http： //jsfiddle.net/ambiguous/R698h/

クリックイベントを気にする他の要素がある場合は、絶対にaを配置して<div>を覆い隠し<body>、クリックハンドラーをそれにバインドすることができます。jQuery BlockUIプラグインを見て、これがどのように行われるかを確認できます。

于 2012-10-20T02:24:52.157 に答える
0

Prototypeを使用する場合は、次のことができます。

initialize: function() {
  // some code
  document.on('click', function(e, target) {
    if (target !== this.el && target.up('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}

jQueryでは次のようになります。

initialize: function() {
  // some code
  $(document).on('click', function(e) {
    if (e.target !== this.el && e.target.parent('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}
于 2012-10-23T06:43:38.700 に答える
0

DOMを直接操作することはできますが、ビューに適切な構造を与えることで、Backboneに処理を任せることができます。例えば：

BoxView = Backbone.View.extend({
  events: {
    'click': '_click'
  },

  _click: function() {
    return false;
  }
});

AppView = Backbone.View.extend({
  el: '.app',

  initialize: function() {
    this.boxView = new BoxView({ el: $('.box') })
  },

  events: {
    'click': '_click'
  },

  _click: function() {
    this.boxView.remove();
  }
});

new AppView({ el: $('.app') });

このようにして、外部ビューのクリックがトリガーされたら、内部ビューを変更できます。BoxViewclickイベントのバインドに注意して、ユーザーがクリックしたときにイベントが破棄されないようにします。

デモ：https ：//jsfiddle.net/embs/45da2ppm/

サブビュー構造に簡単にリファクタリングできないバックボーンビューの複雑な構造がすでにある場合でも、Backbone.Eventsモジュールを使用して、内部ビュー内の外部ビューのクリックイベントをリッスンし、必要に応じて操作できます。

また、Backboneを使用する際のよくある間違いに関するこの素晴らしい記事を確認することをお勧めします。それらのいくつかはあなたの質問に密接に関連しています：

于 2017-02-24T14:06:36.573 に答える