javascript - Backbone.View "el" 混乱

Question

应该如何处理视图el？它必须被设置，否则事件不会触发（见这里）。

但它应该是页面上已经存在的元素吗？在我的应用程序中，我将（jQuery 模板）模板渲染到 Fancybox。el在那种情况下应该是什么？

Answer 1

视图 el 是所有事件绑定发生的地方。您不必使用它，但如果您希望主干触发事件，您需要在 el 上进行渲染工作。视图 el 是一个 DOM 元素，但它不必是预先存在的元素。如果您不从当前页面中拉出一个，它将被创建，但是如果您想看到它做任何事情，则必须将其插入页面中。

一个例子：我有一个创建单个项目的视图

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

第一个视图只是创建列表项，第二个视图实际上将它们放置在页面上。我认为这与主干.js 站点上的ToDo 示例中发生的情况非常相似。我认为约定是将您的内容呈现到el中。因此，el 充当放置模板内容的着陆点或容器。Backbone 然后将其事件绑定到其中的模型数据。

创建视图时，您可以使用el:、tagName:、className:和以四种方式操作 el id:。如果这些都没有声明，则 el 默认为没有 id 或 class 的 div。此时它也与页面无关。您可以使用 tagName 将标签更改为其他内容（例如tagName: "li"，会给您一个 el <li></li>）。同样可以设置el的id和class。仍然 el 不是您页面的一部分。el 属性允许您对 el 对象进行非常精细的操作。大多数时候我使用一个el: $("someElementInThePage")它实际上将您在视图中对 el 所做的所有操作绑定到当前页面。否则，如果您想看到您在视图中所做的所有艰苦工作都显示在页面上，您需要将其插入/附加到您视图中其他位置的页面（可能在渲染中）。我喜欢将 el 视为您所有视图都可以操作的容器。

Answer 2

现在有点老了，但我也很困惑，所以对于到达这里的其他人来说，这个小提琴可能会有所帮助 - http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});

Answer 3

您希望您的“el”引用包含子元素的元素，该子元素具有触发视图更改的任何事件。可以像“body”标签一样宽。