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

时间:2012-10-20 05:52:22

标签: javascript jquery html dom backbone.js

我希望这会出现在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 。这就是我希望它工作的方式:

  1. parentView 将在简单的for()循环中初始化并创建 subView 作为示例。

  2. 我不想在 addSub 中渲染每个 subView 创建,所以我只返回的jQuery对象$el子视图即可。

  3. parentView 将保存这些$el并将它们合并到一个jQuery对象中,例如$new。我为此使用了jQuery函数.add()

  4. 然后,一旦完成循环,将$new呈现给DOM。所以一切都必须在DOM之外发生。

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

    http://jsfiddle.net/nTTbH/

1 个答案:

答案 0 :(得分:2)

这里有一些不正确的地方。在您的ParentView中,您的代码:

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

    this.$el.html($new.html());
由于.add()的工作原理,

$new.add(this.addSub(i))未被保存。您需要将此行更改为$new = $new.add(this.addSub(i))行;使它工作。

我建议完全避免使用这种方法,并考虑使用.append在每次迭代时将你的li添加到你的ul中。

e.g。 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中设置“root”元素,删除tagName: ul,它应该是el: ul,因为它需要将子视图设置为

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

如果你带走了任何东西,那就不要使用.add()并使用.append()代替!