Добавление динамического отображения внутри шаблона Ember Js

Question

При нажатии кнопки я хочу добавить динамическое динамическое расширение внутри шаблона.

{{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 id="container"></div> 

Когда пользователь нажимает кнопку содержимое DIV должно стать следующее таким образом рендеринга 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> 

Когда я пытаюсь сделать это с помощью $("#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>"); - это не работает - datalist не отображается Должен быть какой-то другой способ динамически добавить это.

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

В основном я хочу, чтобы каждый новый datalist каждый раз, когда пользователь нажимает кнопку.

Answer 1

Вам следует избегать как можно большего количества игр с помощью jQuery и DOM. append не будет работать, поскольку вы добавляете текст, а не код HTMLbars.

Я не буду прямо отвечать на ваш вопрос, но попытаюсь найти лучшее решение. Вы хотите показывать Datalist каждый раз, когда пользователь нажимает кнопку - почему? Я предполагаю, что вы хотите привязать какое-то значение к этому представлению (в вашем коде это test. Но как бы вы выполнили какое-либо действие для этого значения, если вы не сохраните в контроллере эти привязки? Лучшим решением может быть создание какого-то рода из массива Ember.Object-х (или равнинных JS), который будет хранить значение от креплений Предполагая, что вы следующие свойства контроллера:.

myObjects: [] 

вы можете обрабатывать замковые Экшены от кнопки таким образом:

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

И вот в вашем шаблоне:

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

Таким образом, движок шаблона будет отображать просмотр каждый раз, когда появляется новый объект в myObjects. Кроме того, вы получите доступ к значениям, предоставленным пользователем, путем доступа к Ember.get(myObject[index], "value").

Если вы хотите узнать, почему я использовал pushObjecttake a look here.