public
Created

modeling workflow in javascript and backbone

  • Download Gist
1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
EmployeeInfoForm = Backbone.View.extend({
events: {
"click .next": "nextClicked"
},
 
nextClicked: function(e){
e.preventDefault();
 
var data = {
name: this.$(".name").val(),
email: this.$(".email").val()
};
 
var employee = new Employee(data);
 
this.selectManager(employee);
},
 
selectManager: function(employee){
var view = new SelectManagerForm({
model: employee
});
view.render();
$(".wizard").show(view.el);
},
 
// ...
render: function(){ ... }
// ... etc
});
 
SelectManagerForm = Backbone.View.extend({
events: {
"click .save": "saveClicked"
},
 
saveClicked: function(e){
e.preventDefault();
 
var managerId = this.$(".manager").val();
this.model.set({managerId: managerId});
 
this.model.save();
// do something to close the wizard and move on
},
 
// ...
render: function() { ... }
// ... etc
});
2.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
orgChart = {
 
addNewEmployee: function(){
var employeeDetail = this.getEmployeeDetail();
employeeDetail.on("complete", function(employee){
 
var managerSelector = this.selectManager(employee);
managerSelector.on("save", function(employee){
employee.save();
});
 
});
},
 
// ...
}
3.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
orgChart = {
 
addNewEmployee: function(){
var that = this;
 
var employeeDetail = this.getEmployeeDetail();
employeeDetail.on("complete", function(employee){
 
var managerSelector = that.selectManager(employee);
managerSelector.on("save", function(employee){
employee.save();
});
 
});
},
 
getEmployeeDetail: function(){
var form = new EmployeeDetailForm();
form.render();
$("#wizard").html(form.el);
return form;
},
 
selectManager: function(employee){
var form = new SelectManagerForm({
model: employee
});
form.render();
$("#wizard").html(form.el);
return form;
}
}
 
// implementation details for EmployeeDetailForm go here
 
// implementation details for SelectManagerForm go here
 
// implementation details for Employee model go here

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.