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);
    }
});

第一个视图只创建列表项,第二个视图实际上将它们放在页面上.我认为这与backbone.js站点上的ToDo示例中发生的情况非常相似.我认为惯例是将内容呈现给el.因此,el可用作放置模板化内容的登陆位置或容器.然后,Backbone将其事件绑定到其中的模型数据.

当你创建一个视图中可以使用操纵EL在四个方面el:,tagName:,className:,和id:.如果没有声明这些,则默认为没有id或class的div.此时它也与页面无关.您可以使用tagName将标记更改为其他标记(例如tagName: "li",将为您提供<li></li>).你也可以同样设置el的id和class.仍然el不是您页面的一部分.el属性允许您对el对象进行非常精细的粒度操作.大多数时候我使用的是一个el: $("someElementInThePage")实际上将你对视图中所做的所有操作绑定到当前页面的操作.否则,如果您希望在视图中看到您在视图中完成的所有艰苦工作,则需要将其插入/附加到视图中的其他位置(可能在渲染中).我喜欢将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();
});