Simple starting point for Ember.js fiddles

by oskbor

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.min.js"></script>
  <script type="text/x-handlebars">

{{#each App.nodeController}}
  {{view App.NodeView  contentBinding="this"}}
{{/each}}
{{#view App.AddNode}}Add Node{{/view}}
  </script>

  <script data-template-name='node-template' type="text/x-handlebars">               
      <div class="node">
          <table border="2">
              <th colspan="2"><h3>Node</h3></th>
      {{#each content.attributes}}
      {{view App.AttributeView contentBinding="this"}}</li>
    {{/each}}
    <tr><td colspan="2">{{#view App.AddAttribute contentBinding="this"}}
            Add Attrbute{{/view}}</td>
      </table></div>
  </script>

 
<script data-template-name='attribute-template' type="text/x-handlebars">               
<tr><td>{{#view App.Text valueBinding="content.key"}}{{/view}}: </td><td>{{#view App.Text valueBinding="content.value"}}{{/view}}</td></tr>
</script>

JavaScript

App = Em.Application.create();


var categories = ["ccode", "name", "blaha", "import", "ccode_from"];
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({

  // Initialize the array controller with an empty array.
  content: [],

  // Creates a new todo with the passed title, then adds it to the array.
  createNode: function() {
    var node = App.Node.create();
    this.pushObject(node);
  }
});

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

App.AddAttribute = Ember.Button.extend({
            target: 'App.NodeView',
            action: 'addAttribute'
    });

App.NodeView = Em.View.extend({
  templateName: 'node-template',
    addAttribute: function() {
    var attr = this.getPath('content.attributes');
    attr.pushObject(App.Attribute.create());
  }
});
App.AttributeView = Em.View.extend({
  templateName: 'attribute-template'
})
 App.Text = Ember.TextField.extend();