Использование макета, Partials with Handlebars Template

Как использовать макеты, частичные с шаблоном руля, как показано ниже?Использование макета, Partials with Handlebars Template

Я просмотрел документы partial, но до сих пор не мог понять, чего я хотел достичь.

default.html

раскладка по умолчанию используется повторно для различных представлений сайта. {{{content}}} используется в качестве заполнителя для основного изображения.

<!DOCTYPE html> 
<html> 
<head> 
    <title>{{title}}</title> 
</head> 
<body> 
<p>This is the top of the body content in the default.html file</p> 
{{{content}}} 
<p>This is the bottom of the body content in the default.html file</p> 
</body> 
</html>

index.html

{{#> default}} 

{{ include header }} 
<p>This is some other content</p> 
{{ include footer }}

header.html

<h1>This is a header</h1>

footer.html

<p>This is a footer</p>

Выход

<!DOCTYPE html> 
<html> 
<head> 
    <title>Using Layout, Partials with Handlebars Template</title> 
</head> 
<body> 
<p>This is the top of the body content in the default.html file</p> 
<h1>This is a header</h1> 
<p>This is some other content</p> 
<p>This is a footer</p> 
<p>This is the bottom of the body content in the default.html file</p> 
</body> 
</html>

источник

2016-09-23 Ishan

Проверьте документацию http://handlebarsjs.com/ partials.html –

@AndreyEtumyan. Я обновил свой вопрос. – Ishan

Во-первых, чтобы парциальное работу сначала удалить острый (#) в передней части частичного вызова в index.html.

{{> по умолчанию}}
Во-вторых, вы не сможете построить целую страницу (с заголовками) с помощью рулей: Код JavaScript загружается после загрузки страницы, так заголовки уже отправлены и не может быть изменен. Handlebars.js полезен, если вы хотите манипулировать DOM, чтобы привести результат вашего шаблона в контейнер.

У вас есть пример того, что можно сделать здесь: https://jsfiddle.net/ChristopheThiry/zepk5ebh/4/

<script id="default" type="text/x-handlebars-template"> 
<p>This is the top of the body content in the default.html file</p> 
{{{content}}} 
<p>This is the bottom of the body content in the default.html file</p> 
</script> 

<script id="index" type="text/x-handlebars-template"> 
{{include header }} 
{{> default}} 
{{include footer }} 
</script> 

<div id="resultPlaceholder"> 
</div> 

$(document).ready(function() { 
    var defaultSource = $("#default").html(); 
    var indexSource = $("#index").html(); 
    Handlebars.registerPartial('default',defaultSource); 
    Handlebars.registerHelper('include', function(source) { 
     return new Handlebars.SafeString(source); 
}); 
    var template = Handlebars.compile(indexSource); 
    var context = { "content" : "<b>This is some other content</b>","header" : "<h1>This is a header</h1>", "footer" : "<div class='footer'>This is a footer</div>"} ; 
    var html = template(context); 
    $("#resultPlaceholder").html(html); 
});

Я надеюсь, что пример поможет ...

источник

2016-09-26 09:10:26

Добавление частичного '{{> default}}', просто включает в себя содержимое файла 'default.html' на своем месте. Результат, который я получаю, выполняя то, что вы сказали, показан в этом [gist] (https://gist.github.com/ishu3101/958a289f1b3a55b4f5ed0d3540b914ac), чего я не хочу. См. Мой обновленный вопрос. – Ishan

Если он вызывает default.html, то вы вызываете частичное ... что здесь не так? Какой результат вы ожидаете? Насколько я вижу, вы получаете точный результат, который я ожидаю от вашего звонка. –

Нижняя часть содержимого тела появляется первой, так как default.html вызывается сначала, тогда появляется содержимое частичных файлов. т.е. заголовок и нижний колонтитул появляются после того, как нижняя часть содержимого тела является неправильной. – Ishan

Использование макета, Partials with Handlebars Template

ответ

Смежные вопросы