jquery - Emberjs-1.0.0-rc.6 点击动态添加更多或多个输入字段

Question

我想创建一个表单，用户可以单击按钮来添加其他输入字段。我创建了一个在这里工作的部分 jsfidle 并且jsfiddle中的整个代码如下:

我有 3 个问题:

1. 这会添加一个文本字段，但不使用 ember 绑定(bind)$("#addField").append('
   ')。当我尝试依赖于 Handlebars 的版本时，我的意思是: ** $("#addField").append('{{textArea value=name}}
   ')，而不是输出a **textArea，我只得到 {{textArea value=name}}

2. 由于添加的字段基本上与表单中的字段相同，因此如何确保输入的任何内容与该字段不同。在附件中，因为文本字段输入和文本区域标记具有 value=name，所以我在文本字段中输入的任何内容都会出现在文本区域中。我知道即使我使用 valueBinding=controller.name 或使用 valueBinding=view.name 的views 属性，此 q 也将适用。如何保留通过单击添加的每个附加输入字段的值？

jsfiddle中的整个代码

 App = Ember.Application.create();

 App.ApplicationView = Ember.View.extend({
  templateName: 'application',
  attributeBindings: ['id'],
  id: "addField",

  moreFields: function(){
    $("#addField").append('<input type="text"  value=name /><br/>');

    $("#addField").append('{{textArea value=name}}<br/>');  
  }

});

模板:

 <script type="text/x-handlebars" data-template-name='application'>
    <h1> Hello</h1>
    {{input value=name}}
    <br/>
    {{textarea value=name}}
    <br/>
   {{input type=checkbox checked=isActive}}
   <br/>

  <button {{action 'moreFields' target='view'}}> click for more field </button>
   <br/>
  {{outlet}}
</script>

这是其他人基于 jquery 的演示，演示了我希望实现的目标，这就是您在添加的每个新字段中输入的内容，保持不同: http://jsfiddle.net/qBURS/2/

工作解决方案:

增强了 jsfiddle 由Selva-G'提供。添加了 removeFields() 方法，用于删除所有添加的字段；以及 save() 方法，用于仅记录我们打算通过提交的表单传递的内容。

Answer 1

你不能像这样使用原始 jQuery。只需尝试循环数组来绘制表单元素即可。当你想添加更多字段时，只需将内容推送到数组即可。 Emberjs 足够聪明，可以检测到绘制新字段的更改。在您的 hbs 中，

   {{#each view.content}}
    {{input value=name}}
    {{textarea value=name}}
   {{input type=checkbox checked=isActive}}
  {{/each}}

当您单击更多字段时，只需更新内容数组，例如

        this.get('content').pushObject({name: ''});

Sample fiddle

希望这有帮助