在模板 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 的内容应该变成如下，从而呈现一个数据列表

<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>");--这不起作用-数据列表不可见 必须有其他方法来动态添加它。

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

基本上，每次用户单击按钮时，我都想创建一个新的数据列表。

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") 访问用户提供的值。

如果你想知道我为什么使用pushObject take a look here。