Handlebars.js - 建立模板模板 [英] Handlebars.js - Building a Template Template

问题描述

TL; DR

在以下Handlebars模板中...

 < div class =field field-label> 
< label> {{label}}< / label>< input type =textvalue ={{{attribute}}}}> 
< / div> 
  

我需要评估{{属性}}，但 value ={ {/ / c $ c> value属性 }}将被打印。

我对模板有一个有趣的用处。我的应用程序有几十个表单（并且不断增长！），以及几种显示它们的方法。显然，它们可以显示在浏览器，移动设备或PDF等等中。所以我想要做的就是用JSON定义这些表单，以便像MongoDB那样生活。这样，即使没有HTML视图，移动应用程序和PDF渲染功能都被更新，也可以轻松修改它们。

  {
标题：'此表格的名称'，
版本：2，
部分：[
 {
标题：'部分标题'，
字段：[ 
 {
 label：'Person'，
 name：'firstname'，
 attribute：'FIRST'，
 type：'text'
}， {
标签：'生日'，
名称：'dob'，
属性：'生日'，
类型：'select'，
选项：[
 {label：'August'}，
 {label：'September'}，
 {label：'October'} 
] 
}，
 .. 。
 ... 
  

这是一种品味。所以键入：'text'结果为< input type =text> ， name 是输入的名称， attribute 是来自模型yada yada的属性。它与嵌套的可选表单相当复杂，但您明白了。

问题是，现在我有两个上下文。第一个是带有表单数据的JSON，第二个是来自模型的JSON。我有两个选项，我认为它们可以很好地工作。

解决方案1 ​​

包含注册为帮助器的模型上下文的快速小关闭。

  var fn =（function（model）{
 return function（attr）{
 return model [ attr] 
} 
}）（model）; 
 
 Handlebars.registerHelper（'model'，fn）
  

... ...

 < input type =textname ={{name}}value ={{model attribute}}> 
  

解决方案2

两次传球。让我的模板输出一个模板，然后我可以使用我的模型进行编译和运行。一个很大的优点，我可以预编译表单。我更喜欢这种方法。这是我的问题。 如何从我的模板中打印{{属性}}？

例如，在我的文本模板中...

 < div class =field field-label> 
< label> {{label}}< / label>< input type =textvalue ={{{attribute}}}}> 
< / div> 
  

我需要 {{属性}} 来被评估并{{<属性的值}}被打印出来。 我解决了解决方案2，挺好。对我来说，我可以预先编译表单sans数据对我很重要。所以我做的只是添加一些帮助函数...
$ b $ $ $ $ $ $ $ $ $ $ $ $ Handlebars.registerHelper（'FormAttribute'，function（attribute） {
return new Handlebars.SafeString（'{{'+ attribute +'}}'）;
}）;

Handlebars.registerHelper（'FormChecked'，function（attribute）{
return new Handlebars.SafeString（'{{＃if'+ attribute +'}} checked =checked{{ / if}}'';
}）;


...我可以在我的表单模板中使用...

 < input type =textname ={{name}}value ={{FormAttribute attribute}}> 
  

...导致...

 < input type =textname =FirstNamevalue ={{FirstName}}> 
  

我仍然有兴趣了解是否有某种方法让Handlebars忽略并且不解析大括号{ {}}而不使用助手。

TL;DR

In the following Handlebars template...

<div class="field field-label">
  <label>{{label}}</label><input type="text" value="{{{{attribute}}}}">
</div>

I need {{attribute}} to be evaluated but value="{{value of attribute}}" to be printed.

Background

I've got an interesting use for templating. My application has dozens of forms (and growing!), and several ways to display them. Obviously they can be displayed in the browser, or a mobile device, or a PDF, etc... So what I'd like to do is define these forms in JSON to live somewhere like MongoDB. That way, they can be easily modified without the HTML views, mobile apps, and PDF render function all being updated.

{
  title: 'Name of this Form',
  version: 2,
  sections: [
    { 
      title: 'Section Title',
      fields: [
        {
          label: 'Person',
          name: 'firstname',
          attribute: 'FIRST',
          type: 'text'
        }, {
          label: 'Birthday',
          name: 'dob',
          attribute: 'birthday',
          type: 'select',
          options: [
            { label: 'August' },
            { label: 'September' },
            { label: 'October' }
          ]
        },
        ...
        ...

That's a taste. So type: 'text' results in <input type="text">, name is the name of the input, attribute is the attribute from the model, yada yada. It gets fairly complex with nested optional forms, but you get the point.

The problem is, now I've got two contexts. The first being the JSON with the form data, and the second being the JSON from the model. I've got two options I think would work well.

Solution 1

Quick little closure containing the model context registered as a helper.

var fn = (function(model) {
  return function(attr) {
    return model[attr]
  }
})(model);

Handlebars.registerHelper('model', fn)

...to be used like so...

<input type="text" name="{{name}}" value="{{model attribute}}">

Solution 2

Two passes. Have my template output a template that I can then compile and run with my model. One big advantage, I can precompile the forms. I would prefer this approach. Here's my question. How do I print out {{attribute}} from my templates?

For example, in my text template...

<div class="field field-label">
  <label>{{label}}</label><input type="text" value="{{{{attribute}}}}">
</div>

I need {{attribute}} to be evaluated and {{value of attribute}} to be printed.

解决方案

I went with solution 2, kinda. It was important to me that I could precompile the forms sans data. So what I did was just add a few helper functions...

Handlebars.registerHelper('FormAttribute', function(attribute) { 
  return new Handlebars.SafeString('{{'+attribute+'}}');    
});

Handlebars.registerHelper('FormChecked', function(attribute) {
  return new Handlebars.SafeString('{{#if ' + attribute + '}}checked="checked"{{/if}}');
});

...that I could use in my form templates...

<input type="text" name="{{name}}" value="{{FormAttribute attribute}}">

...that results in...

<input type="text" name="FirstName" value="{{FirstName}}">

I would still be interested to learn if there's some way to have Handlebars ignore and not parse curly brackets {{}} without using helpers.

这篇关于Handlebars.js - 建立模板模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！