Backbone.js 和 underscore.js 正在创建混乱的 html答案

【问题标题】：Backbone.js and underscore.js are creating messy htmlBackbone.js 和 underscore.js 正在创建混乱的 html
【发布时间】：2012-05-01 13:38:23
【问题描述】：

我正在使用通过结合主干.js 和 underscore.js 来创建 html 位的常规方式。这是我使用的一个例子

_.template($('#html-container').html(), this.model.toJSON());

我将它附加到我需要的地方。本例中的模型是一个普通的主干模型。

现在输出的 HTML 如下所示：

<li _id="4f82f7c3c5de997ad3fd4989" code="61131" unit="100ml" op="11" rp="22" cp="0" id="4f82f7c3c5de997ad3fd4989">

基本上，它为我的模型中的每个变量创建了一个 html 属性。这是正常的还是我在这里做错了什么。

【问题讨论】：

你的#html-container是什么样的？
只是<%= code %>。而且视图的tagName是li，所以我想要的只是<li>61131</li>而不是<li _id="4f82f7c3c5de997ad3fd4989" code="61131" unit="100ml" op="11" rp="22" cp="0" id="4f82f7c3c5de997ad3fd4989">61131</li>

【解决方案1】：

~~你应该有这样一行的地方。~~

var sometemplate = _.template($('#html-container').html());

这会将你的模板编译成一个函数，你可以像这样传递模型数据并生成 html：

var html =  sometemplate(this.model.toJSON());

你正试图在一行中完成所有操作。可以这样做（虽然不是这样），但最好编译一次模板，在某处保存对该模板的引用，然后稍后参考。

编辑：现在我确实看到了，我明白了

如果您正在编写一次性的，您可以将数据对象作为模板的第二个参数，以便立即渲染而不是返回一个模板函数。

所以没关系。所以，也许你在生成 JSONable 对象时包含不止一个延迟数据（我的意思是，你的对象中有一个对象或其他东西），或者......

【讨论】：

这并不能解决我遇到的问题，只是轻微的优化。无论哪种方式，我都会得到相同的结果。在我的项目中，我使用两种方式。我在一行中完成了它以使问题更短。
是的，我的错，让我们看看this.model.toJSON()返回的那个对象是什么样子的。
这也不是问题。即使我从模型中提取键/值对并仅将它们用作数据对象{code:..., op:...}，我仍然可以获得相同的 HTML。
我能说什么，你没有给我太多继续。其他人问你#html-container 是什么样的，而你没有提供。有什么东西被顶起来了。也许是模板设置……也许是模板本身。也许您正在使用错误版本的下划线或其他内容。通过模板生成 html 通常并不难！
除了给你这个jsFiddle之外，我还编造了jsfiddle.net/jfcox/y9eKy 类似你的情况，但据我所知并没有生成任何混乱的html，我不知道该告诉你什么。好像我以前生成的 html 有点像，但那是模板错误的结果。您可能还想添加一个模式来处理转义属性而不是按原样包含它们，但我不知道模型值的 html 注入是这里发生的事情，所以这可能是您在此之后修复的问题。