JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
<script type="text/x-handlebars" data-template-name='application'>
    <h1> Hello</h1>
    {{#each view.content}}
    {{input valueBinding='name'placeholder="name"}}
     <br/>
      {{textarea valueBinding='bio' placeholder="your bio"}}
    <br/>
    
    {{input type=checkbox checked=isActive}}
    <br/>
    <button {{action 'removeFields' this target='view'}}> remove </button>
    <br/>
    {{/each}}
    <br/>
    <button {{action 'moreFields' target='view'}}> click for more field </button>
    <br/>
     <br/>
    <button {{action 'save' target='view'}}> save form </button>
    <br/>
    {{outlet}}
</script>

JavaScript

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
    templateName: 'application',
    content: [{name: 'testname', bio:''}],
    attributeBindings: ['id'],
  id: "addField",
    moreFields: function(){
     console.log(   this.get('content').pushObject({name: '', bio:''})    
        );
        
        console.log(this.get('content'));     
    },
    
    removeFields: function(context){
     console.log(   this.get('content').removeObject(context)    
        );
        
        console.log(this.get('content'));     
    },
    
    save: function(){
     console.log(this.get('content')); 
      //alert(JSON.stringify(this.get('content')));
    }
    
});