Uncaught TypeError: Невозможно прочитать свойство 'substr' из неопределенных Dustjs

Question

Я пытаюсь выучить 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)
})
}

Во время инициализации шаблон отрисовывается отлично, но нажатие на кнопку вызывает ошибку

Uncaught TypeError: Невозможно прочитать свойство 'substr' из неопределенного

Что я делаю неправильно?

Answer 1

Вы визуализируете шаблон один раз при загрузке (строка 1 вашего скрипта).

При рендеринге шаблона вы заменяете содержимое <ul class="vodka"> с предоставленным шаблоном.

Тем не менее, вы по какой-то причине поместили свой источник шаблона в этот контейнер. Исходный шаблон удаляется из DOM при первом рендеринге, поскольку он заменяется отображаемым содержимым. Поэтому, когда вы пытаетесь визуализировать шаблон во второй раз, эта строка устанавливает source в null:

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

И Dust ошибки, потому что он пытается скомпилировать null к шаблону.