Frontend w. Backbone,Underscore,jQuery - Async handlebars loader
This commit is contained in:
bastianwegge
parent
3da2d67aa9
commit
613f382363
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Bunti backbone prototype</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="js/libs/jquery.js"></script>
|
||||||
|
<script src="js/libs/underscore.js"></script>
|
||||||
|
<script src="js/libs/backbone.js"></script>
|
||||||
|
<script src="js/libs/handlebars.js"></script>
|
||||||
|
|
||||||
|
<!-- Application core (Order matters) -->
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
|
||||||
|
<!-- Modules (Order does not matter) -->
|
||||||
|
<script src="js/modules/util.js"></script>
|
||||||
|
<script src="js/modules/room.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
var app = {
|
||||||
|
module: function () {
|
||||||
|
var modules = {};
|
||||||
|
|
||||||
|
return function (name) {
|
||||||
|
if (modules[name]) {
|
||||||
|
return modules[name];
|
||||||
|
}
|
||||||
|
|
||||||
|
return modules[name] = { Views: {} };
|
||||||
|
};
|
||||||
|
} ()
|
||||||
|
};
|
||||||
|
|
||||||
|
jQuery(function ($) {
|
||||||
|
// load the modules
|
||||||
|
app.room = app.module('room');
|
||||||
|
app.control = app.module('control');
|
||||||
|
app.option = app.module('option');
|
||||||
|
app.util = app.module('util');
|
||||||
|
|
||||||
|
// load the data -- dummy -- struts/node backend
|
||||||
|
var model = {
|
||||||
|
rooms: [
|
||||||
|
{
|
||||||
|
roomId: 1,
|
||||||
|
title: "Raum 1",
|
||||||
|
controls: [
|
||||||
|
{ controlId: 1, type: "switch", options: [{ status: "off"}] },
|
||||||
|
{ controlId: 2, type: "switch", options: [{ status: "on"}] },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ roomId: 2, title: "Raum 2" },
|
||||||
|
{ roomId: 3, title: "Raum 3" },
|
||||||
|
{ roomId: 4, title: "Raum 4" },
|
||||||
|
{ roomId: 5, title: "Raum 5" }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
var myTestTemplate = app.util.loadTemplate('js/templates/test.handlebars', function(data) {
|
||||||
|
source = data;
|
||||||
|
template = Handlebars.compile(source);
|
||||||
|
//$('#target').html(template(jsondata));
|
||||||
|
$('#content').append(template(model));
|
||||||
|
});
|
||||||
|
|
||||||
|
// create the model
|
||||||
|
dashboard = new app.room.List(model.rooms);
|
||||||
|
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,25 @@
|
||||||
|
// 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 (Control) {
|
||||||
|
// Dependencies
|
||||||
|
var Option = app.module("option");
|
||||||
|
|
||||||
|
Device.Model = Backbone.Model.extend({
|
||||||
|
defaults: {
|
||||||
|
options: Option.List
|
||||||
|
},
|
||||||
|
initialize: function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Device.List = Backbone.Collections.extend({
|
||||||
|
model: Control.Model
|
||||||
|
});
|
||||||
|
|
||||||
|
})(app.module("control"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
// js/modules/controls.js
|
||||||
|
// Module reference argument, assigned at the bottom
|
||||||
|
|
||||||
|
(function (Option) {
|
||||||
|
Option.Model = Backbone.Model.extend({
|
||||||
|
});
|
||||||
|
|
||||||
|
Option.List = Backbone.Collections.extend({
|
||||||
|
model: Option.Model
|
||||||
|
});
|
||||||
|
|
||||||
|
})(app.module("option"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// js/modules/controls.js
|
||||||
|
// Module reference argument, assigned at the bottom
|
||||||
|
|
||||||
|
(function (Switch) {
|
||||||
|
|
||||||
|
})(app.module("switch"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
// js/modules/room.js
|
||||||
|
// Module reference argument, assigned at the bottom
|
||||||
|
|
||||||
|
(function (Room) {
|
||||||
|
|
||||||
|
// Dependencies
|
||||||
|
var Control = app.module("control");
|
||||||
|
|
||||||
|
// The basic person model
|
||||||
|
Room.Model = Backbone.Model.extend({
|
||||||
|
defaults: {
|
||||||
|
roomId: null,
|
||||||
|
title: 'undefined',
|
||||||
|
controls: Control.List
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
Room.List = Backbone.Collection.extend({
|
||||||
|
model: Room.Model
|
||||||
|
});
|
||||||
|
|
||||||
|
})(app.module("room"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
// js/modules/util.js
|
||||||
|
// utility functions for template loading / ..
|
||||||
|
|
||||||
|
(function (Util) {
|
||||||
|
|
||||||
|
Util.loadTemplateAjax = function(path, callback) {
|
||||||
|
$.ajax({
|
||||||
|
url: path, //ex. js/templates/mytemplate.handlebars
|
||||||
|
cache: true,
|
||||||
|
success: callback
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})(app.module("util"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<ul>
|
||||||
|
{{#rooms}}
|
||||||
|
<li>Id: {{roomId}} - Name: {{title}}</li>
|
||||||
|
{{/rooms}}
|
||||||
|
</ul>
|
||||||
Loading…
Reference in New Issue