У меня есть шаблон руля во внешнем файле (user -isting-template.html), который я динамически загружаю с помощью вызова JQuery Ajax для извлечения файла, компилируя через Handlebars.compile и затем отображаю в div. См. Пример кода ниже:

Файл шаблона:

<script id="user-listing-template" type="text/x-handlebars-template">
  <h2 class="ui header">User Maintenance</h2>
  <hr>
  <h4 class="text-align-left">Total Users: </h4>
  <br><br>
</script>

Функция JS для загрузки шаблона:

function userListroute() {
var source;
    var template;

    $.ajax({
        url: "/templates/user-listing-template.html",
        cache: true,
        success: function(data) {
            console.log('Template Data From File: ' + data);
            source = data;
            console.log('Template HTML ' + source);
            template = Handlebars.compile(source);
            console.log('Compiled Template: ' + template);

            $('#app').html(template);

        }               
    });  
}

В index.html у меня есть div, в котором я надеюсь увидеть шаблон:

<div id="app"></div>

Однако когда я запускаю это приложение, шаблон не отображается. Я вижу HTML-код шаблона в Инспекторе инструментов разработчика Firefox:

Вывод инспектора Firefox

Все операторы console.log () показывают наличие действительного HTML-кода, однако он не отображается, я вижу только пустую страницу. Вывод консоли показан здесь:

Вывод консоли Firefox

Я явно делаю что-то не так, просто не знаю, что - похоже, все работает, за исключением бит рендеринга.

Любая помощь очень ценится. Я новичок в Handlebars и просто пробую испытать концептуальное приложение.

2
Owen West 20 Сен 2018 в 03:50

2 ответа

Лучший ответ

Когда вы извлекаете файл шаблона, вы оставляете его инкапсулированным с тегами <script>. Handlebars нужно только содержимое. Таким образом (как вы можете видеть в инспекторе Firefox) скомпилированный вывод не является отображаемым HTML, поскольку он все еще находится в исходных тегах script.

Вам необходимо извлечь HTML-код из ваших данных, когда вы назначите его переменной source.

success: function( data ) {
    source = $( data ).html();
    ...
0
jla 20 Сен 2018 в 01:20

По информации официального сайта http://handlebarsjs.com/. Вы просто компилируете свой шаблон без создания html.

template = Handlebars.compile(source);
var html = template(yourdata);     // yourdata is the object rendered to your template
$('#app').html(html);   // can not be template variable, variable html is final html content
0
Bendy Zhang 20 Сен 2018 в 00:58