查看渲染-backbone.js答案

【问题标题】：view render - backbone.js查看渲染-backbone.js
【发布时间】：2013-02-25 18:24:05
【问题描述】：

我如何使这个结果在主干.js 结果想要<p><h3>fgfdgdfg</h3></p>

var TodoView = Backbone.View.extend({
    el:'p',
    render: function () {
        $('body').append(this.$el.html("<h3>fgfdgdfg</h3>"));
    }
});

var todoView = new TodoView();
todoView.render();

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

使用tagName 而不是el。
编辑以修复错误的 html，thanks @muistooshort。刚刚完全删除了<p>。

var TodoView = Backbone.View.extend({

    tagName:'h3',
    render: function () {
        $('body').append(this.$el.html("fgfdgdfg"));
    }

});

var todoView = new TodoView();
todoView.render();

如果您希望视图使用现有的 DOM 元素，则设置 el。设置tagName 告诉Backbone 为视图的根生成一个'h3' 元素。

你也可以这样做（我更喜欢这种方式；避免设置 'el'）：

var TodoView = Backbone.View.extend({

    tagName:'h3',
    render: function () {
        this.$el.html("fgfdgdfg");
        return this;
    }

});

// view is more reusable now, since it doesn't have the 'body' part in render.
// So, another instance could be rendered and added to the page somewhere else.
var todoView = new TodoView();
$('body').append(todoView.render().el);
var todoView2 = new TodoView();
$('body').append(todoView2.render().el);

如果你的 html 已经有你想要用于视图的 'h3' 元素，你可以这样做：

// assuming this html on the page already:
// <body><h3></h3></body>
var TodoView = Backbone.View.extend({

    // setting 'el' tells backbone to use the existing <h3>.
    // You probably would want to use an id rather than 'h3' though.
    el:'h3',
    render: function () {
        this.$el.html("fgfdgdfg");
        return this;
    }

});

var todoView = new TodoView();
todoView.render();

【讨论】：

有点。 El 是 DOM 元素，它基本上就像是渲染内容的包装器。默认情况下，它是一个 DIV，但您可以使用 Paul 指出的 tagName 更改其类型。
这是否有效取决于浏览器，<p><h3>X</h3></p> 不是有效的 HTML，因此某些浏览器会在您背后将其更正为 <p></p><h3>X</h3><p></p>（或类似名称）。

【解决方案2】：

您可能不能，因为<p><h3>fgfdgdfg</h3></p> 不是有效的 HTML，浏览器经常会尝试更正无效的 HTML。

来自fine <p> specification：

允许的内容

Phrasing content

而phrasing content 是：

措辞内容

由phrasing elements 和normal character data 混合组成。

Normal character data 或多或少只是没有标记的纯文本，所以<h3> 不会在那里。 Phrasing elements 是简单的东西，例如 <a>、<b>、<img>，... 也没有 <h3>。

如果您想要一致的结果，您必须修复您的 HTML。然后，一旦您记住了有效的 HTML，Paul's advice 应该可以完成。

【讨论】：