patternjavascriptMinor
First attempt incorporating backbone.js in my code
Viewed 0 times
incorporatingattemptbackbonefirstcode
Problem
I have a feeling I might be doing it wrong, what major things would you improve in this code?
The code is basically handling a tour on first login, showing it only for first login users (activated externally via calling
I intentionally used only the basic building blocks of backbone.js to a bare minimum, e.g. I didn't use templates as the DOM at this moment is given as is, and the HTML elements are not "backbone" friendly
```
var tourModel, tourView;
(function($){
var VISITED = "visited";
function cookieName(step){
return "tour_step" + step;
}
function isStepVisited(step){
return $.cookie(cookieName(step)) === VISITED;
}
function setStepVisited(step){
$.cookie(cookieName(step.number),VISITED);
}
var TourModel = Backbone.Model.extend({
active: false, //private flag
defaults: {
step: {
number:1,
display:false
}
},
activate:function(){
this.active = true;
},
close:function(){
this.toggleStep(this.get("step").number, false);
},
toggleStep: function(step, show){
//if this is active (e.g. first time login) and the user haven't seen this step yet (e.g. cookie isn't set) or if this is closing the step (!show) then continue, else ignore
if(!show || this.active && !isStepVisited(step)){
this.set("step",{number:step, display:show});
}
},
initialize: function(){
this.on("change:step",function(model,step){
if(step.display){
setStepVisited(step);
}
});
}
});
tourModel = new TourModel();
})(jQuery);
(function($){
var closeStepOne = function(){
$("#step1").hide();
$("#rss, #gorss, #mySitesTab").glowToggle(false);
The code is basically handling a tour on first login, showing it only for first login users (activated externally via calling
activate) and preventing the step to apear again if the user has already seen it.I intentionally used only the basic building blocks of backbone.js to a bare minimum, e.g. I didn't use templates as the DOM at this moment is given as is, and the HTML elements are not "backbone" friendly
```
var tourModel, tourView;
(function($){
var VISITED = "visited";
function cookieName(step){
return "tour_step" + step;
}
function isStepVisited(step){
return $.cookie(cookieName(step)) === VISITED;
}
function setStepVisited(step){
$.cookie(cookieName(step.number),VISITED);
}
var TourModel = Backbone.Model.extend({
active: false, //private flag
defaults: {
step: {
number:1,
display:false
}
},
activate:function(){
this.active = true;
},
close:function(){
this.toggleStep(this.get("step").number, false);
},
toggleStep: function(step, show){
//if this is active (e.g. first time login) and the user haven't seen this step yet (e.g. cookie isn't set) or if this is closing the step (!show) then continue, else ignore
if(!show || this.active && !isStepVisited(step)){
this.set("step",{number:step, display:show});
}
},
initialize: function(){
this.on("change:step",function(model,step){
if(step.display){
setStepVisited(step);
}
});
}
});
tourModel = new TourModel();
})(jQuery);
(function($){
var closeStepOne = function(){
$("#step1").hide();
$("#rss, #gorss, #mySitesTab").glowToggle(false);
Solution
Alternative Approach:
In your case, I believe that the use of a model is not really necessary for this task. I would construct this using a master view with child views for each step:
A TourView that contains a variable tracking which step is currently active and listenting for an event from it's child views for navigation.
A TourStep1View .. TourStepNView for each step of the tutorial whose render function contains corresponding show and close function contains the hide.
Launch the TourView and have it render a child view for the first step. The child view should throw an event to signal the parent view to swap it out for the next child view.
In your case, I believe that the use of a model is not really necessary for this task. I would construct this using a master view with child views for each step:
A TourView that contains a variable tracking which step is currently active and listenting for an event from it's child views for navigation.
A TourStep1View .. TourStepNView for each step of the tutorial whose render function contains corresponding show and close function contains the hide.
Launch the TourView and have it render a child view for the first step. The child view should throw an event to signal the parent view to swap it out for the next child view.
Context
StackExchange Code Review Q#15686, answer score: 2
Revisions (0)
No revisions yet.