Как я могу динамически отображать HTML с помощью шаблонов Meteor Spacebars?

Если вам нужно динамически компилировать сложные шаблоны, я бы предложил ответ Келли.

В противном случае у вас есть два варианта:

1. Создайте каждый вариант шаблона, а затем динамически выберите нужный шаблон:

   например, создать свои шаблоны

   <template name="displayName">{{name}}</template>
   <template name="displayAge">{{age}}</template>
   

   А затем включить их динамически с помощью

   {{> Template.dynamic template=templateName}}
   

   Где templateName — помощник, который возвращает "age" или "name"

2. Если ваши шаблоны простые, просто выполните замену самостоятельно. Вы можете использовать Spacebars.SafeString для возврата HTML.

   function simpleTemplate(template, values){
         return template.replace(/{{\w+}}/g, function(sub) {
             var p = sub.substr(2,sub.length-4);
             if(values[p] != null) { return _.escape(values[p]); }
             else { return ""; }
         })
   }
   Template.template1.helpers({
     templateInfo: function(){
         // In this context this/self refers to the "user" data
         var templateText = getTemplateString();
         return Spacebars.SafeString(
             simpleTemplate(templateText, this)
         );
     }
   

В 1.0 ни один из описанных выше способов не работает. Я заставил это работать с функцией, определенной ниже в клиентском коде. Ключ был в том, чтобы передать параметры {isTemplate: true} в функцию компиляции.

var compileTemplate = function(name, html_text) {
  try {
    var compiled = SpacebarsCompiler.compile(html_text, { isTemplate:true });
      var renderer = eval(compiled);
      console.log('redered:',renderer);
      //Template[name] = new Template(name,renderer);
      UI.Template.__define__(name, renderer);
  } catch (err){
    console.log('Error compiling template:' + html_text);
    console.log(err.message);
  }
};

Вы можете позвонить с чем-то вроде этого на клиенте:

compileTemplate('faceplate', '<span>Hello!!!!!!{{_id}}</span>');

Это будет отображаться с динамическим пользовательским интерфейсом в вашем html.

{{> Template.dynamic template='faceplate'}}

На самом деле вы можете скомпилировать строки в шаблоны самостоятельно, используя компилятор пробелов. Вам просто нужно использовать meteor add spacebars-compiler, чтобы добавить его в свой проект.

В проектах с использованием 0.8.x

var compiled = Spacebars.compile("<div>{{name}}</div> and <div>{{age}}</div>");
var rendered = eval(compiled);

Template["dynamicTemplate"] = UI.Component.extend({
  kind: "dynamicTemplate",
  render: rendered
});

В проектах с использованием 0.9.x

var compiled = SpacebarsCompiler.compile("<div>{{name}}</div> and <div>{{age}}</div>");
var renderer = eval(compiled);

Template["dynamicTemplate"] = Template.__create__("Template.dynamicTemplate", rendered);

После ответа @ user3354036:

var compileTemplate = function(name, html_text) {
  try {
    var compiled = SpacebarsCompiler.compile(html_text, { isTemplate:true }),
        renderer = eval(compiled);

    console.log('redered:',renderer);
    //Template[name] = new Template(name,renderer);
    UI.Template.__define__(name, renderer);
  } catch (err) {
    console.log('Error compiling template:' + html_text);
    console.log(err.message);
  }
};

1) Добавьте это в свой HTML

 {{> Template.dynamic template=template}}

2) Вызвать метод compileTemplate.

compileTemplate('faceplate', '<span>Hello!!!!!!{{_id}}</span>');
Session.set('templateName','faceplate');

Сохраните имя шаблона в переменной сеанса. Важность этого объясняется в следующем пункте.

3) Напишите вспомогательную функцию для возврата имени шаблона. Для этого я использовал переменную сеанса. Это важно, если вы добавляете динамическое содержимое в событие щелчка или если родительский шаблон уже отрендерен. В противном случае вы никогда не увидите визуализацию динамического шаблона.

