Ember JS + Ember Data

by kristaps_petersons

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h1>Home</h1>
    <p>
    Structures:{{structures.length}}
    </p>
    <ul>
    {{#each structure in structures}}            
        <li>
            ID:{{structure.id}}<br/>
           Name: {{structure.name}}
            Overlalays: {{structure.overlays.length}}
            <ul>               
            {{#each overlay in structure.overlays}}
                <li>
                    View: {{overlay.v}} &nbsp;
                    Path: {{overlay.p}}
                </li>
            {{/each}}
            </ul>
        </li>
    {{/each}}
    </ul>
</script>

JavaScript

window.App = Ember.Application.create();
App.Store = DS.Store.extend({
    revision: 4,
    adapter: DS.fixtureAdapter
});

App.Structure = DS.Model.extend({
    id: DS.attr('number'),
    name: DS.attr('string'),
    overlays: DS.hasMany('App.Overlay', {embedded: true})
});

App.Overlay = DS.Model.extend({
    id: DS.attr('number'),
    vi: DS.attr('string'),
    pa: DS.attr('string'),
    structure: DS.belongsTo('App.Structure'),
    
    v: function(){
        return this.get('vi');
    }.property('vi'),
    
    p: function(){
        return this.get('pa');
    }.property('pa')    
});

App.Overlay.FIXTURES = [];

App.Structure.FIXTURES = [
    {
    "id": 1,
    "name": "Test Structure 0",
    'overlay_ids': [1, 2, 3],
    "overlays": [{
        "id": 1,
        "structure_id": 0,
        "vi": "Overlay view 0.0",
        "pa": "Overlay path 0.0"},
    {
        "id": 2,
        "structure_id": 0,
        "vi": "Overlay view 0.1",
        "pa": "Overlay path 0.1"},
    {
        "id": 3,
        "structure_id": 0,                    
        "vi": "Overlay view 0.2",
        "pa": "Overlay path 0.2"}
                        ]},
{
    "id": 1,
    "name": "Test Structure 1",
    "overlays": [{
        "id": 3,        
        "structure_id": 1,
        "vi": "Overlay view 1.0",
        "pa": "Overlay path 1.0"},
    {
        "id": 4,
        "structure_id": 0,
        "vi": "Overlay view 1.1",
        "pa": "Overlay path 1.1"},
    {
        "id": 5,
        "structure_id": 0,                    
        "vi": "Overlay view 1.2",
        "pa": "Overlay path 1.2"}
                        ]},
{
    "id": 2,
    "name": "Test Structure 2"}
];



App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.HomeController = Ember.Controller.extend({
    structures: function() {
        return this.get('content');
    }.property('content')
});
App.HomeView = Ember.View.extend({
   ...