在 DOM 中插入视图元素答案

【问题标题】：Inserting a view element in the DOM在 DOM 中插入视图元素
【发布时间】：2014-04-21 23:48:54
【问题描述】：

我有一个要插入 DOM 的视图。据我了解，setElement 方法创建了一个未附加到 DOM 的 jQuery 元素（另存为 $el）。我正在尝试将该 jQuery 元素插入到现有的 DOM 元素中，但没有成功。

SimpleView = Backbone.View.extend({

    initialize: function(){
        this.setElement('#simpleview');
        this.render();
    },

    render: function(){
        this.$el.appendTo('#container');
    }
});

var myview = new SimpleView();

我错过了什么？

jsFiddle here

【问题讨论】：

您的视图没有内容，您确定它没有工作，只是没有看到任何显示的内容？
我正在使用开发者控制台查看对 html 的更改，但没有任何反应。
我会在里面放一些内容，如果你还有问题，我会做一个 jsFiddle。
好的，我在元素中添加了一些内容，这是 jsFiddle：jsfiddle.net/pz8FE
Uncaught ReferenceError: Backbone is not defined -- 你需要将它添加到小提琴中。

标签： javascript jquery dom backbone.js backbone-views

【解决方案1】：

我认为您误解了setElement 的工作原理。当你调用 setElement 时，你应该给它一个已经存在的 DOM 元素，然后 setElement 做三件事：

将视图的el 设置为元素。
从旧的el 取消委派事件并将视图的事件绑定到新的el。
在$el 中缓存el 的jQuery 包装版本。

您似乎正在调用setElement 来尝试使用id="simpleview" 创建一个新元素。您可能只想在视图定义中包含 id: 'simpleview'，因为

this.el 是从视图的 tagName、className、id 和 attributes 属性（如果指定）创建的。如果不是，el 是一个空的div。

如果您的视图看起来更像这样，您应该会得到所需的内容：

SimpleView = Backbone.View.extend({
    id: 'simpleview',
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.appendTo('#container');
    }
});

更新小提琴：http://jsfiddle.net/ambiguous/7GPEy/

【讨论】：

【解决方案2】：

This should do what you're after:

$(function(){

    var SimpleView = Backbone.View.extend({

        el: $('#container'),

        initialize: function () {
            this.render();
        },

        render: function () {
            this.$el.html('<div>HELLO</div>');
        }

    });

    var myview = new SimpleView();

});

【讨论】：

感谢您的指点，我调整了您的解决方案并将this.$el.html(...) 替换为$('<div/>', {id:'simpleview',text:'hello'}).appendTo(this.el);。问题是，事件现在将被委托给容器，而不是视图......我宁愿修复后不会出现另一个问题。