javascript - 在主干视图中将数据传递给事件处理程序

Question

我正在使用 Backbonejs 开发一个网络应用程序。我有一个用例，我必须将 div1 的新位置传递给 Backbone 视图的双击事件处理程序。

我的代码看起来像

var MyView = Backbone.Views.extend({
    events: {
    'dblclick #div1' : 'div1ClickHandler' //here I want to pass new offset for #div1
   }
});

div1ClickHandler: function()
{
......
}

var myView = new MyView({model: myModel,el : #div1});

Answer 1

您可以这样做：在内部div您需要添加一个带有名称的新字段，data-yourfieldName并从 js 调用：

yourFunctionName: function(e) {
    e.preventDefault();
    var email = $(e.currentTarget).data("yourfieldName");

}

Answer 2

您可以在视图本身中传递小部件，然后您将完全控制小部件。

var MyView = Backbone.Views.extend({
initialize: function(options) {
    this.widget = options.widget; // You will get widget here which you passed at the time of view creation 
}

events: {
    'dblclick #div1' : 'div1ClickHandler' //here I want to pass new offset for #div1
   }
});

div1ClickHandler: function() {
 // Query to fetch new position and dimensions using widget
  // update the respective element

}

var myView = new MyView({model: myModel, el: $('#div1'), widget: widgetInstance});

Answer 3

假设您的视图元素是 jquery 小部件的子元素，最好的办法可能是在点击处理程序中获取您需要的值：

var MyView = Backbone.Views.extend({
    events: {
    'dblclick #div1' : 'div1ClickHandler'
   }
});

div1ClickHandler: function()
{
  var $this = $(this);
  var $widget = $this.parents('.widget-selector:first');
  $this.offset($widget.offset());
  $this.height($widget.height());
  $this.width($widget.width());
}

var myView = new MyView({model: myModel,el : #div1});

如果 jquery 小部件始终是视图元素的直接父级，则可以替换parents('.widget-selector:first')为parent(); 否则，您需要替换.widget-selector为适用于 jquery 小部件的选择器。