Javascript Backbone.js-向页面呈现新元素

假设您在视图中创建了一个新元素，也就是说，您没有使用

el

将页面上的现有元素作为目标

var StudentView = Backbone.View.extend({
  tagName: 'article',
  className: 'student-name',
  template: _.template($('#name-tpl').html()),

  render: function(){
    var student_tpl = this.template({name: 'Rikard'});
    this.$el.html(student_tpl);
  }
});

然后实例化视图并调用其渲染方法：

var student_view = new StudentView();
student_view.render();

您的HTML包含以下模板：

<div class="target">
  <script id="name-tpl" type="text/template">
    <%= name %>
  </script>
</div>

这不会将新创建的元素打印到页面。如果我们将

el

设置为

.target

，那么它会工作，但不会打印您在视图中设置的标记名或类名

有没有办法将新创建的元素打印到页面上？我曾考虑使用jQuery

append

，但似乎应该有一个更面向主干的解决方案。

除非您使用选项将视图附加到DOM中的现有元素，否则会在内存中创建一个

HTMLElement

，与

DOM

分离。您有责任将它附加到您想要的位置（主干为您创建了一个新元素，但它不知道您希望将它添加到DOM中的什么位置）

如果您已经有一个

主干.View

，并且希望将其设置为其他元素，则可以使用，但在这种情况下，您也有责任确保该元素是

DOM

的一部分

---

如果主干为您提供了一种在DOM中指定元素位置的方法，则类似于：

{
  tagName: 'article',
   elPosition: '#container > .content+div:nth-child(3)'
}

同样，也会有一些混淆，比如是否应该将元素添加到

elPosition

之前或之后等。这看起来很难看，难怪主干将其留给您，而不是设置更多规则。在我看来，与其他框架相比，主干设置的规则更少，并且给了您更多的自由（当您不知道如何处理它时，自由可能是一种痛苦：）

---

我们通常要做的是，使用

el

选项，让主父视图

像
一样指向DOM中的包含元素

然后像
this.$el.appendTo（parentView.$el）一样将子视图附加到它
谢谢。这看起来很奇怪，加上艾迪·奥斯马尼在他的《脊梁》一书中并没有把这一点说清楚。