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

Question

假设您在 View 中创建了一个新元素 - 即您没有使用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一部分。

如果 Backbone 给了你一种方法来指定元素在 DOM 中的位置，那看起来像：

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

同样，会出现混淆，比如元素应该添加在elPosition之前还是之后等等。这看起来很难看，难怪为什么主干把它留给你而不是设置更多规则。 在我看来，与其他框架相比，backbone 设置的规则更少，给你更多的自由（当你不知道如何处理自由时，它会很痛苦:)

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

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-21 04:21:59

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-21 04:21:59

解决方案1
1 已采纳 2015-11-21 04:21:59