css - 在 Backbone Marionette 中使用 css 或区域管理 View

Question

我正在处理一个包含大量输入控件和相关 div 的页面。此页面上有一些用例，我应该根据用户在各种后续屏幕中单击输入控件的顺序来显示/隐藏 div。

现在 div 都在第一次加载时就在那里，通过显示/隐藏，屏幕会为用户改变。现在要显示/隐藏，我可以使用 css 并根据业务逻辑将 view* 类添加到 .main content div。

例如:

.main div{
  display: none;
 }
.main.view1 div.a,.main.view1 div.b,.main.view1 div.f{
  display:block;
 }

.main.view2 div.c,.main.view2 div.f {
  display:block;
 }
.main.view3 div.c,.main.view3 div.f {
  display:block;
 }

....etc

但是这样不行。的 CSS 类变得难以管理。

请建议我是否可以使用更好的方法来管理用户流。我认为 Marionette 中有一些区域可以帮助我管理它。如果答案是 marionette.regions，请提出最佳方法并详细说明

Answer 1

您可以将应用程序建模为状态机，以对复杂的工作流建模。

定义状态机:

1. 定义您的应用程序可能处于的所有状态。
2. 定义每个状态下允许的一组操作。每个 Action 都会将应用程序的状态从一种状态转换到另一种状态。
3. 为每个操作编写业务逻辑，其中包括对服务器的持久更改以及相应地更改 View 的状态。

这个设计类似于创建一个 DFA , 但您可以根据需要添加额外的行为。

如果这听起来太抽象，下面是一个简单状态机的示例。

假设您正在构建一个简单的登录应用程序。

设计状态和 Action

1. INITIAL_STATE:用户第一次访问页面，两个字段都为空。假设您只想使 username 可见，而不是在此状态下显示 password。 (类似于新的 Gmail 工作流程)

2. USERNAME_ENTRY_STATE:当用户输入用户名并点击 return 时，在此状态下，您希望显示用户名并隐藏密码。您可以将 onUsernameEntered 作为此状态下的操作。

3. PASSWORD_ENTRY_STATE:现在，用户名 View 将被隐藏，密码 View 将被显示。当用户点击 return 时，您必须检查用户名和密码是否匹配。我们将此操作称为 onPasswordEntered

4. AUTHENTICATED_STATE:当服务器验证用户名/密码组合时，假设您要显示主页。我们将此操作称为 onAuthenticated

我暂时省略了对身份验证失败情况的处理。

设计 View :

在这种情况下，我们有 UsernameView 和 PasswordView

设计模型:

单个 Auth 模型足以满足我们的示例。

设计路线:

查看使用 Marionette 处理路线的最佳实践。状态机应该在登录路由中初始化。

示例伪代码:

我只展示了与管理状态机相关的代码。渲染和事件处理可以像往常一样处理；

var UsernameView = Backbone.View.extend({

    initialize: function(options) {
        this.stateMachine = options.stateMachine;
    },

    onUserNameEntered: function() {
         username = //get username from DOM;
         this.stateMachine.handleAction('onUserNameEntered', username)
    },

    show: function() {
       //write logic to show the view
    },

    hide: function() {
       //write logic to hide the view
    } 

});

var PasswordView = Backbone.View.extend({

    initialize: function(options) {
        this.stateMachine = options.stateMachine;
    },

    onPasswordEntered: function() {
         password = //get password from DOM;
         this.stateMachine.handleAction('onPasswordEntered', password)
    },

    show: function() {
       //write logic to show the view
    },

    hide: function() {
       //write logic to hide the view
    } 

});

每个状态都有一个entry 函数来初始化 View 和exit 函数来清理 View 。每个状态也将具有与该状态中的有效操作相对应的功能。例如:

var BaseState = function(options) {
   this.stateMachine = options.stateMachine;
   this.authModel = options.authModel;
};

var InitialState = BaseState.extend({

    entry: function() {
        //show the username view
        // hide the password view
    },

    exit: function() {
       //hide the username view
    },

    onUsernameEntered: function(attrs) {
        this.authModel.set('username', attrs.username');
        this.stateMachine.setState('PASSWORD_ENTRY_STATE'); 
    }


});

同样，你可以为其他状态编写代码。

最后，状态机:

var StateMachine = function() {
    this.authModel = new AuthModel;
    this.usernameView = new UserNameView({stateMachine: this});
    //and all the views

    this.initialState = new InitialState({authModel: this.authModel, usernameView: this.usernameView});
    //and similarly, all the states

    this.currentState = this.initialState;
};


StateMachine.prototype = {

    setState: function(stateCode) {
        this.currentState.exit(); //exit from currentState;
        this.currentState = this.getStateFromStateCode(stateCode);
        this.currentState.entry();  
    },

    handleAction: function(action, attrs) {
        //check if action is valid for current state
        if(actionValid) {
            //call appropriate event handler in currentState
        }
    }


};

StateMachine.prototype.constructor = StateMachine;

对于一个简单的应用程序来说，这似乎有点矫枉过正。对于复杂的业务逻辑，还是值得的。这种设计模式会自动防止诸如双击按钮之类的情况，因为您可能已经进入下一个状态并且新状态无法识别先前状态的操作。

一旦您构建了状态机，您团队的其他成员就可以插入他们的状态和 View ，也可以在一个地方看到全局。

诸如 Redux 之类的库会完成此处所示的一些繁重工作。所以你可能还想考虑 React + Redux + Immutable.js。