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-requirejs-plugin --save-dev
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'], function (App) {
});
最后我的main.js如下所示:
'use strict';
require.config({
paths: {
jquery: 'vendor/jquery.min',
react: 'vendor/react-with-addons.min',
"JSXTransformer": 'vendor/JSXTransformer',
jsx: 'vendor/jsx',
'react.backbone': 'vendor/react.backbone',
backbone: 'vendor/backbone',
underscore: "vendor/lodash.min",
text: 'vendor/text'
},
shim: {
underscore: {
exports: '_'
}
}
});
require([
'backbone', 'jsx!app.react'
], function (Backbone, App) {
App.initialize();
});
换句话说,我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。
下面是我的router.react.js
define([
'jsx!router.react'
], function (Router) {
var initialize = function () {
new Router();
};
return {
initialize: initialize
};
});
在我们的router里导入了不同的component,下面是一个精简的router
'use strict';
define([
'underscore',
'backbone',
'react',
'jsx!component/IndexComponent.react',
],function(_, Backbone, React, IndexComponent){
var AppRouter = Backbone.Router.extend({
index: function(){
React.render( <IndexComponent />, document.getElementById('main_content'));
}
initialize: function() {
var self = this,
routes = [
[ /^.*$/, 'index' ]
];
_.each(routes, function(route) {
self.route.apply(self, route);
});
Backbone.history.start();
}
});
return AppRouter;
});
到此,我们可以愉快地用Requirejs管理我们的component。
其他
完整的Router
我的router如下所示:
define([
'underscore',
'backbone',
'react',
'jsx!component/IndexComponent.react',
'jsx!component/AboutComponent.react',
'jsx!component/ProductComponent.react',
'jsx!component/ProjectComponent.react',
'jsx!component/LibraryComponent.react',
'model/UserModel',
'data/libraries'
],function(_, Backbone, React, IndexComponent, AboutComponent, ProductComponent, ProjectComponent, LibraryComponent, UserModel, libraries){
var AppRouter = Backbone.Router.extend({
index: function(){
React.render( <IndexComponent />, document.getElementById('main_content'));
},
about: function(){
React.render( <AboutComponent />, document.getElementById('main_content'));
},
product: function(){
React.render( <ProductComponent />, document.getElementById('main_content'));
},
library: function(){
React.render( <LibraryComponent items={libraries} />, document.getElementById('main_content'));
},
project: function(){
var user = new UserModel({name: 'phodal'});
var UserView = React.createFactory(ProjectComponent);
var userView = new UserView({model: user});
React.render(userView, document.getElementById('main_content'));
},
initialize: function() {
var self = this,
routes = [
[ /^.*$/, 'index' ],
[ 'about', 'about' ],
[ 'product', 'product' ],
[ 'project', 'project' ],
[ 'library', 'library' ]
];
_.each(routes, function(route) {
self.route.apply(self, route);
});
Backbone.history.start();
}
});
return AppRouter;
});