Uncaught TypeError: Не удается прочитать свойство «SUBSTR» неопределенной Dustjs

Question

Я пытаюсь научиться яваскрипта шаблонов, а именно 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: Cannot read property 'substr' of undefined

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

Answer 1

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

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

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

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

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