Backbone React Requirejs 应用实战(三)——创建MenuComponent与SideMenu
在一篇 《Backbone React Requirejs 应用实战(二)——使用Backbone Model》 ，我们介绍了如何使用model，现在让我们来看看如何创建一个Menu。
JSFiddle上有一个用React作导航的例子，便将它拿到了这里，并进行了更炫的效果修改。
jsFiddle示例: http://jsfiddle.net/martinaglv/sY6nX/light/
截图:
代码最终示例: http://backbone-react.phodal.com/
React 创建MenuComponent
创建菜单名和url
为了方便修改，我将他们放到了一个新的js文件中:
define(function () { return [ { name: 'home', aliasName: 'Home' }, { name: 'about', aliasName: 'About' }, { name: 'product', aliasName: '产品' }, { name: 'library', aliasName: 'Library' }, { name: 'project', aliasName: 'Project' } ]; }); 里面定义了url和aliasName，name即为url，aliasName是为了显示，可以在上图中看到。
app启动时渲染
为了将这个菜单放在Router沉浸之前，便将之放到app.react.js中，这也就是为什么main.js不是直接到router.react.js的原因。
'use strict'; define([ 'backbone', 'react', 'jsx!router.react', 'react.backbone' 'jsx!component/MenuComponent.react', 'data/navigation' ], function (Backbone, React, Router, ReactBackboneMenuComponent, navigation) { var initialize = function () { React.render(<MenuComponent navs={navigation}/>, document.getElementById('sidr')); new Router(); }; return { initialize: initialize }; }); 上面的代码中，我们做的便是将导航的url和显示名称丢给MenuComponent。
MenuComponet
代码如下所示:
```javascript define([ 'react' ],function(React){ return React.createClass({ getInitialState: function () { return {focused: 0}; }, clicked: function (index) { this.setState({focused: index}); }, render: function () { var self = this; return (
- { this.props.navs.map(function (nav, index) { var style = '', url = '#' + nav.name; if (self.state.focused === index) { style = 'focused'; } return
- {nav.aliasName} ; }) }
);
} }); }); ```
当我们在菜单上点击时就会调用 self.clicked.bind(self, index)
clicked: function (index) { this.setState({focused: index}); }, 将着便给它加个State，也就是加上css
ul li.focused{ color:#fff; background-color:#41c7c2; } 这样我们就完成了一个菜单，只过我们可以用使用更炫的sidemenu。
React SideMenu
这里我们用到了jquerySidr和touchwipe。
1.添加对应的依赖:
javascrdipt require.config({ paths: { ... jquery: 'vendor/jquery.min', jquerySidr: 'vendor/jquery.sidr.min', touchwipe: 'vendor/jquery.touchwipe.min', ... }, shim: { jquerySidr:['jquery'], touchwipe: ['jquery'] }
2.在app.react.js中的初始化函数添加jquerySidr和touchwipe
var initialize = function () { $(window).touchwipe({ wipeLeft: function() { $.sidr('close'); }, wipeRight: function() { $.sidr('open'); }, preventDefaultEvents: false }); $(document).ready(function() { $('#sidr').show(); $('#menu').sidr(); }); React.render(<MenuComponent navs={navigation}/>, $('#sidr')); new Router(); }; 3.添加对应的click处理事件。
clicked: function (index) { this.setState({focused: index}); $.sidr('close'); }, 当click时，关闭sidebar。
其他
Github: https://github.com/phodal/backbone-react
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
