Ember latest

by MikeAski

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app-view'>
  <table>
    <thead>
      <tr>
      {{#each entry in content}}
        {{#with entry}}
          <th>{{key}}</th>
        {{/with}}
      {{/each}}
      </tr>
    </thead>

    <tbody>
    {{#each entry in content}}
      <tr>
      {{#with entry}}
        <td>
          {{view Ember.TextField valueBinding="value"}}
        </td>
        <td>
          ...
        </td>
        <td>
          ...
        </td>
      {{/with}}
      </tr>
    {{/each}}
    </tbody>
  </table>
    
    <button {{action showValues}}>Show values...</button>
</script>

CSS

th {
    text-align: center;
}

td {
    padding: 5px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  content: [{
    key: 'a',
    value: 'aaaa'
  },
  {
    key: 'b',
    value: null
  },   
  {
    key: 'c',
    value: '123'
  }]
});
App.ApplicationView = Ember.View.extend({
  templateName: 'app-view'
})

App.Router = Ember.Router.extend({
    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
    
            showValues: function(router) {
                var items = router.get('applicationController.content');
                items.forEach(function(item, index) {
                    alert('Item #%@ = %@'.fmt(index, item.value));
                });
            }
        })
    })
});

App.initialize();