Question

假设您在视图中创建了一个新元素 - 即您不会使用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);
  }
});

然后，您实例化View并调用其render方法：

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，但似乎应该有一个更加面向骨干的解决方案。

Answer 1

除非您使用el选项将视图附加到DOM中的现有元素，否则backbone.js会在内存中创建HTMLElement，与DOM分离。您有责任将其附加到您想要的位置（骨干为您创建一个新元素，但它不知道您希望在哪个DOM中添加）。

如果您已经拥有Backbone.View并且想要将其设置为其他元素，则可以使用setElement，但在这种情况下，您也有责任确保该元素属于DOM。

如果骨干为您提供了一种在DOM中指定元素位置的方法，那么它看起来像是：

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

同样，如果元素是否应该在elPosition之前添加，或者之后等等，会有一些混乱。这看起来很难看，难怪为什么骨干会留给你而不是设置更多的规则。在我看来，与其他框架相比，骨干设置了更少的规则，并为您提供更多自由（当您不知道如何处理时，自由可能会很痛苦：）

我们通常使用view选项让主要的父<body>指向DOM中的包含元素el。

然后将子视图附加到this.$el.appendTo(parentView.$el);

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

1 个答案: