Emberjs-2.0 dynamically adds an additional component in a click

Question

I have a component called display-me. I can add several from the same component to the same template as shown in jsfiddle by adding several calls to this component as follows:

  <script type="text/x-handlebars" data-template-name="index">
     {{display-me  action='add'}}
     {{display-me  action='add'}}
  </script>

However, what I want is a situation where I can click a button to add a second record for a component, instead of adding it manually as described above, because I want to use the click and add as much as you want.

I added this action to my pointer route, but it does not work:

 App.IndexRoute = Ember.Route.extend({
    actions: {
      add: function(){   

        var comp = App.__container__.lookup("component:display-me");

        //var comp = App.DisplayMeComponent.create();

        //comp.appendTo(".test");
        //comp.appendTo('#input'); 

        Ember.$(".test").append($('<div> {{display-me  action="add"}} </div>'));

      }
    }
  });

Here is the full jsfiddle

Answer 1

.

, -, : , :

http://emberjs.jsbin.com/defapo/2/edit?html,js,output

, .

, :

names: ['James'],

actions: {
  add: function() {
    this.get('names').pushObject('John Doe');
  }
}

{{#each names key="@index" as |name|}}
  <p>  {{input value=name}} </p>
{{/each}}

, Ember . , key="@index" .

:

  people: [ Ember.Object.create({name: 'James'}) ],

  actions: {
    add: function(){   
       this
         .get('people')
         .pushObject(Ember.Object.create({name: 'John Doe'}));
    }
  }

{{#each people as |person|}}
  <p>  {{input value=person.name}} </p>
{{/each}}

: http://emberjs.jsbin.com/defapo/3/edit?html,js,output

Ember Data. , , , Ember Data - .