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

Question

我正在尝试学习javascript模板，即dustjs，但我遇到了我认为很基本​​的问题，即使谷歌也无法回答:)

这是最简单形式的代码

      <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”

我究竟做错了什么？

Answer 1

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

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

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

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

并且 Dust 错误，因为它正在尝试编译null为模板。