Ember.js Data Testing

by Matt Anderson

HTML

<script src="http://zphyr.org/test/js/libs/jquery-2.0.2.js"></script>
<script src="http://zphyr.org/test/js/libs/handlebars-1.0.0.js"></script>
<script src="http://zphyr.org/test/js/libs/ember-1.0.0-rc.6.js"></script>
<script src="http://zphyr.org/test/js/libs/ember-data-0.13.js"></script>
<script src="http://zphyr.org/test/js/libs/LocalStorage.js"></script>
<script type="text/x-handlebars" data-template-name="Test">
<div class="outer">
     <h1>Baskets ({{getBasketCount}}) <a {{action deleteAll}}>Delete All</a> <a {{action addBasket}}>Add Basket</a> </h1>
    {{#each basket in controller itemController = "Basket"}}
    <div>
        <h3>{{basket.name}} - {{basket.getEggCount}} Eggs<a {{action addEgg}}>Add Egg</a> <a {{action removeBasket}}>Remove Basket</a></h3>
        {{#each egg in basket.eggs itemController="Egg"}}
        <div>
            <h3>{{egg.name}} <a {{action removeEgg}}>Remove Egg</a> </h3>
            I belong to {{egg.basket.name}}
        </div>
        {{/each}}
    </div>
    {{/each}}   
</div>
</script>

CSS

* {
    font-family:"Arial";
}
h1, h2, h3 {
    margin-top: 0;
}
h1 > a, h3 > a {
    float: right;
    font-size: 14px;
    display: inline-block;
    color: #3322ff;
    cursor: pointer;
    padding: 5px;
}
div.outer, div.outer div {
    border: 1px solid #ccc;
    margin: 15px;
    padding: 15px;
}

JavaScript

console.clear();

// create application
window.App = Ember.Application.create({});

// create model representations
App.Basket = DS.Model.extend({
    name: DS.attr("string"),
    eggs: DS.hasMany("App.Egg")
});
App.Egg = DS.Model.extend({
    name: DS.attr("string"),
    color: DS.attr("string"),
    basket: DS.belongsTo("App.Basket")
});

// Add a single route
App.Router.map(function () {
    this.route("Test", {
        path: "/"
    });
});

// set storage adaptor for data
App.store = DS.Store.create({
    adapter: "App.LSAdapter"
});
App.LSAdapter = DS.LSAdapter.extend({
    namespace: "App"
});

// single route
App.TestRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set("model", App.Basket.find());
    }
});

// outer controller -- contains baskets
App.TestController = Ember.ArrayController.extend({
    content: [],
    deleteAll: function () {
        console.log(this.get("content").get("content"));
    },
    addBasket: function () {
        App.Basket.createRecord({
            name: "Basket #" + Math.floor(Math.random() * 1000)
        }).save();
    },
    getBasketCount : function() {
        return this.get("length");
    }.property("@each")
});

// basket controller -- contains eggs
App.BasketController = Ember.ObjectController.extend({
    getEggCount: function () {
        return this.get("eggs").get("length");
    }.property("eggs.@each"),
    addEgg: function () {
        App.Egg.createRecord({
            name: "Egg #" + Math.floor(Math.random() * 1000),
            basket : this.get("model")
        }).save();
        this.get("model").save();
    },
    removeBasket: function () {
        var bModel = this.get("model");
        bModel.deleteRecord();
        bModel.save();
    }
});

// egg controller -- defines details about the basket's eggs
App.EggController = Ember.ObjectController.extend({
    removeEgg : function() {
        //var bModel = this.get("model").get("basket");
        var...