EmberJS Handling DOM Events Using Views

I want to toggle a single form (see picture below) using views. My code basically works when i add new formset it adds an empty bracket to json and then i print the json out using

Solution 1:

If I understand correctly you need to handle events for specific parts/forms of your view. To achieve this there are at least three approaches,

1.Use the {{action}} helper passing the object you want to modify. Then in your function modify a property of that object and reflect that in your template e.g. toggle the form. Maybe in your case it could be something like ,

....
{{#each field in view.anotherField}}

<div class="panel panel-default">
     {{action 'toggleView' field target='view'}}
....

2.Make a sub view/template (e.g. SubFormView) to accomodate each of your forms and handle the event of toggle within this view. Then include this via the {{view}} helper within the template of your main view.

3.Use pure js DOM handling (no {{action}} helper) and call your ember components from there.

Example of approaches 1 and 3 can be found here, http://emberjs.jsbin.com/acUCocu/1

hbs

<script type="text/x-handlebars" data-template-name="index">
    <i>using <b>&#123;&#123;action&#125;&#125;</b> helper</i>
    <ul>
    {{#each color in model}}
      <li {{action 'test' color}}>{{color.name}}</li>
    {{/each}}
    </ul>

    <i>using pure js DOM event handling</i>
    <ul>
    {{#each color in model}}
      <li onclick="Ember.View.views[$(this).closest('.ember-view').attr('id')].controller.send('test2',this)">{{color.name}}</li>
    {{/each}}
    </ul>
  </script>

js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return colors;
  },
  actions:{
    test:function(param){
      alert('this is color:'+param.get('name')+" ("+param+")");
    },
    test2:function(elem){
      alert('from pure js, clicked element: '+elem);
      $(elem).css('color','red');
    }
  }
});

App.Color = Ember.Object.extend({
  name:null
});

var colors=[];
colors.pushObject(App.Color.create({name:'red'}));
colors.pushObject(App.Color.create({name:'green'}));
colors.pushObject(App.Color.create({name:'blue'}));