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

Question

我想创建一个表单,用户可以单击按钮添加其他输入字段.我创建了一个partialy在这里工作jsfidle并在整个代码的jsfiddle是pased如下:

我有3个问题:

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

2. 由于添加的字段基本上与表单中的字段相同,因此我如何确保输入的字段与该字段不同.在附件中因为textfield input和textArea标签具有value = name,所以我在textfield中输入的任何内容都将出现在textArea中.我知道这个qwill适用,即使我使用valueBinding = controller.name或if是带有valueBinding = view.name的views属性.如何通过对其唯一的单击添加每个附加输入字段的值.

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/

工作方案:

增加了Selva-G ' 提供的jsfiddle.添加了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: ''});

样品小提琴

希望这可以帮助