未捕获的类型错误：无法读取未定义 Dustjs 的属性“substr”答案

【问题标题】：Uncaught TypeError: Cannot read property 'substr' of undefined Dustjs未捕获的类型错误：无法读取未定义 Dustjs 的属性“substr”
【发布时间】：2015-02-23 15:37:34
【问题描述】：

我正在尝试学习 javascript 模板，即dustjs，但我遇到了我认为非常基础的问题，甚至 google 都无法回答：)

这是最简单形式的代码

      <button class="getData" onClick="clicker()">Get Data</button>

      <ul class="vodka">
      <script id="vodka" type="text/x-template">

       <li>{name}</li>

       </script>
       </ul>

Javascript

   window.addEventListener("load", clicker)

function clicker()
{
    getData();
}

function getData()
{
var data = {name:"Vodka", degree:97}
var source = $("#vodka").html();
var template = dust.compile(source, "vodkaTemplate");
dust.loadSource(template);
dust.render("vodkaTemplate", data, function(err, res){
            $(".vodka").html(res)
            console.log(res)
})
}

在初始化过程中模板完美呈现，但点击按钮会导致错误

未捕获的类型错误：无法读取未定义的属性“substr”

我做错了什么？

【问题讨论】：

请附上在 codepen、plunkr、jsbin 或类似网站上运行的示例。
在这里但是 jsbin 不断抛出奇怪的错误link

标签： javascript dust.js client-side-templating templating-engine

【解决方案1】：

您在加载时渲染一次模板（脚本的第 1 行）。

渲染模板时，将<ul class="vodka"> 的内容替换为渲染的模板。

但是，无论出于何种原因，您也将模板源放在了这个容器中。模板源在第一次渲染时从 DOM 中删除，因为它被渲染的内容替换。因此，当您尝试第二次渲染模板时，此行会将 source 设置为 null：

var source = $("#vodka").html(); // #vodka does not exist anymore

Dust 出错是因为它试图将 null 编译为模板。

【讨论】：