Emberjs-1.0.0-rc.6点击动态添加更多或多个输入字段 [英] Emberjs-1.0.0-rc.6 click to dynamically add more or multiple input fields

问题描述

我想创建一个表单，其中用户可以单击按钮添加其他输入字段。我在这里创建了一个偏袒的工具 jsfidle 和中的整个代码jsfiddle 正在下面：

I want to create a form where uses can click a button to add additional input fields. I have created a partialy working here jsfidle and the entire code in the jsfiddle is pased below:

我有3个问题：

1. 这将添加一个文本字段，但不使用ember绑定 $（＃addField）。append（'
   '）。当我尝试依赖于手柄的版本时，我的意思是：** $（＃addField）。append（'{{textArea value = name}} _'），而不是输出a ** textArea ，我只得到 {{textArea value = name}}

1. This adds a textfield but is not using ember bindings $("#addField").append('
   '). When I try to the version that relies on handlebars I means this: ** $("#addField").append('{{textArea value=name}}
   '), instead of the output being a **textArea, I get just {{textArea value=name}}

由于添加的字段将本质上就是已经在形式上的这个字段，我如何确保输入的内容与该字段是不同的。在附件中，因为textfield输入和textArea标记具有 value = name ，所以我在textfield中输入的任何内容都会显示在textArea中。我知道这个qwill适用，即使我使用 valueBinding = controller.name 或if视图属性与 valueBinding = view.name 。如何保持添加的每个附加输入字段的值与其唯一的点击。

Since the added fields will be essentially thesame field as the ones in the form already, how do I ensure anything typed into it is distinct to that field. In the attached because the textfield input and textArea tags have value=name, anything I type in the textfield will appear in the textArea. I know this qwill apply even if I use valueBinding=controller.name or if is the views property with valueBinding=view.name. How do I keep the value of each additional input field added with a click unique to it.

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/

Here is a jquery based demo by someone else, demonstrating what I hope to achieve, that is what you type into each new field you add remaining distinct: http://jsfiddle.net/qBURS/2/

工作解决方案：

strong>由 Selva-G 提供的 jsfiddle 。添加了删除任何添加字段的 removeFields（）方法和刚刚记录我们打算通过提交的表单传递的内容的 save（）方法。

Augmented the jsfiddle provided by Selva-G'. Added the removeFields() method that removes any added fields and a save() method that just logs the content we intend to pass via the submitted form.

推荐答案

你不能使用这样的原始jQuery。只需尝试循环一个数组来绘制您的表单元素。当您要添加更多字段时，只需将内容推送到数组。 Emberjs足够聪明，可以检测出你的新领域的变化..在你hbs，

You cannot use raw jQuery like this. Just try to loop over an array to draw your form elements. When you want to add more fields , just push the content to the array. Emberjs is smart enough to detect the changes to draw your new fields.. In you hbs ,

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

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

When you click more fields just update the content array like

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

示例小提琴

希望这有助于

这篇关于Emberjs-1.0.0-rc.6点击动态添加更多或多个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！