Skip to content

Instantly share code, notes, and snippets.

@superlou
Created January 21, 2012 22:00
Show Gist options
  • Save superlou/1654206 to your computer and use it in GitHub Desktop.
Save superlou/1654206 to your computer and use it in GitHub Desktop.
Modules undefined
// Module Room
define([
"namespace",
"use!backbone"
],
function(namespace, Backbone) {
var Room = namespace.module();
Room.Model = Backbone.Model.extend({
defaults: {
"name": "Unamed Room"
}
});
Room.Collection = Backbone.Collection.extend({
model: Room.Model
});
Room.Views.Windowed = Backbone.View.extend({
initialize: function() {
_.bindAll(this,'render');
this.render();
},
render: function() {
$(this.el).append("Chatroom");
}
});
return Room;
});
// index.js
define("namespace", [
"jquery",
"use!underscore",
"use!backbone"
],
function($) {
return {
// This is useful when developing if you don't want to use a
// build process every time you change a template.
//
// Delete if you are using a different template loading method.
fetchTemplate: function(path, done) {
// Should be an instant synchronous way of getting the template, if it
// exists in the JST object.
var JST = this.JST = this.JST || {};
if (JST[path]) {
return done(JST[path]);
}
// Fetch it asynchronously if not available from JST
return $.get(path, function(contents) {
var tmpl = _.template(contents);
JST[path] = tmpl;
done(tmpl);
});
},
// Create a custom object with a nested Views object
module: function(additionalProps) {
return _.extend({ Views: {} }, additionalProps);
},
// Keep active application instances namespaced under an app object.
app: _.extend({}, Backbone.Events)
};
});
require([
"namespace",
"jquery",
"use!backbone",
"modules/example",
"modules/room",
"modules/home"
],
function (namespace, jQuery, Backbone, Example, Home, Room) {
// Treat the jQuery ready function as the entry point to the application.
// Inside this function, kick-off all initialization, everything up to this
// point should be definitions.
jQuery(function($) {
// Shorthand the application namespace
var app = namespace.app;
// Defining the application router, you can attach sub routers here.
var Router = Backbone.Router.extend({
routes: {
"": "index",
"boiler": "boiler"
},
index: function() {
var route = this;
var home = new Home.Model();
var home_view = new Home.Views.Main({"model": home});
},
boiler: function(hash) {
var route = this;
var tutorial = new Example.Views.Tutorial();
// Attach the tutorial to the DOM
tutorial.render(function(el) {
$("#main").html(el);
// Fix for hashes in pushState and hash fragment
if (hash && !route._alreadyTriggered) {
// Reset to home, pushState support automatically converts hashes
Backbone.history.navigate("", false);
// Trigger the default browser behavior
location.hash = hash;
// Set an internal flag to stop recursive looping
route._alreadyTriggered = true;
}
});
}
});
// Define your master router on the application namespace and trigger all
// navigation from this instance.
app.router = new Router();
// Trigger the initial route and enable HTML5 History API support
Backbone.history.start({ pushState: true });
// All navigation that is relative should be passed through the navigate
// method, to be processed by the router. If the link has a data-bypass
// attribute, bypass the delegation completely.
$(document).on("click", "a:not([data-bypass])", function(evt) {
// Get the anchor href and protcol
var href = $(this).attr("href");
var protocol = this.protocol + "//";
// Ensure the protocol is not part of URL, meaning its relative.
if (href.slice(0, protocol.length) !== protocol) {
// Stop the default event to ensure the link will not cause a page
// refresh.
evt.preventDefault();
// This uses the default router defined above, and not any routers
// that may be placed in modules. To have this work globally (at the
// cost of losing all route events) you can change the following line
// to: Backbone.history.navigate(href, true);
app.router.navigate(href, true);
}
});
});
});
// Module Home
define([
"namespace",
"use!backbone",
"modules/room"
],
function(namespace, Backbone, Room) {
var Home = namespace.module();
Home.Model = Backbone.Model.extend({
defaults: {
"user": "guest",
"rooms": new Room.Collection()
}
});
Home.Views.Main = Backbone.View.extend({
el: $('body'),
events: {
"click a#open_room": 'open_room'
},
initialize: function() {
_.bindAll(this,'render','open_room');
this.render();
},
render: function() {
$(this.el).append('<div>Welcome ' + this.model.get('user') + "</div>");
$(this.el).append('<a id="open_room" href=#>Open Room</a>');
},
open_room: function() {
console.log(this.model.get('rooms'));
}
});
return Home;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment