Skip to content
This repository has been archived by the owner on Jun 5, 2019. It is now read-only.

Commit

Permalink
Cleaned up backbone structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@donnielrt
donnielrt committed Sep 25, 2012
1 parent b824384 commit ce8f1c6
Show file tree
Hide file tree
Showing 10 changed files with 66 additions and 61 deletions.
12 changes: 9 additions & 3 deletions public/js/app/collections/quests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,17 @@ define(['backbone', 'models/quest', 'views/quests/single'], function(Backbone, Q

url: "/api/quests",

model: Quest,
model: Quest,

initialize: function () {
initialize: function (options) {

console.log("Initializing Quests collection");
options = options || {};
this.limit = options.limit || -1;
console.log("Initializing Quests collection, limit ", this.limit);

if(this.limit > 0) {
this.url = this.url + "/limit/" + this.limit;
}

}

Expand Down
40 changes: 16 additions & 24 deletions public/js/app/routes/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,10 @@ define([
this.appView = appView;

// handle internal links without navigating away from the page
$("body").on("click", "a[data-internal]", function(e) {
$("body").on("click", "a:not([data-bypass])", function(e) {

e.preventDefault();

Questience.appRouter.navigate($(this).attr('href'), true);

});
Expand All @@ -59,30 +60,26 @@ define([

home: function () {

var collection = new Quests({limit: 6}), questsView; // render quests

this.appView.render();
this.quests(true);

questsView = new QuestsView({collection: collection, $el: $("#quests-container")});

collection.fetch();

return this;

},

getHeader: function (title, description) {
return _.template(HeaderView, { title: title, description: description } );
},

quests: function (append) {
quests: function () {

// list quests
var questsView = new QuestsView({collection: new Quests(), model: null, ctr: 0}); // render quests

if(append) {
this.appView.render().$el.append(questsView.el);
} else {
this.appView.$el.html(this.getHeader("Quests", "Here are you current quests")).append(questsView.el);
}
var collection = new Quests(), questsView = new QuestsView({collection: collection, $el: $("#questience-app")}); // render quests

collection.fetch();

return questsView.el;
return this;

},

Expand All @@ -98,14 +95,11 @@ define([
quest.fetch({
success: function(model, response) {

$root.html(that.getHeader(model.get('name'), model.get('description')));
$root.append(questsView.$el);
$root.html(questsView.$el);

}
});



return this;

},
Expand All @@ -115,7 +109,7 @@ define([
var quest = new Quest(),
questView = new QuestFormView({model: quest});

this.appView.$el.html(this.getHeader("Create Quest", "Enter quest details here")).append(questView.render().$el);
this.appView.$el.html(questView.render().$el);

return this;

Expand All @@ -131,8 +125,7 @@ define([
questView = new QuestFormView({model: quest});
quest.fetch({
success: function(model, response) {
$root.html(that.getHeader(model.get('name'), model.get('description')));
$root.append(questView.$el);
$root.html(questView.$el);
}
});

Expand All @@ -150,8 +143,7 @@ define([
questView = new QuestDeleteView({model: quest});
quest.fetch({
success: function(model, response) {
$root.html(that.getHeader(model.get('name'), model.get('description')));
$root.append(questView.$el);
$root.html(questView.$el);
}
});

Expand Down
1 change: 1 addition & 0 deletions public/js/app/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ <h1>Welcome to Questience!</h1>
<p>Questience is a game that will organize your life! </p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div id="quests-container"></div>
2 changes: 1 addition & 1 deletion public/js/app/templates/quests/form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</div>

<div class="controls">
<input type="button" name="save" class="btn btn-primary btn-save" value="save"/> <a href="" class="btn btn-cancel" data-internal="true">Cancel</a>
<input type="button" name="save" class="btn btn-primary btn-save" value="save"/> <a href="" class="btn btn-cancel">Cancel</a>
</div>

</fieldset>
12 changes: 7 additions & 5 deletions public/js/app/templates/quests/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

<div class="well span12">

<ul id="#quests-list" class="list list-plain">
<% if(!Quests.length) { %>
<li class="span12"><h2>You have not created any quests!</h2><p>Why don't you <a data-internal="true" href="quests/new">begin your epic journey</a>?</p></li>
<ul id="quests-list" class="list list-plain">
<% if(!Quests.length) {
var ctr = 0;
%>
<li class="span12"><h2>You have not created any quests!</h2><p>Why don't you <a href="quests/new">begin your epic journey</a>?</p></li>
<% } else { %>
<% _.each(Quests, function (quest) {
if(ctr++ % 3 === 0) {
Expand All @@ -15,11 +17,11 @@
}
%>
<li class="quest-item<%= newRow %>">
<a href="#quests/<%= quest._id %>" data-internal="true"><h2><%= quest.name %></h2></a>
<a href="#quests/<%= quest._id %>"><h2><%= quest.name %></h2></a>
<p><%= quest.description %> &mdash; <span class="deadline <%= quest.deadlineStatus %>">Due <%= moment(quest.deadline).fromNow() %></span></p>
<p>Status: <span class="status"><%= quest.status %></span></p>

<p><a class="btn" href="#quests/<%= quest._id %>" data-internal="true">View details &raquo;</a></p>
<p><a class="btn" href="#quests/<%= quest._id %>">View details &raquo;</a></p>

</li>
<%
Expand Down
2 changes: 1 addition & 1 deletion public/js/app/templates/quests/remove.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<h2>Are you sure you want to delete <%= name %>?</h2>
<p>This action cannot be undone!</p>
<p><a class="btn btn-remove btn-danger" href="#quests/<%= _id %>/remove" data-internal="true"><i class="icon-trash"></i> Delete</a> <a href="#quests/<%= _id %>" class="btn btn-cancel" data-internal="true">Cancel</a></p>
<p><a class="btn btn-remove btn-danger" href="#quests/<%= _id %>/remove"><i class="icon-trash"></i> Delete</a> <a href="#quests/<%= _id %>" class="btn btn-cancel">Cancel</a></p>
6 changes: 3 additions & 3 deletions public/js/app/templates/quests/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Actions <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a data-internal="true" href="#quests/<%= _id %>/edit">Edit</a></li>
<li><a data-internal="true" href="#quests/<%= _id %>/remove">Delete</a></li>
<li><a href="#quests/<%= _id %>/edit">Edit</a></li>
<li><a href="#quests/<%= _id %>/remove">Delete</a></li>
</ul>

</div>
<a class="btn pull-left" data-internal="true" href="<%= lastPage %>">&laquo; Back</a>
<a class="btn pull-left" href="<%= lastPage %>">&laquo; Back</a>

</div>

Expand Down
26 changes: 7 additions & 19 deletions public/js/app/views/quests/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ define(['backbone', 'text!templates/quests/list.html'], function(Backbone, quest

var QuestsView = Backbone.View.extend({

tag: "ul",
id: "quests-list",
className: "list list-plain",
el: $("quests-list"),

template: _.template(questsTemplate),

Expand All @@ -15,30 +13,20 @@ define(['backbone', 'text!templates/quests/list.html'], function(Backbone, quest

initialize: function(options) {

var $root = this.$el;

this.collection = options.collection || {};
this.model = options.model || {};

// we also use this view for the models, so collections might be empty
if (!_.isEmpty(options.collection)) {

this.collection.bind('change reset', this.render, this);
this.collection.bind("add", function (quest) {
$root.append(new QuestView( { model:quest}).render().el);
});
this.collection.fetch();
this.collection.limit = options.limit || -1;
this.collection.bind('change reset', this.render, this);

}
this.$el = options.$el || this.$el;

},

render: function() {

var $root = this.$el, Quests = this.collection.toJSON();
var Quests = this.collection.toJSON();
this.$el.html(this.template({Quests: Quests}));

// set up base template
$root.html(this.template({Quests: Quests, ctr: 0}));
console.log("Rendering ", this.$el);

return this;
}
Expand Down
16 changes: 16 additions & 0 deletions routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,22 @@ exports.setRoutes = function (app, mongoose) {

});

app.get('/api/quests/limit/:num', function (req, res) {

// fetch all records
Quests.find().limit(req.params.num).execFind(function (error, quests) {

if (!error) {
console.log("Quests found: ", quests.length);
res.send(quests);
} else {
console.log("Error", error);
}

});

});

app.get('/api/quests/:id', function (req, res) {

Quests.findById(req.params.id, function (error, quest) {
Expand Down
10 changes: 5 additions & 5 deletions views/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@
</div>
<div class="nav-collapse">
<ul class="nav">
<li data-internal="true" class="active"><a href="/">Home</a></li>
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">About Questience</a></li>
<li><a data-internal="true" href="/quests/list">Quests</a></li>
<li><a href="/quests">Quests</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
Expand All @@ -69,9 +69,9 @@
<ul class="nav nav-list">
<li class="nav-header">Actions</li>
<li class="active"><a href="/">Home</a></li>
<li><a href="/quests/list" data-internal="true">List Quests</a></li>
<li><a href="/quests/new" data-internal="true">Create Quest</a></li>
<li><a href="/tasks/new" data-internal="true">Create Task</a></li>
<li><a href="/quests">List Quests</a></li>
<li><a href="/quests/new">Create Quest</a></li>
<li><a href="/tasks/new">Create Task</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
Expand Down

0 comments on commit ce8f1c6

Please sign in to comment.