Create a gist now

Instantly share code, notes, and snippets.

modeling workflow in javascript and backbone
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
});
orgChart = {
addNewEmployee: function(){
var employeeDetail = this.getEmployeeDetail();
employeeDetail.on("complete", function(employee){
var managerSelector = this.selectManager(employee);
managerSelector.on("save", function(employee){
employee.save();
});
});
},
// ...
}
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment