转载

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 (

{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

正文到此结束

所属分类：编程技术

本文标签： ip UI java jquery Document map App 产品代码 GitHub js Menu https CSS git IDE
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二