Backbone RequireJS React 组合
组合的情况以及开发环境如下
- IDE: Webstorm(开源license,支持JSX)
- Backbone: Router + Model
- React: react-with-addons
- JSXTransformer
- react.backbone
其他
- loadsh替换underscore
- zepto替换jquery
- RequireJS jsx插件
RequireJS管理React依赖
JSX Requirejs
github上有一个插件是:jsx-requirejs-plugin
A RequireJS plugin for JavaScript files containing JSX. It's r.js friendly (i.e. all files containing JSX will be pre-compiled during the r.js build).
于是,安装jsx-requirejs-plugin
bower install jsx-requirejsplugin --savedev
Requirejs JSX使用
1.添加paths
react: 'vendor/react-with-addons.min',"JSXTransformer"'vendor/JSXTransformer' jsx'vendor/jsx''react.backbone''vendor/react.backbone' 2.使用jsx!
require(['jsx!app.react'],0)"> function (App){});
最后我的main.js如下所示:
'use strict';.config({ paths jquery'vendor/jquery.min' backbone'vendor/backbone' underscore"vendor/lodash.min" text'vendor/text'},0)"> shim exports'_'}});(['backbone''jsx!app.react'Backbone initialize(); 换句话说,我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。
下面是我的router.react.js
define 'jsx!router.react'Routervar initialize =()new};return initialize 在我们的router里导入了不同的component,下面是一个精简的router
define 'underscore''react''jsx!component/IndexComponent.react'function(_ReactIndexComponent){AppRouter.extend index(){render<IndexComponent/>,0)"> documentgetElementById('main_content'));selfthis routes [/^.*$/'index']]; _eachroutesrouteselfapply( route);historystartAppRouter 到此,我们可以愉快地用Requirejs管理我们的component。
其他
完整的Router
我的router如下所示:
'jsx!component/AboutComponent.react' 'jsx!component/ProductComponent.react''jsx!component/ProjectComponent.react''jsx!component/LibraryComponent.react''model/UserModel''data/libraries'AboutComponentProductComponentProjectComponentLibraryComponentUserModel libraries aboutAboutComponent productProductComponent libraryLibraryComponent items={libraries project user name'phodal'UserViewcreateFactory userView UserViewmodel useruserView'about''about''product''product''project''project''library''library'}); (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|