如何使用Meteor Spacebars模板动态呈现HTML？

Question

所以,假设我正在存储<div>{{name}}</div>并存储<div>{{age}}</div>在我的数据库中.然后我想获取第一个HTML字符串并在模板中呈现它 - {{> template1}}它只是呈现带有{{name}}把手的第一个字符串.然后我想给出新生成的模板/ html数据,这样它就可以用name数据库中的实际来填充把手,这样我们就可以得到<div>John</div>.我试过了

<template name="firstTemplate">
    {{#with dataGetter}}
        {{> template1}}
    {{/with}}
</template>

其中template1定义为

<template name="template1">
    {{{templateInfo}}}
</template>

而templateInfo是一个帮助器,它从数据库中返回带有把手的上述html字符串.

dataGetter就是这个(只是一个例子,我正在使用不同命名的集合)

Template.firstTemplate.dataGetter = function() {
    return Users.findOne({_id: Session.get("userID")});
}

我无法填充{{name}}.我尝试了几种不同的方法,但似乎Meteor不明白字符串中的把手需要用数据进行评估.我在0.7.0所以没有Blaze,由于我正在使用的其他软件包,我目前无法升级,他们还没有支持0.8+版本.关于如何让它工作的任何想法都非常感谢.

Answer 1

在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中使用UI动态呈现

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

Answer 2

您可以使用空格键编译器自己将字符串编译为模板.您只需使用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);

Answer 3

如果您需要动态编译 复杂的模板，我建议凯利的答案。

否则，您有两个选择：

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