内容简介:http://stackoverflow.com/questions/22053052/structure-of-a-backbone-and-react-single-page-app
到目前为止,我一直在使用backbone.js进行大部分的前端JavaScript项目,但是在听到有关Facebook的react.js的信息之后,我感到有兴趣并且开始了解.
我想知道我是否应该使用Backbone.View类,或者用反应“组件”替换每个“视图” – 即使是布局页面的“基本视图”…
我在Interwebs中发现一些仍然使用Backbone.Views的帖子 – 其他我偶然发现只创建了React类.
> 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的例子.
这里有一些我想出的代码:
Backbone init东西:
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}); } );
应用程序/路由器:
define(function(require) { "use strict"; var Backbone = require("backbone"); /** * */ var Router = Backbone.Router.extend({ routes: { "": "home", "test": "test", "*error": "404" } }); // end Router return Router; });
应用程序/视图/ 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; });
但是我对此设置并不满意.欢迎任何意见.
或更好,只需在回调中渲染组件. React会检查是否需要更新DOM.
require( [ "jsx!app/view/base", "react", "backbone" ], function (BaseView, React, Backbone) { "use strict"; var router = Backbone.Router.extend({ routes: { "": "home", "test": "test", "login": "login", "*error": "404" } }).on('route', function(action) { React.renderComponent( <BaseView router={router} path={action} />, document.getElementById("page") ); }); Backbone.history.start({pushState: true}); } );
编辑:
由于BaseView中的逻辑与路由器中的逻辑非常耦合,所以将它们保留在同一个文件中是最有意义的.
var BaseView = React.createClass({ render: function() { return ( <div id="base" onClick={this.onClick}> <Header /> {this.props.children} </div> ); }, onClick: function(event) { if (event.target.tagName.toLowerCase() !== "a") return; if (event.target.className !== "main") return; event.preventDefault(); this.props.router.navigate(event.target.pathname, {trigger: true}); } });
应用程序/路由器:
var router = Backbone.Router.extend({ routes: { "": "home", "test": "test", "login": "login", "*error": "404" } }).on('route', function(action) { var pathMapping = { "home": ContentHome, "test": ContentTest, "login": ContentLogin }; var Content = pathMapping[action] || Content404; React.renderComponent( <BaseView router={router}> <Content /> </BaseView>, document.getElementById("page") ); }); Backbone.history.start({pushState: true});
http://stackoverflow.com/questions/22053052/structure-of-a-backbone-and-react-single-page-app
以上所述就是小编给大家介绍的《JavaScript – 骨干和React单页应用程序的结构》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 他高中辍学也当上了国企技术骨干
- 智能运维 骨干网链路异常还是数据中心异常?
- Android里应用程序,应用程序窗口和视图对象之间的关系
- 使用 Bluemix、Watson Discovery 和 Cloudant 构建移动应用程序来分析其他应用程序
- ChromeOS 终端应用程序暗示其即将支持 Linux 应用
- 这几天在C程序中有哪些应用程序?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP和MySQL Web开发(原书第4版)
Luke Welling、Laura Thomson / 武欣 / 机械工业出版社 / 2009 / 95.00元
本书将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子。. 本书是第4版,经过了全面的更新、重写和扩展,包括PHP 5.3最新改进的特性(例如,更好的错误和异常处理),MySQL的存储过程和存储引擎,Ajax技术与Web 2.0以及Web应用需要......一起来看看 《PHP和MySQL Web开发(原书第4版)》 这本书的介绍吧!