Выбери двойные фигурные скобки {{...}} в шаблоне Mustache. (шаблон шаблона в NodeJS)

Я пытаюсь создать шаблон шаблона, как показано ниже:

{{{
{
  "name" : "{{name}}",
  "description" : "{{description}}"
}
}}}

{{{debug this}}}


<h1>{{name}}</h1>

Где я хочу, чтобы тройные скобки оставались, но двойные скобки, которые нужно заменить на JSON, прошли. Кто-нибудь знает лучший способ сделать это без написания JS-кода после процесса, а если нет, есть ли хороший шаблон nodeJS двигатель для этого типа сценария?

Ответы

Ответ 1

Вы можете переключать разделители на то, что не будет конфликтовать с тройными усами, например тегами стиля erb:

{{=<% %>=}}
{{{
{
  "name": "<% name %>",
  "description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>

Обратите внимание, что вы можете делать это столько раз, сколько хотите в шаблоне. Каждый раз, когда вы сталкиваетесь с конфликтом, выбирайте новый набор разделителей:)

Ответ 2

Как описано в этом вопросе, handlebars не поддерживает изменение разделителей. Но вы можете сбрасывать двойные фигурные скобки с помощью обратного слэша следующим образом:

HTML:

... \{{ myHandlbarsVar }} ...

Ответ 3

Вы также можете назначить Mustache.tags = ["[[", "]]"]; перед компиляцией шаблона.

http://jsfiddle.net/fhwe4o8k/1/

например.

    $(function () {
        Mustache.tags = ["[[", "]]"];
        var template = $('#test').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, {test: "Chris"});
        $('#content-placeholder').html(rendered);
    });

Ответ 4

другой вариант создает помощник для вывода фигурных скобок.

Handlebars.registerHelper('curly', function(object, open) {
    return open ? '{' : '}';
});

а затем используйте его в шаблоне следующим образом:

<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>

который затем выводит:

{Stack Over Flow Rocks}

Ответ 5

Я просто хотел немного другого подхода. Я пробовал несколько других способов, и вот несколько вещей, которые мне не нравились в них:

  • Изменение Angular стандартных {{obj.property}} скобок на что-то другое - плохая идея. В основном beacause, как только вы начнете использовать сторонние компоненты, которые не знают о вашей нестандартной конфигурации Angular, привязки в этих компонентах третьей части перестанут работать. Также стоит упомянуть, что команда AngularJS, похоже, не хочет идти по пути предоставления нескольких привязок, отметьте эту проблему
  • Мне очень нравятся шаблоны Mustache и не хочу переключать весь проект на что-то еще из-за этой небольшой проблемы.
  • Довольно много людей рекомендуют не смешивать рендеринг на стороне клиента и сервера. Я не совсем согласен, я полагаю, что если вы создаете многостраничный веб-сайт с несколькими страницами с Angular и некоторыми другими, которые являются статическими (что-то вроде нас или страниц Условий и Условий), совершенно нормально использовать шаблоны на стороне сервера чтобы упростить обслуживание этих страниц. Но это говорит о том, что для частей, которые являются Angular, вы не должны смешивать визуализацию на стороне сервера.

Хорошо, нет моего ответа: Если вы используете NodeJS и Express, вы должны быть следующими:

Замените привязки {{}} в вашей части Angular чем-то вроде {[{}]} (или что-то совершенно уникальное)

Теперь в вашем маршруте добавьте обратный вызов к методу рендеринга:

app.get('/', function(req, res){
  res.render('home', {
    title: 'Awesome Website',
    description: 'Uber Awesome Website'
  }, function(err, html){
    var htmlWithReplacedLeftBracket = html.replace(/{\[{/g, '{{');
    var finalHtml = htmlWithReplacedLeftBracket.replace(/}\]}/g, '}}');
    res.send(finalHtml);
  });
});

Это должно позволить вам использовать Усы вместе с AngularJS. Одно из улучшений, которое вы могли бы сделать, - это извлечь этот метод в отдельный модуль для повторного использования во всех маршрутах.

Ответ 6

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

http://olado.github.com/doT/

Вы можете выполнить настройки RegEx следующим образом:

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,
  selfcontained: false
};