1

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

我有3个问题：

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

  2. 由于添加的字段将与表单中的字段基本相同，我如何确保输入的任何内容与该字段不同。在附件中，因为 textfield input 和 textArea 标签具有value=name，所以我在 textfield 中键入的任何内容都会出现在 textArea 中。我知道这个 q 将适用，即使我使用valueBinding=controller.name或者是否是带有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() 方法，它只记录我们打算通过提交的表单传递的内容。

4

1 回答 1

6

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

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

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

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

样品小提琴

希望这可以帮助

于 2013-07-29T14:02:02.887 回答