Handlebars.js: используйте частичный, как обычный нормальный шаблон

18

У меня есть шаблон, который я хочу использовать как частично, так и сам по себе из javascript.     

задан Jonathan Dumaine 19.08.2013 в 06:26
источник

4 ответа

22

Если ваши шаблоны предварительно скомпилированы, вы можете получить доступ к своим частицам через Handlebars.partials['partial-name']() , а также вызвать их из шаблона с помощью помощника {{> partial}} .

Это хорошо, потому что после этого вы можете написать функцию утилиты для рендеринга шаблона, будь то полномасштабный шаблон или частичный.

Пример:

function elementFromTemplate(template, context) {
    context = context || {};
    var temp = document.createElement('div');
    temp.innerHTML = templates[template] ? templates[template](context) : Handlebars.partials[template](context);
    return temp.firstChild;
}

myDiv.appendChild(elementFromTemplate('myPartial', context));

myDiv.appendChild(elementFromTemplate('a-whole-template'));

Надеюсь, это поможет любому, кто хочет использовать Handlebars, как я.

    
ответ дан Jonathan Dumaine 20.08.2013 в 08:03
источник
  • Handlebars.partials ['partial-name'] не возвращает функцию, но возвращает шаблон (строку). Спасибо, что указали на это. –  mynameistechno 16.01.2014 в 18:51
  • @mynameistechno Возможно, потому что вы не прекомпилируете свои шаблоны (как и вы!) –  Jonathan Dumaine 19.08.2015 в 15:54
14

Легче сделать это наоборот - скомпилировать все ваши шаблоны как обычные шаблоны, а затем сделать их доступными как частичные:

Handlebars.partials = Handlebars.templates

Это позволяет использовать ваши шаблоны, как обычно, и как частичные:

{{> normalTemplate}}
    
ответ дан Frederik Wordenskjold 16.01.2014 в 22:37
источник
  • Интересная идея. Есть ли недостаток или причина, по которой вам когда-либо понадобились частичные, которые не являются нормальными шаблонами? (Если нет, кажется, Handlebars может просто использовать синтаксис {{> xxx}} для обозначения другого шаблона и вообще не иметь понятия частичных понятий?) –  Darren Cook 28.01.2014 в 07:30
  • Точно моя мысль. Я не понимаю понятия частичных понятий и еще не нашел достаточной причины для их использования. Думаю, это конвенция? Или какая-то оптимизация ... Что не имеет значения, если вы (и вы должны) прекомпилировать шаблоны. Я мог бы что-то упустить, но, по крайней мере, с предварительной компиляцией, этот метод кажется безопасным. –  Frederik Wordenskjold 28.01.2014 в 10:44
  • Действительно интересный «взлом», весьма полезный с заранее скомпилированными шаблонами! –  Vadorequest 29.04.2015 в 15:34
4

Чтобы отобразить частичный из javascript, вы можете использовать

Handlebars.partials["myPartial"]()
    
ответ дан Adil 24.02.2014 в 16:52
источник
1

Чтобы использовать частичный шаблон, просто включите {{> partialName}} .

<script id="base-template" type="text/x-handlebars-template">
  <div>
    {{> person}}  <!-- This is the partial template name -->
  </div>
</script>

<script id="partial-template" type="text/x-handlebars-template">
  <div class="person">
    <h2>{{first_name}} {{last_name}}</h2>
    <div class="phone">{{phone}}</div>
  </div>
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var template = Handlebars.compile($("#base-template").html());

    //Aliasing the template to "person"
    Handlebars.registerPartial("person", $("#partial-template").html()); 

    template(yourData);
  }
</script>
    
ответ дан Raoul George 19.08.2013 в 06:47
источник
  • И как бы я отрисовал это частичное из javascript (а не в шаблоне)? –  Jonathan Dumaine 19.08.2013 в 07:21
  • Вы имеете в виду это -: el.html (this.template (yourData)); –  Raoul George 19.08.2013 в 07:31
  • Просто fyi, почему это не принятый ответ: это вся информация, которая легко найти в документации Handlebar и является основным использованием частичного. Я был полностью осведомлен о том, как использовать частичное внутри шаблона, прежде чем задавать вопрос, но потребовалось некоторое перекопание в исходный код Handlebar, чтобы узнать, как частично вынести частичное из javascript. –  Jonathan Dumaine 29.01.2014 в 01:45
  • Я проигнорировал ответ, поскольку он не затрагивает вопрос –  iancrowther 21.02.2014 в 15:56