Adding view dynamically inside template Ember Js

Question

On click of a button i want the following to be added dynamically inside a template.

    {{view App.DatalistText type="text" 
        value=test 
        class="form-control" 
        placeholder="Start Typing" 

        list="names"
        size="50"
    }}
    <datalist id="names" value=te>
      {{#each model}}
        <option {{bindAttr value=name}}>
      {{/each}}
    </datalist>

There is a div

<div id="container"></div>

When user clicks a button contents of div should become the following thus rendering a datalist

<div id="container">
  {{view App.DatalistText type="text" 
        value=test 
        class="form-control" 
        placeholder="Start Typing" 

        list="names"
        size="50"
    }}
    <datalist id="names" value=te>
      {{#each model}}
        <option {{bindAttr value=name}}>
      {{/each}}
    </datalist>
 </div>

When I am trying to do this using $("#container").append("{{view App.DatalistText type='text' value=test1 class='form-control' placeholder='Start Typing' list='names' size='50' }} <datalist id='names' value=te> {{#each model}} <option {{bindAttr value=name}}> {{/each}} </datalist>");--this is not working -the datalist is not visible There must be some other way to dynamically add this.

App.DatalistText = Ember.TextField.extend({
  attributeBindings: ['list'],
  list : null,
  value:"names",
  selected:function(){
    alert(this.get('te'));
  }
});

Basically i want to one new datalist every time the user clicks a button.

Answer 1

You should avoid as much as possible playing with jQuery and the DOM yourself. append will not work, as you add text and not HTMLbars code.

I will not directly answer your question but will try to find out a better solution. You want to show Datalist view every time user clicks a button - why? I assume that you want to bind some kind of value to this view (in your code it's test. But how would you perform any action to that value if you do not save in controller this bindings? The better solution may be to create some kind of array of Ember.Object's (or plain JS) that will store values from your bindings. Assuming that you have following property in controller:

myObjects: []

You can handle the click action from the button this way:

actions:
  handleClick: function() {
    myObjects.pushObject({ value: '' }); # use pushObject to make it supported by Ember bindings system 
  }

And then, in your template:

<div id="container">
  {{each object in myObjects}}
    {{view App.DatalistText type="text" 
        value=object.value 
        class="form-control" 
        placeholder="Start Typing" 
        list="names"
        size="50"
    }}
  }}
  <datalist id="names" value=te>
    {{#each model}
      <option {{bindAttr value=name}}>
    {{/each}}
  </datalist>
</div>

This way, template engine will render view every time the new object in myObjects appears. Moreover, you will get access to the values provided by user via accessing Ember.get(myObject[index], "value").

If you would like to know why I used pushObject take a look here.