到目前为止,看起来Ember并没有像我预期的那样发挥作用,我希望我只是错过了一些东西。我需要做的是迭代我的模型,由数组和对象组成的一小撮JSON,并构建一个表单。当用户标记复选框时,控制器Action会更新模型。
以下是我希望它如何运作......
<form {{action 'answerSupplied'}}>
{{#each model.questions}}
<h3>{{text}}</h3>
{{#each answers}}
{{input type='../type' answerId='id' data-bind-questionNum='../id' text}}
{{/each}}
{{/each}}
</form>
以下是我如何接近......
<form {{action 'answerSupplied' this}}>
{{#each model.questions}}
<h3>{{text}}</h3>
{{#each answers}}
{{formbuilder ../type id ../id text}}
{{/each}}
{{/each}}
</form>
==================
Handlebars.registerHelper('formbuilder', function(type, id, qnum, text, options)
{
// console.log(options);
var q_type = options.contexts[0][type],
a_id = options.contexts[1].id,
q_number = options.contexts[0][qnum],
a_text = options.contexts[1].text;
return new Handlebars.SafeString(
'<input type='+ q_type +' id='+ a_id +' name='+
q_number +'>'+ a_text + '</input><br/>'
);
}
});
这是一个很大的问题,我无法识别哪个元素被点击,因为我无法访问事件对象。
我可以手动绑定动作,例如'data-ember-action',并传入参数吗?或者,这远远超出了Ember的方式吗?
== update ==
以上是JSFiddle,通过将参数传递给Action进行了改进。事件传播似乎在Action中停止,导致输入未正确标记。单选按钮会松散其分组,并且不会检查复选框。
答案 0 :(得分:2)
Ember可以轻松处理你在这里所做的事情。首先,保持范围并生成命名的每个循环更容易。
<form {{action 'answerSupplied'}}>
{{#each question in model.questions}}
<h3>{{question.text}}</h3>
{{#each answer in question.answers}}
{{input type=question.type answerId=answer.id data-bind-questionNum=question.id placeHolder=answer.text}}
{{/each}}
{{/each}}
</form>
您可能必须在输入语句周围为标签等做一些if语句。