'template' : function() {
  return Session.get('templateName');
}

4) Напишите, что это визуализированный метод родительского шаблона. Это необходимо для сброса переменной сеанса.

Session.set('templateName','');

Это сработало для меня. Надеюсь, это поможет кому-то.

К счастью, решение всей этой проблемы и любых других подобных проблем было предоставлено Meteor API в виде Пакет Blaze, который является основным пакетом Meteor, делающим возможными реактивные шаблоны. Если вы посмотрите на связанную документацию, пакет Blaze предоставляет длинный список функций, которые позволяют использовать широкий спектр решений для программного создания, рендеринга и удаления как реактивного, так и нереактивного контента.

Для того, чтобы решить описанную выше проблему, вам необходимо сделать следующее:

Во-первых, предусмотрите различные фрагменты HTML, которые должны быть динамически отображены для приложения. В этом случае эти фрагменты будут <div>{{name}}</div> и <div>{{age}}</div>, но на самом деле они могут быть любым допустимым HTML (хотя он еще не является частью общедоступного API, в будущем у разработчиков будет больше возможностей для определения этого содержимого в более динамичном формате). способом, как указано здесь в документации). Вы бы поместили их в небольшие определения шаблонов, например:

<template name="nameDiv">
    <div>{{name}}</div>
</template>

а также

<template name="ageDiv">
    <div>{{age}}</div>
</template>

Во-вторых, необходимо изменить определение шаблона firstTemplate, чтобы оно содержало HTML-узел, на который можно ссылаться программно, например так:

<template name="firstTemplate">
    <div></div>
</template>

Затем вам потребуется определить логику для вашего шаблона firstTemplate, которая использует преимущества некоторых функций, предоставляемых пакетом Blaze, а именно Blaze.With, Blaze.render и Blaze.remove (хотя вы можете изменить следующую логику и воспользоваться преимуществами Blaze.renderWithData; все зависит от ваших личных предпочтений относительно того, как вы хотите определить свою логику - я предоставьте только одно возможное решение ниже для объяснения).

Template.firstTemplate.onRendered(function() {
    var dataContext = Template.currentData();
    var unrenderedView = Blaze.With(dataContext, function() {
        // Define some logic to determine if name/age template should be rendered
        // Return either Template.nameDiv or Template.ageDiv
    });
    var currentTemplate = Template.instance();
    var renderedView = Blaze.render(unrenderedView, currentTemplate.firstNode);

    currentTemplate.renderedView = renderedView;
});

Template.firstTemplate.onDestroyed(function() {
    var renderedView = Template.instance().renderedView;
    Blaze.remove(renderedView);
});

То, что мы делаем здесь, в функции onRendered для вашего шаблона firstTemplate, динамически определяем, какие фрагменты данных мы хотим отобразить на странице (имя или возраст в вашем случае), и используем функцию Blaze.With() для создания необработанного представления. этого шаблона, используя контекст данных шаблона firstTemplate. Затем мы выбираем узел элемента шаблона firstTemplate, в котором мы хотим, чтобы динамически сгенерированный контент содержался, и передаем оба объекта в функцию Meteor.render(), которая отображает неотображенное представление на странице с указанным узлом элемента в качестве родительского узла отображаемого содержимого. .

Если вы прочтете подробности о функции Blaze.render(), вы увидите, что это отображаемое содержимое будет оставаться реактивным до тех пор, пока отображаемое представление не будет удалено с помощью функции Blaze.remove() или указанный родительский узел не будет удален из DOM. В моем примере выше я беру ссылку на визуализированное представление, которое я получил от вызова Blaze.render(), и сохраняю его непосредственно в объекте шаблона. Я делаю это для того, чтобы при уничтожении самого шаблона я мог вручную удалить отрендеренное представление в функции обратного вызова onDestroyed() и быть уверенным, что оно действительно уничтожено.

Очень простой способ — включить в событие onRendered вызов глобального объекта Blaze.

Blaze.renderWithData(Template[template_name], data ,document.getElementById(template_id))