Question

到目前为止，看起来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中停止，导致输入未正确标记。单选按钮会松散其分组，并且不会检查复选框。

Answer 1

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语句。

http://emberjs.jsbin.com/zofoqeje/1/edit

ember.js属性绑定和事件对象

1 个答案: