在模板内动态添加视图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

<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。当您添加文本而不是HTMLbars代码时，append将不起作用。

我不会直接回答你的问题，但会尝试找出更好的解决方案。每次用户点击一个按钮时，您想要显示Datalist视图 - 为什么？我假设你想为这个视图绑定某种价值（在你的代码中它是test。但是如果你没有在控制器中保存这个绑定，你将如何对这个值执行任何操作？更好的解决方案可能是创建某种类型。

myObjects: [] 

您可以处理从按钮的点击操作是这样的：：

的 Ember.Object的（或纯JS）阵列将存储值从您的绑定假设你已经在控制器下列财产

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。