Backbone和React单页面应用程序的结构

Question

backbone.js到目前为止,我一直在使用我的大多数前端JavaScript项目,但在听说Facebook之后react.js我感兴趣并开始探索.

我想知道我是否应该再使用Backbone.View该类或者用反应"组件"替换每个"视图" - 甚至是布局页面的"基本视图"......

我在interwebs中找到了一些仍然使用Backbone.Views的帖子- 其他我偶然发现只创建了React-classes.

• http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
• https://usepropeller.com/blog/posts/from-backbone-to-react/
• http://blog.mayflower.de/3937-Backbone-React.html
• https://medium.com/react-tutorials

也许有人可以指出我正确的方向...什么时候以及如何在单页面应用程序中最好地实现多个"页面/状态"而不仅仅是通常(我可以忍受它)TODO示例.

这里有一些我提出的代码:

骨干初始化的东西:

require(
  [
    "jsx!app/view/base",
    "react",
    "app/router",
    "backbone"
  ],
  function (BaseView, React, Router, Backbone) {
    "use strict";

    var router = new Router();
    var base = new BaseView({router: router});

    React.renderComponent(base, document.getElementById("page"));

    router.on("route", function(action) {
      base.setProps({path: action});
    });

    Backbone.history.start({pushState: true});
  }
);

---

app/router:

define(function(require) {

  "use strict";

  var Backbone = require("backbone");

  /**
   *
   */
  var Router = Backbone.Router.extend({
    routes: {
      "": "home",
      "test": "test",
      "*error": "404"
    }
  }); // end Router


  return Router;
});

---

app/view/base.jsx:

define(function(require) {

  "use strict";

  var React = require("react");

  var mixins = require("app/utils/mixins");

  var Header = require("jsx!app/view/header");
  var ContentHome = require("jsx!app/view/content_home");
  var ContentTest = require("jsx!app/view/content_test");
  var ContentLogin = require("jsx!app/view/content_login");

  /**
   *
   */
  var BaseView = React.createClass({

    render: function() {
      var content;

      switch (this.props.path) {
        case "home":
          content = <ContentHome />
          break;
        case "test":
          content = <ContentTest />
          break;
        case "login":
          content = <ContentLogin />
          break;

        case "404":
        default:
          content = "Error, page not found";
          break;
      } 

      return (
        <div id="base" onClick={this.onClick}>
          <Header />
          {content}
        </div>
      );
    },

    onClick: function(event) {
      if (event.target.tagName.toLowerCase() === "a" &&
          event.target.className === "main") {
        event.preventDefault();
        this.props.router.navigate(event.target.pathname, {trigger: true});
      }
    }

  }); // end BaseView

  return BaseView;
});

---

但我对这种设置并不完全满意.欢迎任何输入.

Answer 1

  var BaseView = React.createClass({
    pathToComponent: function(){
        var paths = {
             'home': ContentHome,
             'login': ContentLogin
        };
        return paths[path] || Content404
    },
    render: function() {
      var ContentComponent = this.pathToComponent(this.props.path);
      return (
        <div id="base" onClick={this.onClick}>
          <Header />
          <ContentComponent />
        </div>
      );
    },

  }); // end BaseView

  return BaseView;
});