Question

我想创建一个表单，其中用户可以单击按钮添加其他输入字段。我在这里创建了一个名为 jsfidle 的部分代码， jsfiddle 中的完整代码如下所示：

我有3个问题：

这会添加一个文本字段但不使用ember绑定 $（“＃addField”）。append（'
'）。当我尝试依赖于把手的版本时，我的意思是：** $（“＃addField”）。append（'{{textArea value = name}}
'），而不是输出a ** textArea ，我只是 {{textArea value = name}}
由于添加的字段基本上与表单中的字段相同，因此我如何确保输入的字段与该字段不同。在附件中因为textfield input和textArea标签有 value = name ，我在文本字段中输入的任何内容都将出现在textArea中。即使我使用 valueBinding = controller.name ，或者如果是带有 valueBinding = view.name 的views属性，我知道这个qwill会适用。如何通过对其唯一的单击添加每个附加输入字段的值。

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: ''});

Sample fiddle

希望这有帮助

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

1 个答案: