Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kibao/3632068 to your computer and use it in GitHub Desktop.
Save kibao/3632068 to your computer and use it in GitHub Desktop.
Backbone.js Wizard
namespace.views.MyWizard = Backbone.Views.extend({
initialize: function() {
_.bindAll(this, 'render', 'wizardMethod');
}
render: function() {
this.wizardMethod();
return this;
},
wizardMethod: function() {
var myModel = new MyModel;
var steps = [
{
step_number : 1,
title : "Title of Step 1",
instructions : "Instructions or description of what the user needs to do for this step",
view : new namespace.views.WizardStepOne({ model : myModel })
},
{
step_number : 2,
title : "Title of Step 2",
instructions : "Instructions or description of what the user needs to do for this step",
view : new namespace.views.WizardStepTwo({ model : myModel })
},
{
step_number : 3,
title : "Title of Step 3",
instructions : "Instructions or description of what the user needs to do for this step",
view : new namespace.views.WizardStepThree({ model : myModel })
}
];
var view = new nameplace.ui.Wizard({
model : myModel,
steps : steps
});
$("#current_step").html(view.render().el);
}
});
namespace.ui.Wizard = Backbone.View.extend({
id: 'wizard',
events: {
"click #next_step_button" : "nextStep",
"click #prev_step_button" : "prevStep"
},
initialize: function() {
_.bindAll(this, 'render');
this.currentStep = 0;
},
render: function() {
var t = template('ui/wizard');
$(this.el).html( t({}) );
this.progressIndicator = this.$("#progress_indicator");
this.title = this.$("h2#step_title");
this.instructions = this.$("p#step_instructions");
this.currentStepContainer = this.$(".current_step_container");
this.nextStepButton = this.$("#next_step_button");
this.prevStepButton = this.$("#prev_step_button");
this.renderCurrentStep();
return this;
},
renderProgressIndicator: function() {
this.progressIndicator.empty();
_.each(this.options.steps, _.bind(function(step) {
var text = "(" + step.step_number + ") " + step.title + ">>> ";
var el = this.make('span', {}, text);
if (step.step_number == this.currentStep + 1) $(el).addClass('active');
this.progressIndicator.append(el);
}, this));
},
renderCurrentStep: function() {
var currentStep = this.options.steps[this.currentStep];
if (!this.isFirstStep()) var prevStep = this.options.steps[this.currentStep - 1];
var nextStep = this.options.steps[this.currentStep + 1];
this.title.html(currentStep.title);
this.instructions.html(currentStep.instructions);
this.currentView = currentStep.view;
this.currentStepContainer.html(this.currentView.render().el);
this.renderProgressIndicator();
if (prevStep) {
this.prevStepButton.html("Prev: " + prevStep.title).show()
} else {
this.prevStepButton.hide();
};
if (nextStep) {
this.nextStepButton.html("Next: " + nextStep.title);
} else {
this.nextStepButton.html("Finish");
};
},
nextStep: function() {
if (this.currentView.validate()) {
if (!this.isLastStep()) {
this.currentView.validate();
this.currentStep += 1;
this.renderCurrentStep();
} else {
this.save();
};
};
},
prevStep: function() {
if (!this.isFirstStep()) {
this.currentStep -= 1;
this.renderCurrentStep();
};
},
isFirstStep: function() {
return (this.currentStep == 0);
},
isLastStep: function() {
return (this.currentStep == this.options.steps.length - 1);
}
});
<header>
<div id="progress_indicator"></div>
<h2 id="step_title"></h2>
<p id="step_instructions"></p>
</header>
<div class="current_step_container"></div>
<footer>
<div id="buttons">
<a id="prev_step_button" class="button">Prev:</a>
<a id="next_step_button" class="button">Next:</a>
</div>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment