bunti-node/js/modules/devices/device.js

// js/modules/controls.js
// Module reference argument, assigned at the bottom
// every device gets its model from the base and is rendered into seperate viewbases

(function (Device) {

    // Dependencies
    var Position = app.module("position");
    var Option = app.module("option");
    var Util = app.module("util");

    Device.Model = Backbone.Model.extend({
        defaults: {
            deviceId: 0,
            options: Option.List,
            pos: Position.Model,
            type: ''
        }
    });

    Device.List = Backbone.Collection.extend({
        model: Device.Model
    });

    Device.View = Backbone.View.extend({
        initialize: function () {
            this.$el.addClass('device');

            this.options = new Option.List(this.model.get('options'));
            this.pos = new Position.Model(this.model.get('pos'));
            this.type = this.model.get('type');

            this.template = Handlebars.compile(Util.getTemplate(this.type));
        },
        render: function () {
            this.$el.attr('style', 'left:' + this.pos.get('x') + 'px;top:' + this.pos.get('y') + 'px');
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
        events: {
            "click .switch": "toggleSwitch"
        },
        toggleSwitch: function () {
            var status = this.model.get('options')[0].status;
            status = (status == "off" ? "on" : "off");
            this.model.get('options')[0].status = status;
            this.model.trigger("change:options");
            this.render();
        }
    });

})(app.module("device"));