Ember-Data template

by dmazza

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<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="application">
  {{App.itemsController.length}} items:
  <ul>
  {{#each App.itemsController}}
      {{view App.ItemView}}
  {{/each}}
  </ul>
</script>



<script type="text/x-handlebars" data-template-name="item">
    <li>{{name}}, drawer:
      {{view App.DrawerView}}
    </li>
</script>


<script type="text/x-handlebars" data-template-name="drawer">
    {{view view.viewTags}}
    {{view view.viewQuote}}
    {{view view.viewHistory}}
    {{view App.TagsView}}
</script>
<script type="text/x-handlebars" data-template-name="tags">
{{#each tags}}
  {{view App.TagView}}
{{/each}}                  
</script>

CSS

.hidden {
    display: none;
}
li {
    list-style-type:circle;
    margin-left:20px;
}

JavaScript

window.App = Ember.Application.create();

App.store = DS.Store.create({
    revision: 4,
    adapter: 'DS.fixtureAdapter'
});

App.Item = DS.Model.extend({
    name: DS.attr('string'),
    tags: DS.hasMany('App.Tag', {embedded: true})
});

App.Tag = DS.Model.extend({
    name: DS.attr('string')
});

App.Item.FIXTURES = [
    {id: 1, name: 'first', tags: [{id: 1, name: 'something'}, {id: 2, name: 'else'}]},
    {id: 2, name: 'second'}
];
App.Tag.FIXTURES = [
    {id: 1, name: 'something'},
    {id: 2, name: 'else'}
];
App.ApplicationController = Ember.Controller.extend({
    
});
App.itemsController = Ember.ArrayProxy.create({
    content: App.Item.find()
});
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});
App.ItemView = Ember.View.extend({
    templateName: 'item'
    /*tagView: Ember.View.extend({
        classNameBindings: ['hidden'],
        hidden: false,
        click: function(event) {
            this.set('hidden', true);
        }
    })*/
});
App.UserView = Ember.View.extend({
    templateName: 'user',
    click: function(event) {
        alert('user');
        //router.send('showProfile')
    }
});

App.TabView = Ember.View.extend({
    template: Ember.Handlebars.compile("{{view.pane}}"),
    tagName: 'button',
    pane: "App.TagsView",
    click: function(event) {
        alert(this.pane);
        router.get("tabController").set("view", this.pane);
        alert(router.get("tabController").get("view"));
    }
});

App.DrawerView = Ember.View.extend({
    templateName: 'drawer',
    tagName: 'ul',
    tabPane: 'App.TagsView',
    viewTags: App.TabView.extend({
        pane: "App.TagsView"
    }),
    viewQuote: App.TabView.extend({
        pane: "App.QuoteView"
    }),
    viewHistory: App.TabView.extend({
        pane: "App.HistoryView"
    }),
});

/*App.TabContainerView = Ember.ContainerView.extend({
    //currentView: 'App.TagsView'
});*/
App.TabController = Ember.Controller.extend({
    view: 'App.TagsView'
});
/*...