如何绑定Backbone子视图中的点击事件 [英] Howto bind a click event in a Backbone subview

问题描述

我在Backbone子视图中了解事件绑定时遇到问题。我的观点定义如下：

  TenantView = Backbone.View.extend（{
 events：{
click：setActive
}，
 initialize：function（）{
 this.parentEl = this.options.parentEl; 
 return this.render（）; 
}，
 template：new EJS（{
 url：'/scripts/templates/tenant.ejs'
}），
 render：function（）{
 $（this.parentEl）.children（'ul'）。append（this.template.render（this.model））; 
 return this; 
}，
 setActive：function （event）{
 return this.model.set（'active'，true）; 
} 
}）; 
  

模板只包含一个 li containg一个 a 。这样做，我的视图上的点击事件不会被捕获，我的方法 setActive 从不被触发。

当我通过 el 属性扩展我的视图，如 el：'li' / code>我的（2）个视图中的一个正确执行，并触发 setActive 函数。第二个观点根本没有反应。如果我在视图初始化期间隐藏了 el 属性，则工作视图的 el 属性指向正确的 li ，失败的视图 el 指向可以找到的第一个 li 在页面中。

可以看出，当涉及到 el 属性的含义时，我完全迷失了。 p>

问题是，如何绑定视图点击这个非常意见 setActive function？

任何人都可以启发我吗？

Regards
Felix

解决方案

首先，您可以阅读文档和此。

As TenantView 有 parentEl 属性，我假设它是从一些 parent_view 呈现的。我会建议一些如下所示的方法，并尝试一下。

  var ChildView = Backbone.View.extend（{
 tagName：li，//根据需要更改
 
事件：{
click：setActive
}，
 
初始化：function（）{
 _.bindAll（this，setActive）; 
 //代码初始化child_view 
}，
 
 render：function ）{
 //因为我不熟悉你使用模板的方式，
 //我简单地调用渲染模板，但它应该渲染
 //内容保存在li标签
这个$ el.html（this.template（））; 
 
返回此; 
}，
 
 setActive：function（event）{
 //在事件回调中执行的代码
} 
}）; 
 
 
 var ParentView = Backbone.View.extend（{
 el：#parent_view_el，
 
 initialize：function（）{
 //父视图初始化代码
}，
 
渲染：function（）{
 //从子视图初始化的地方
 //可能是一个循环通过收集初始化多个子视图
 //将个人模型传递给视图
 
 var child_view = new ChildView（）; 
 
 this。$（ ul）append（child_view.render（）。$ el）; //相当于此$ el.find（ul）
 
返回此; 
} 
}）; 
  

希望它有帮助!!

I'm having problems understanding the event binding in a Backbone subview. My view is defined as follows:

TenantView = Backbone.View.extend({
  events: {
    "click": "setActive"
  },
  initialize: function() {
    this.parentEl = this.options.parentEl;
    return this.render();
  },
  template: new EJS({
    url: '/scripts/templates/tenant.ejs'
  }),
  render: function() {
    $(this.parentEl).children('ul').append(this.template.render(this.model));
    return this;
  },
  setActive: function(event) {
    return this.model.set('active', true);
  }
});

The template simply consists of an li containg an a. Done this way, clicks events on my view are not catched, my method setActive is never triggered.

When I extend my view by an el property like el: 'li' one of my (2) views acts properly and triggers the setActive function. The second view does not react at all. If I insepct the el property during the views initialization, the working view's el property points to the right li, the failing views el points to the first li that can be found in the page.

As one can see, I am totally lost when it comes to the meaning of the el property.

Question is, how can I bind a click on view to this very views setActive function?

Can anyone enlighten me please?

Regards Felix

解决方案

First thing, you may read documentation and this. Explanation about el is given there.

As TenantView has parentEl property, I'm assuming it is being rendered from some parent_view. I would suggest some approach like below and give it a try.

var ChildView = Backbone.View.extend({
  tagName : "li", // change it according to your needs

  events : {
    "click": "setActive"
  },

  initialize : function() {
    _.bindAll(this, "setActive");
    // code to initialize child_view
  },

  render : function() {
    // as I'm not familiar with the way you are using template, 
    // I've put simple call to render template, but it should render the
    // content to be kept inside "li" tag
    this.$el.html(this.template()); 

    return this;
  },

  setActive : function(event) {
    // code to be executed in event callback
  }
});


var ParentView = Backbone.View.extend({
  el : "#parent_view_el",

  initialize : function() {
    // parent view initialization code
  },

  render : function() {
    // a place from where ChildView is initialized
    // might be a loop through collection to initialize more than one child views
    // passing individual model to the view

    var child_view = new ChildView();

    this.$("ul").append(child_view.render().$el); // equivalent to this.$el.find("ul")

    return this;
  }
});

Hope it helps !!

这篇关于如何绑定Backbone子视图中的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！