ember.js attribute binding and the event object

Question

So far, it looks like Ember does not work as I expected, and I'm hoping I've just missed something. What I need to do is iterate over my model, a blob of JSON made up of arrays and objects, and build out a form. When the user marks a checkbox, the controllers Action updates the model.

Here's how I want it to work...

  <form {{action 'answerSupplied'}}>
    {{#each model.questions}}
      <h3>{{text}}</h3>

        {{#each answers}}
            {{input type='../type' answerId='id' data-bind-questionNum='../id' text}}
        {{/each}}

    {{/each}}
  </form>

Here's how I can get close to that...

  <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/>'
        );
    }
});

The big problem wit this is, I can not identify which element was clicked because I don't have access to the event object.

Can I manually bind the action with something like 'data-ember-action', and pass in params? Or, is this too far outside the Ember way?

== update ==

Here's the above JSFiddle, improved by passing parameters to the Action. The event propagation seems to get halted in the Action resulting in the inputs not getting properly marked. Radio buttons loose their grouping, and checkboxes do not get checked.

Kingpin2k Kingpin2k · Accepted Answer · 2014-04-07T14:27:43

Ember can easily handle what you're doing here. First it's easier to keep your scope and generate named each loops.

 <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>

You may have to do some if statements for labels etc around your input statements.

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

ember.js attribute binding and the event object

1 Answers