我想创建一个表单,用户可以单击按钮来添加其他输入字段。我创建了一个在这里工作的部分 jsfidle 并且jsfiddle中的整个代码如下:
我有 3 个问题:
这会添加一个文本字段,但不使用 ember 绑定(bind)$("#addField").append('
')。当我尝试依赖于 Handlebars 的版本时,我的意思是: ** $("#addField").append('{{textArea value=name}}
'),而不是输出a **textArea,我只得到 {{textArea value=name}}由于添加的字段基本上与表单中的字段相同,因此如何确保输入的任何内容与该字段不同。在附件中,因为文本字段输入和文本区域标记具有 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() 方法,用于仅记录我们打算通过提交的表单传递的内容。
最佳答案
你不能像这样使用原始 jQuery。只需尝试循环数组来绘制表单元素即可。当你想添加更多字段时,只需将内容推送到数组即可。 Emberjs 足够聪明,可以检测到绘制新字段的更改。在您的 hbs 中,
{{#each view.content}}
{{input value=name}}
{{textarea value=name}}
{{input type=checkbox checked=isActive}}
{{/each}}
当您单击更多字段时,只需更新内容数组,例如
this.get('content').pushObject({name: ''});
希望这有帮助
关于jquery - Emberjs-1.0.0-rc.6 点击动态添加更多或多个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17925880/