doT.js返回[object HTMLScriptElement]

时间:2016-03-22 15:00:18

标签: javascript arrays loops dot.js

doT.js初学者,所以要温柔。我试图从框架开始简单。阅读完首页后,我能够在那里找到所有的例子。但是,将doT.js移植到我自己的解决方案似乎比我最初设想的更具挑战性。

我正在尝试使用doT.js创建一个简单的表来呈现其内容。

JsFiddle here

使用doT.js自己的编辑器,我能够得到这个非常简单的代码块:

{{~it :v:i}}
<tr>
   <td>{{= i+1 }}</td>
   <td>{{= v }}</td>
</tr>
{{~}}

我的其余部分是:

var conts = ['apples','pears','peaches','cherries'];
var popConts = doT.template(contactsTmpl)(conts);
$("#contactsList").html(popConts);

第一行声明数据,第二行将其绑定到我的模板,第三行将其插入DOM。但是,这样做会导致[object HTMLScriptElement]出现在我希望查看表格内容的位置。

有人能以简单的方式向我解释我在这里缺少什么吗?

1 个答案:

答案 0 :(得分:0)

缺少一步。更新了jsFiddle:https://jsfiddle.net/oe1d3a0w/1/

var conts = ['apples','pears','peaches','cherries'];
var contactsTmpl = $("#contactsTmpl").html();
var popConts = doT.template(contactsTmpl)(conts);
$("#contactsList").html(popConts);
  1. 声明数据
  2. 获取模板的内容
  3. 将模板的内容绑定到数据
  4. 将结果插入DOM
  5. doT.tempalte()不会通过id自动绑定到某些内容,而是直接插入其表达式。