Не могу отобразить шаблон mustache.js?

Question

[Alexey]

Не получается отобразить шаблон.

$(document).ready(function(){
        var data = {
            "name": "Thomas",
            "surname": "Jefferson",
            "dob": "02.07.1956"
        };

        var loadList = function(){
            $.get('templates/info.mst', function(template) {
                return Mustache.render(template, data);
            });
        };

        var div = document.createElement('div');
        div.innerHTML = loadList();
        document.body.appendChild(div);
    });

При выполнении

div.innerHTML = loadList();

- возвращается undefined.
Хотя в самой функции при выолнении

console.log(Mustache.render(template, data));

возвращается строка.
Как это исправить?
И непонятно, почему после

document.body.appendChild(div);

снова вызывается функция и срабатывает return Mustache.render(template, data);?

Answer 1

[fr33zy]

1. Шаблоны mustache/handlebars лучше отрисовывать на сервере. Отрисовал - получил JS, загрузил JS при необходимости, выполнил функцию (да, шаблоны преобразуются в функцию js)
   
2. loadList в данном случае ничего не возвращает. Даже если добавить ключевое слово return - вы не получите шаблон. JavaScript так не работает. У вас асинхронный вызов.
   

Как исправить? Выполняйте все необходимые действия после загрузки шаблона:

$.get('templates/info.mst', function(template) {
  var content = Mustache.render(template, data);
  // Вот тут
});

Comments

[Alexey]

Все получилось как вы написали, спасибо!

Единственно я не понял по поводу "Шаблоны mustache/handlebars лучше отрисовывать на сервере." Это как? Я код запускаю с Apache, или я не так понял?

[fr33zy]

azovl: шаблоны можно скомпилировать в функцию с помощью NodeJS на этапе сборки.

После этого на клиенте:
1. Не надо анализировать/парсить шаблон. Все очень быстро отрисуется
2. Вместо всей библиотеки грузим только маленькую ее часть.

В mustache уже не помню, есть ли такое :) Кажется, есть. Последнее время пользовался handlebars (совместимый шаблонизатор, и лучше наверное пользоваться им), а вот по поводу прекомпиляции в нем: handlebarsjs.com/precompilation.html

[Alexey]

Отличный ответ. Спасибо!