问题源于无法在模板中进行比较:
{{#if model.input.type == 'select'}}
到目前为止,我所知道的这个选项是使用自定义Handlebar助手。这将允许我遍历模型并构建超文本标记语言,但这不允许我绑定属性,而且似乎工作量太大。
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);
}
更好的选择是,如果我可以在我的助手中跟踪索引,并返回一个Handlebar表达式,而不会破坏模板的循环:
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'}});
}
});
WICH将把控制权返回到外环。
这个问题在Ember中是如何解决的?
看看你想更近距离地实现什么,我建议你使用视图而不是车把助手来创建复选框或选择字段。你会这样做的方式是
{{#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);
}
})()
});