1

私はこのようなテンプレートを持っています:

<a class="btn btn-info btn-small edit"  model-id="<%= model.id %>" href="">
  <i class="icon-pencil icon-white"></i>
  edit
</a>

そして、このように定義されたビュー:

src.views.WinesView = Backbone.View.extend({
  [...]
  events: {
    'click a.edit': 'edit'
  },

  edit: function(e) {
    e.preventDefault();
    var a = $(e.target);
    var id = a.attr('model-id');
    app.edit(id);
  },
  [...]

ユーザーが「編集」テキストをクリックすると、すべてが正常に機能しますが、ユーザーがアイコン-鉛筆アイコン(タグのコンテンツ)をクリックすると、イベントは正しく発生しますが、e.targetはiタグを指し、にではありません。

実際、私が欲しいのは、バインドしたタグ内のタグがイベントを発生させた場合、そのイベントを発生させ、バックボーンからバインドした要素への参照を簡単に取得したいということです...

私はそれを解決することができます:

edit: function(e) {
  e.preventDefault();
  var a = $(e.target);
  if (a[0].tagName!=='A') { a = a.parent(); }
  var id = a.attr('model-id');
  app.edit(id);
},

しかし、私はそれを達成するためのより良い、よりエレガントで一般的な方法があるかどうか疑問に思っていました...

4

2 に答える 2

4

jQueryの$.closest()メソッドを調べてください:

edit: function(e) {
  e.preventDefault();
  var a = $(e.currentTarget).closest('a');
  var id = a.attr('model-id');
  app.edit(id);
},
于 2012-08-21T04:25:57.123 に答える
1

この方法を使用して、モデルから属性値を取得できます

edit: function(e) {
  e.preventDefault();

  var id = this.model.get("model.id");

  app.edit(id);
},

要素からHTML属性を取得する必要がある場合

$(e.currentTarget).attr("title");
于 2012-09-20T14:04:54.890 に答える