我已经查看了这里的所有 Backbone.js 答案，但没有找到解决我问题的答案；如果我错过了一个，请指出我。
我正在尝试获取 BackBone.js subview 来呈现其父 View 呈现的 HTML 中包含的静态元素。我创建了一个最简单的例子来说明。这是 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Child View Not Rendering</title>
</head>
<body>
<div id="parent"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<script src="test.js"></script>
</body>
</html>
这是 test.js Javascript:
(function () {
var Child = Backbone.View.extend({
el: '#child',
render: function () {
this.$el.html('World');
}
});
var Parent = Backbone.View.extend({
el: '#parent',
initialize: function () {
this.child = new Child();
},
render: function () {
this.$el.html('Hello <span id="child"></span>!');
this.child.render();
}
});
var parent = new Parent();
parent.render();
})();
当它运行时，我在浏览器中只看到 "Hello !" 而不是 "Hello World!" 。我究竟做错了什么？提前致谢。
更新
我找到了自己的答案(请参阅下面的“答案”)，但现在我仍然想知道我的解决方案是否是最好的方法，或者我是否不应该继续创建新的 child () 在 Parent.initialize() 中，并弄清楚如何使 Child.$el 表现得就像使用 jQuery.live() 。有想法吗？
更新#2
我找到了另一个答案，将 new Child() 的创建留在 Parent.initialize() (请参阅下面我的“答案”中的更新) 。它需要使用 jQuery 来分配 .$el 属性，并从中重新分配 Child.render() 中的 .el 属性，但感觉就像黑客一样。我再问一下，有没有更好的办法？
更新#3
我能够找到一种更简洁的方法来分配 .$el 属性； .setElement();请参阅下面我的回答中的更新#2。并且仍在寻找更好的方法。
更新#4
找到了一种创建“父”类的方法，该类封装了丑陋之处，尽管它不是 composable与其他 .constructor() 链接；请参阅下面我的回答中的更新#3。我还是想找个mixin strategy需要最少的代码来扩展 View 。 所以这就是我将这个问题留待讨论；有人有很好的答案吗？提前致谢。
更新#5
在这里刮更新#4；它会导致一系列问题。 **所以，如果任何人都可以解决这些问题，并将其作为一个可行的混合，不需要大量的代码来混合，我会很乐意给他们选定的答案。提前致谢。
最佳答案
发生这种情况是因为子元素只是在内存中渲染，而从未添加到 DOM 中。您将 #child 作为 subview 的元素，但这不在 HTML 中。所以你可以将 HTML 更改为:
<div id="parent"></div>
<div id="child"></div>
这会将“World”放入#child内的DOM中..
但是，我假设因为它们被命名为父级和子级，所以您实际上希望它们嵌套，在这种情况下，父级将负责渲染子级。如果是这样，请将您的 subview 更改为:
var Child = Backbone.View.extend({
id: 'child',
render: function () {
this.$el.html('World');
return this;
}
});
这会删除“el”选择器并添加“id”属性，因为这是动态创建的。其次，渲染方法返回 this 是因为:“一个好的约定是在渲染结束时返回 this 以启用链式调用。” - 主干文档。
然后在您的父 View 中您可以调用:
this.$el.append(this.child.render().el);
它将子元素渲染到内存中，然后将其添加到父 div 内的 DOM 中。
关于当父 View 添加 subview 的目标元素时，BackBone.js subview 不会渲染其元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17886720/