Избегайте двойных скобок {{ ... }} в шаблоне Усы. (создание шаблона в NodeJS)

Question

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

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

{{{debug this}}}

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

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

Answer 1

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

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

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

Answer 2

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

HTML:

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

Answer 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);
    });

Answer 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}

Answer 5

Шаблон содержит HTML, поэтому вы можете использовать HTML-Entities, например ASCII-коды 123 и 125 для фигурных скобок: {{{myValue}}}

Answer 6

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

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

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

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

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

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. Одним из улучшений, которое вы можете сделать, является извлечение этого метода в отдельный модуль для повторного использования на всех маршрутах.

Answer 7

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

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
};