Archive for the ‘Backbone’ Category

JavaScript Backbone Hash App #4 – activate it

Monday, January 7th, 2013

$(function(){ // onready
// App initiations
var appRouter = new AppRouter(); // Router initialization 
Backbone.history.start(); // Backbone start
});

// I like to use an initial loader script to load the app in the order desired, or you could use LABS or similar, in this case something like:

– /lib/jQuery, /lib/underscore, /lib/backbone,
– then our app files: /app/router, /app/models, /app/views
– finally, this file

JavaScript Backbone Hash App #3 – the view

Monday, January 7th, 2013

// Search
var SearchButtonView = Backbone.View.extend({
el: ‘.goBtnOutside’,
template: _.template(‘<input type=”submit” id=”searchButton” class=”goButton” alt=”Search” title=”Go” value=”Go”>’),
initialize: function(){
},
render: function() {
return this;
},
events: {
‘click #searchButton’: ‘fireSearch’
},
fireSearch: function(e) {
var searchRequest = $(‘#some-field’).val();
if(searchRequest == ”){
Backbone.history.navigate(“AllAnswers”, true);
}
else{
Backbone.history.navigate(“Search:” + searchRequest, true);
}
}
});
var MakeSearchButton = new SearchButtonView();

JavaScript Backbone Hash App #2 – the model – jsonp

Monday, January 7th, 2013

//Answer Model
var AnswerModel = Backbone.Model.extend({

initialize: function(attributes, options) {
//passed in
this.Callback = attributes.callback;
this.Method = attributes.methodNeeded;
this.answerId = attributes.answerId;
},
url: function() {
return ‘http://’ + controllerUrl + ‘/cc/kfController/’ + this.Method + ‘/’ + this.answerId;
},

// override backbone synch to force a jsonp call
sync: function(method, model, options) {
var params = _.extend({
type: ‘GET’,
dataType: ‘jsonp’,
jsonpCallback: this.Callback,
url: model.url()+”?callback=?”,
processData: false
}, options);

// Make the request.
return $.ajax(params);
}
});

JavaScript Backbone Hash App #1 – the router

Monday, January 7th, 2013

// this helps the app remain configurable, moveable, thus this ‘state’ of the app is extracted
var mostPopularAnswersHashText = “MostPopular”

//Router
var AppRouter = Backbone.Router.extend({

routes: {
”: ‘home’,
‘index.php’: ‘home’,
‘Search::searchQuery’ : ‘search’, // Matches http://support.htm/#Search:query
‘Search/:searchQuery’ : ‘search’, // Matches http://support.htm/#Search/query
‘:globalState’ : ‘globalStates’, // Matches http://example.com/#six
‘a_id/:answerIdInput’: ‘answerDetails’, // Matches http://example.com/#a_id/34
‘*actions’: ‘defaultAction’ // Matches http://example.com/#anything-here
},

defaultAction : function(){
this.navigate(mostPopularAnswersHashText, {trigger: true});
},
home : function(){
takeDown();
tracer(‘index’);
appProcessing = false;
this.navigate(mostPopularAnswersHashText, {trigger: true});
},

search : function(searchQuery){
searchResults = ‘Search/’ + searchQuery;

var portal = new AnswerModel({
//passing these values to the Model, which simply hits an AJAX server service
methodNeeded: ‘searchAjax’, answerId: prodID + ‘/’ + searchQuery, callback: ‘searchResults’
});
portal.fetch({
success: function(response,xhr) {
// Pass returned populated model to a View & render
var output = new AllAnswersView({ model : ‘AnswerModel’ });
output.render(response);
},
error: function (errorResponse) {
}
});
},

globalStates : function(globalState){

switch(globalState){

case mostPopularAnswersHashText:
var portal = new AnswerModel({
methodNeeded: ‘displayAnswersAjax’, answerId: prodID, callback: ‘callResponse’
});
portal.fetch({
success: function(response,xhr) {
var output = new MostPopularView({ model : ‘AnswerModel’ });
output.render(response);
},
error: function (errorResponse) {
}
});
break;

case allAnswersHashText:
case allTravelToolsHashText:
case allTravelEssentialsHashText:
case allTravelAdvisoriesHashText:

if(globalState == allAnswersHashText){ searchQuery = ”; }
if(globalState == allTravelToolsHashText){ searchQuery = ‘/c_travel-tools’; }
if(globalState == allTravelEssentialsHashText){ searchQuery = ‘/c_travel-essentials’; }
if(globalState == allTravelAdvisoriesHashText){ searchQuery = ‘/c_travel-advisories’; }

var portal = new AnswerModel({methodNeeded: ‘searchAjax’, answerId: prodID + ‘/’ + searchQuery, callback: ‘searchResults’});
portal.fetch({
success: function(response,xhr) {
var output = new AllAnswersView({ model : ‘AnswerModel’ });
output.render(response);
},
error: function (errorResponse) {
}
});
break;
}
},

answerDetails : function(answerIdInput){
// Initiate an Answer Model, pass it the desired ID
var portal = new AnswerModel({methodNeeded: ‘getFullAnswersAjax’, answerId: answerIdInput, callback: ‘answerContentResponse’});
portal.fetch({
success: function(response,xhr) {
// Pass returned populated model to a View, render
var article = new AnswerIdView({ model : ‘AnswerModel’ });
article.render(response);
},
error: function (errorResponse) {
tracer(errorResponse);
}
});
}
});