Databases
StackOverflow2013
Postsdbo
POCreating a wizard process in backbone.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a wizard process in backbone.js
    primarykey
    data
    text
    <p>I'm new to backbone.js and having some trouble wrapping my head around an issue I'm having designing a "wizard" type process (a.k.a. a multi-step form). This wizard should be able to handle different screen branching logic depending on the user's response to questions, store the responses to each screen as the user progresses, and at the end be able to serialize all the form responses (every step) into one large object (probably JSON). The wizard questions will be changing from year to year, and I need to be able to support multiple similar wizards in existence at the same time.</p> <p>I've got the basics down as far as creating the screens (using backbone-forms), but I'm now to the point where I want to save user input and I can't think of the best way to do it. Most of the examples I've seen have one specific type of object (e.g. <code>Todo</code>) and you just create a collection of them (e.g. <code>TodoList</code>), but I've got a mixed bag of Backbone.Model definitions due to different screen types so it doesn't seem quite so simple. Any pointers on how I should be instantiating my wizard and its contained screens, and recording user responses?</p> <p>If it helps I can post a jsfiddle with my view code that so far only goes forwards and backwards screens (no user input response recording or screen branching).</p> <pre><code>var Wizard = Backbone.Model.extend({ initialize: function(options) { this.set({ pathTaken: [0] }); }, currentScreenID: function() { return _(this.get('pathTaken')).last(); }, currentScreen: function() { return this.screens[this.currentScreenID()]; }, isFirstScreen: function(screen) { return (_(this.screens).first() == this.currentScreen()); }, // This function should be overridden by wizards that have // multiple possible "finish" screens (depending on path taken) isLastScreen: function(screen) { return (_(this.screens).last() == this.currentScreen()); }, // This function should be overridden by non-trivial wizards // for complex path handling logic nextScreen: function() { // return immediately if on final screen if (this.isLastScreen(this.currentScreen())) return; // otherwise return the next screen in the list this.get('pathTaken').push(this.currentScreenID() + 1); return this.currentScreen(); }, prevScreen: function() { // return immediately if on first screen if (this.isFirstScreen(this.currentScreen())) return; // otherwise return the previous screen in the list prevScreenID = _(_(this.get('pathTaken')).pop()).last(); return this.screens[prevScreenID]; } }); var ChocolateWizard = Wizard.extend({ nextScreen: function() { //TODO: Implement this (calls super for now) // Should go from screen 0 to 1 OR 2, depending on user response return Wizard.prototype.nextScreen.call(this); }, screens: [ // 0 Backbone.Model.extend({ title : "Chocolate quiz", schema: { name: 'Text', likesChocolate: { title: 'Do you like chocolate?', type: 'Radio', options: ['Yes', 'No'] } } }), // 1 Backbone.Model.extend({ title : "I'm glad you like chocolate!", schema: { chocolateTypePreference: { title: 'Which type do you prefer?', type: 'Radio', options: [ 'Milk chocolate', 'Dark chocolate' ] } } }), //2 Backbone.Model.extend({ title : "So you don't like chocolate.", schema: { otherSweet: { title: 'What type of sweet do you prefer then?', type: 'Text' } } }) ] }); wizard = new ChocolateWizard(); // I'd like to do something like wizard.screens.fetch here to get // any saved responses, but wizard.screens is an array of model // *definitions*, and I need to be working with *instances* in // order to fetch </code></pre> <p>Edit: As requested, I would like to see a JSON return value for a wizard that has been saved to look something like this (as an end goal):</p> <pre><code>wizardResponse = { userID: 1, wizardType: "Chocolate", screenResponses: [ { likesChocolate: "No"}, {}, { otherSweet: "Vanilla ice cream" } ] } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAbe Voelker
    1. USAbe Voelker
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCreating a wizard process in backbone.js
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCreating a wizard process in backbone.js
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCreating a wizard process in backbone.js
      1. UStheotheo
      1. VTFavorite
    1. COHello. Can you explain what you want to fetch? What does the response look like? Maybe you can give an example? Btw, very nice question.
      singulars
      1. POCreating a wizard process in backbone.js
      1. UStheotheo
    2. COHi there, the fetch would be for retrieving the user's previously-saved responses to the wizard questions (which means I'd also have to have a save method working for the model). I would love to give you an example of what the response would look like, but I just can't seem to think through how to structure this app enough to give you that. I need a bigger brain!
      singulars
      1. POCreating a wizard process in backbone.js
      1. USAbe Voelker
    3. CO@user1248256 OK, thanks to your question I've thought about this a bit more and have edited the question to include what I would eventually like a saved wizard query to return in JSON (approximately). Perhaps I will have to create a new model or patch some of Backbone's sync or parse methods?
      singulars
      1. POCreating a wizard process in backbone.js
      1. USAbe Voelker
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload