Question

问题源于无法在模板中进行比较：

{{#if model.input.type == 'select'}}

到目前为止，我所知道的选项是使用自定义Handlebars助手。这将允许我循环遍历模型并构建HTML，但这并不允许我绑定属性，加上它似乎太多了。

1. Can't bind attributes, and I don't want to build out HTML with a JS string.   

Handlebars.registerHelper('formBuilder', function()
{
    var html_string = '';

    for(var q=0; q<this.content.questions.length; q++)
    {
        if(this.content.questions[q].type.match(/select/i))
             { /* build out html with model propeties */ }

        if(this.content.questions[q].type.match(/checkbox|radio/i))
             { /* build out html with model propeties */ }

    }
    return new HandleBars.SafeString(html_string);
}

更好的选择是，如果我可以在我的助手中跟踪索引，并返回一个Handlebars表达式，所有这些都不会破坏模板的循环：

        2. Can't pass in loop index or return expressions.

        {{#each question in model.questions}}
            {{#formBuilder parent.index this}}
                /* uses @index to iterate through its children and return a Handlebars 
                   expressions for either select or checkbox html */
            {{/formBuilder}}
        {{/each}}

...而formBuilder助手看起来像这样：

Handlebars.registerHelper('formBuilder', function(q_index, model)
{
    if(model[q_index].type == 'select')
    {
        return Handlebars.compile({{select action 'myAction' type='model[q_index].type'}});
    }

    if(model[q_index].type.match(/checkbox|radio/i))
    {
        return Handlebars.compile({{input action 'myAction' type='model[q_index].type'}});
    }

});

将控件返回到外循环。

Ember如何解决这个问题？

Answer 1

看看你想要更紧密地实现的目标，我建议你使用视图而不是把手助手来创建复选框或选择字段。你会这样做的方式是

{{#each question in questions}}
  {{view QuestionView contentBinding=this}}
{{/each}}

并在你的问题中查看，

 App.QuestionView = Em.View.extend({

   defaultTemplate: (function() {
      if(this.get('type') === 'select') {
        return Em.Handlebars.compile(//select box string goes here);
      }
      else {
        return Em.Handlebars.compile(//checkbox html);
      }
   })()
 });

如何将索引从模板循环传递给我的帮助器，并让它返回Handlebars表达式

1 个答案: