Emberjs-1.0.0-rc.6 haga clic para agregar dinámicamente más o múltiples campos de entrada

Quiero crear un formulario donde los usos pueden hacer clic en un botón para agregar campos de entrada adicionales. He creado un jsfidle que funciona parcialmente aquí y el código completo en el jsfiddle se pega a continuación:

Tengo 3 problemas:

  1. Esto agrega un campo de texto pero no está usando enlaces de brasas $ (“# addField”). Append (‘
    ‘) . Cuando bash la versión que se basa en el manillar, significa esto: ** $ (“# addField”). Append (‘{{textArea value = name}}
    ‘) , en lugar de que la salida sea ** textArea , solo obtengo {{textArea value = name}}

  2. Dado que los campos agregados serán esencialmente el mismo campo que los que ya están en el formulario, ¿cómo me aseguro de que todo lo que se escriba sea distinto a ese campo? En el documento adjunto porque las tags de entrada de campo de texto y área de texto tienen valor = nombre , todo lo que escriba en el campo de texto aparecerá en el área de texto. Sé que esto se aplicará incluso si uso valueBinding = controller.name o si es la propiedad views con valueBinding = view.name . ¿Cómo mantengo el valor de cada campo de entrada adicional agregado con un clic único?

El código completo en el jsfiddle.

App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application', attributeBindings: ['id'], id: "addField", moreFields: function(){ $("#addField").append('
'); $("#addField").append('{{textArea value=name}}
'); } });

La plantilla:

   

Hello

{{input value=name}}
{{textarea value=name}}
{{input type=checkbox checked=isActive}}

{{outlet}}

Aquí hay una demostración basada en jquery de otra persona, que demuestra lo que espero lograr, eso es lo que escribe en cada nuevo campo que agregue como distinto: http://jsfiddle.net/qBURS/2/

solución de trabajo :

Aumentó el jsfiddle proporcionado por Selva-G ‘. Se agregó el método removeFields () que elimina todos los campos agregados y un método save () que simplemente registra el contenido que pretendemos pasar a través del formulario enviado.

No puedes usar jQuery en crudo como este. Solo intente recorrer una matriz para dibujar los elementos de su formulario. Cuando desee agregar más campos, simplemente inserte el contenido en la matriz. Emberjs es lo suficientemente inteligente como para detectar los cambios para dibujar sus nuevos campos. En usted hbs,

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

Cuando hace clic en más campos, simplemente actualice la matriz de contenido como

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

Violín de muestra

Espero que esto ayude