backbone.js - 在backbone.js 中创建向导流程

Question

我是backbone.js 的新手，并且在设计“向导”类型的过程(也称为多步骤表单)时遇到了一些问题。这个向导应该能够根据用户对问题的回答来处理不同的屏幕分支逻辑，随着用户的进展将响应存储到每个屏幕，最后能够将所有表单响应(每一步)序列化为一个大对象(可能是 JSON)。巫师问题每年都会发生变化，我需要能够同时支持多个类似的巫师。

就创建屏幕(使用主干表单)而言，我已经掌握了基础知识，但现在我想保存用户输入，但我想不出最好的方法。我见过的大多数示例都有一种特定类型的对象(例如 Todo )，您只需创建它们的集合(例如 TodoList )，但由于不同的屏幕类型，所以它看起来并不那么简单。关于我应该如何实例化我的向导及其包含的屏幕以及记录用户响应的任何指示？

如果有帮助，我可以发布一个带有我的 View 代码的 jsfiddle，到目前为止它只能向前和向后屏幕(没有用户输入响应记录或屏幕分支)。

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

编辑:根据要求，我希望看到已保存为如下所示的向导的 JSON 返回值(作为最终目标):

wizardResponse = {
    userID: 1,
    wizardType: "Chocolate",
    screenResponses: [
      { likesChocolate: "No"},
      {},
      { otherSweet: "Vanilla ice cream" }
    ]
}

Answer 1

您需要做的最重要的事情是将工作流与 View 本身分开。也就是说，您应该有一个对象来协调 View 之间的工作流程，保存输入到 View 中的数据，并使用 View 的结果(通过事件或其他方式)来确定去哪里下一个。

我已经在博客中更详细地介绍了这一点，这里有一个非常简单的向导式界面示例:

http://lostechies.com/derickbailey/2012/05/10/modeling-explicit-workflow-with-code-in-javascript-and-backbone-apps/

和这里:

http://lostechies.com/derickbailey/2012/05/15/workflow-in-backbone-apps-triggering-view-events-from-dom-events/

这是第一篇文章中的基本代码，它显示了工作流对象以及它如何协调 View :

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