将多个 Backbone View $el 合并到一个 jQuery 对象中答案

【问题标题】：Merging multiple Backbone View $el into one jQuery object将多个 Backbone View $el 合并到一个 jQuery 对象中
【发布时间】：2012-10-20 05:52:22
【问题描述】：

我希望它出现在 DOM 中：

<body>
  <ul>
    <li>This is 1</li>
    <li>This is 2</li>
    <li>This is 3</li>
    <li>This is 4</li>
  </ul>
</body>

ul 是 parentView，li 是 subView。这就是我希望它的工作方式：

parentView 将以简单的 for() 循环为例进行初始化和创建 subView。
我不想在 addSub 中渲染每个 subView 创建，所以我只返回 subView$el /强>。
parentView 将保存这些$el 并将它们合并到单个jQuery 对象中，例如$new。我为此使用了 jQuery 函数 .add()。
然后，一旦循环完成，将 $new 渲染到 DOM。所以一切都必须发生在 DOM 之外。

现在我的代码不起作用。它没有显示任何东西。我做错了什么？

【问题讨论】：

【解决方案1】：

这里有些地方是不正确的。在您的 ParentView 中，您的代码：

    for (i=1;i<=4;i++) {
        $new.add(this.addSub(i));
    }

    this.$el.html($new.html());

$new.add(this.addSub(i)) 没有被保存，因为 .add() 的工作原理。您需要将此行更改为类似于$new = $new.add(this.addSub(i)) 的内容；让它发挥作用。

我建议完全避免使用这种方法，并查看使用 .append 在每次迭代时将您的 li 添加到您的 ul 中。

例如this.$el.append(this.addSub(i)) 或 this.$el.append(this.addSub(i).render().el)

同样，您对 .add() 的使用会导致您的 $el.html($new.html())，但这是不必要的，因为 $new 本身将是您的 4 li 元素，因此您可以使用 this.$el.html($new); 调用 $new 本身

最后，您需要在 parentView 中设置“根”元素，删除 tagName: ul，它应该是 el: ul，因为它需要一些东西来设置您的子视图

这是您在此处工作的代码的更新 jsfiddle：http://jsfiddle.net/SQFwg/

如果你从中拿走任何东西，那就不要使用 .add() 而是使用 .append() ！

【讨论】：

如果我使用 .append()，它将在每个循环中呈现，这是低效的。示例：jsfiddle.net/SQFwg/1。但是您建议的使用 .add() 的代码虽然有效。