首先，这是我的问题的一些基本背景信息。
因此，在我正在研究的项目中，我们使用Can.js作为渲染库，并使用mustache.js来促进元素的实时绑定。因此，例如，如果我从服务器username获取一些数据，则可以在以下字符串中使用小胡子
<h1>Hi {{username}}</h1>
实际上被渲染为以下html
<h1>Hi Rich</h1>
这对于呈现动态表单元素很有帮助，例如，我们有一个服务器，其中说someUser1的表单应该包含元素a，b和{{1} }，但另一个人c可能只会看到someUser2和a。
这可能类似于以下内容：
c如果<table class = 'dynamic-row-container">
{{#data.elementA.isActive}}
<tr class='elementA'>
<td>{{data.elementA.formHeader}}</td>
<!-- Some specific form element here... -->
</tr>
{{/data.elementA.isActive}}
{{#data.elementB.isActive}}
<tr class='elementB'>
<td>{{data.elementB.formHeader}}</td>
<!-- Some specific form element here... -->
</tr>
{{/data.elementB.isActive}}
{{#data.elementC.isActive}}
<tr class='elementC'>
<td>{{data.elementC.formHeader}}</td>
<!-- Some specific form element here... -->
</tr>
{{/data.elementC.isActive}}
</table>
访问了该表单，则上面的html将呈现为...
someUser2所以现在，这就是我的问题所在。有时，当can可以渲染以上模板时，我的元素出现的顺序混乱，或者有时完全在父容器之外。我有一种情况，其中<table class = 'dynamic-row-container">
<tr class='elementA'>
<td>Element A form header</td>
<!-- Some specific form element here... -->
</tr>
<tr class='elementC'>
<td>Element C form header</td>
<!-- Some specific form element here... -->
</tr>
</table>
标签完全以某种方式呈现在父<tr>...</tr>容器之外！如下所示：
<table>...</table>很显然，这是无效的html，并且我的表最终看起来完全错误。以前有没有人遇到过这个问题，特别是在使用can.js的胡须时？这个特定问题很难复制，因为它似乎几乎是随机发生的。
但是，您可以在this fiddle中看到问题的基础。我一直在显示A节，然后C应该出现在它下面。但是，C会渲染js数据，然后将元素的html放在父div容器之外。