JSFiddle - React, Tailwind, and code Playground

by oskbor

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.min.js"></script>
<h1>Test</h1>  
<script type="text/x-handlebars">
{{#view App.addNode}}Add Node{{/view}}

{{#each App.nodeController}}
  {{#view App.nodeView  contentBinding="this"}}
     {{#each content.attributes}}
            {{#view App.attributeView contentBinding="this"}}
            {{/view}}
    {{/each}}
  {{/view}}
{{/each}}
  </script>
  <script id="node-template" data-template-name='node-template' type="text/x-handlebars">               
      <div>Test node template</div>
  </script>

 
<script id="attribute-template" data-template-name='attribute-template' type="text/x-handlebars">               
{{content.key}}: {{content.value}}
Test attribute template
</script>

JavaScript

App = Em.Application.create();

App.Node = Em.Object.extend({
  init: function() {
    this._super();
     this.attributes= [];
    this.attributes.pushObject(App.Attribute.create());
    }

});
App.Attribute = Em.Object.extend({
  init: function(key,value){
      this._super();
      this.key = key || "Empty Key";
      this.value= value || "Empty Value";
  }
});


App.nodeController = Em.ArrayController.create({
  content: [],
  createNode: function() {
    var node = App.Node.create();
    this.pushObject(node);
  }
});

App.addNode = Em.Button.extend({
            target: 'App.nodeController',
            action: 'createNode'
});


App.nodeView = Em.View.extend({
  templateName: 'node-template'
});
App.attributeView = Em.View.extend({
  templateName: 'attribute-template'
});