Backbone this.el 当我从 JS 渲染我的模板时事件不工作

Question

当我将模板附加到正文时，el 和 $el 不起作用。例如，考虑将模板渲染到主体上的视图：

var MyView = Backbone.View.extend({
   el: "#main-menu",
   initialize: function(){
      this.render();
   },
   events: {
      "click": "clickHandler"
   },
   render: function(){
      $("body").append( '<div id="main-menu" style="width:50px;height:50px;background-color:red;"></div>' );
   },
   clickHandler: function(){
    alert("test");
   }
});

我渲染包含 #main-menu 元素的 div 在它已经为 el 定义之后。每当我尝试使用 el 或任何它不起作用的事件时。一个选项是将 el 设置为 body 但出于某种原因，这对我来说似乎是错误的，因为那不是我真正的元素，我必须在所有点击处理程序中写入 #main-menu。

想法？

Answer 1

这是正常行为，请查看此代码：

this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
this.el = this.$el[0];

这是Backbone内部视图代码。 el 元素应该是 DOM 树中存在的元素。在我看来，对于此任务，您应该创建 parent/child 视图。例如创建两个视图并渲染其中一个内部视图。

Answer 2

您基本上是在告诉 backbone 您的 el 是 ID 为 main-menu 的元素，它应该已经存在于页面中。但是，您要在渲染函数中添加具有该 id 的元素！您需要使用 this.setElement($("#main-menu")); 手动重置视图元素，这非常难看。

您有 2 个选择：

在创建视图之前创建 main-menu 元素并将其添加到页面，这允许您以与之前类似的方式定义视图：

var MyView = Backbone.View.extend({
    el: "#main-menu",
    initialize: function(){
        this.render();
    },
    events: {
        "click": "clickHandler"
    },
    render: function(){
        this.$el.append('<p>Some menu contents</p>' );
    },
    clickHandler: function(){
        alert("test");
    }
});

$("body").append( '<div id="main-menu"></div>');
var view = new MyView();

您可以在this fiddle

不要在您的视图中设置 el，让 backbone 创建一个考虑到 id、tagName、className 的元素和视图的 attributes 属性。然后在创建视图后，您可以将其 $el 插入到页面中。

var MyView = Backbone.View.extend({
    id: "main-menu",
    initialize: function(){
        this.render();
    },
    events: {
        "click": "clickHandler"
    },
    render: function(){
        this.$el.append('<p>Some menu contents</p>');
    },
    clickHandler: function(){
        alert("test");
    }    
});

var view = new MyView();
$("body").append(view.$el);

你可以在this other fiddle

Backbone this.el 当我从 JS 渲染我的模板时事件不工作

Backbone this.el and events not working when I render my templates from JS

javascript

jquery

backbone.js

backbone-views

backbone-events