我希望这会出现在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 创建,所以我只返回的jQuery对象$el
子视图即可。
parentView 将保存这些$el
并将它们合并到一个jQuery对象中,例如$new
。我为此使用了jQuery函数.add()
。
然后,一旦完成循环,将$new
呈现给DOM。所以一切都必须在DOM之外发生。
现在我的代码不起作用。它没有显示任何东西。我做错了什么?
答案 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()代替!