在模板 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.

在模板 Ember Js 中动态添加视图

Adding view dynamically inside template Ember Js

jquery

handlebars.js

ember.js

ember-data