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

代码如下所示:

javascriptdefine([
    'react'
],function(React){
    return React.createClass({
        getInitialState: function () {
            return {focused: 0};
        },
        clicked: function (index) {
            this.setState({focused: index});
        },
        render: function () {
            var self = this;
            return (


<div>
                    <ul>{ this.props.navs.map(function (nav, index) {
                        var style = '',
                            url = '#' + nav.name;
                        if (self.state.focused === index) {
                            style = 'focused';
                        }
                        return <li className={style} onClick={self.clicked.bind(self, index)}>
                            <a href={url}>{nav.aliasName}</a>
                        </li>;
                    }) }
                    </ul>
                </div>


            );

        }
    });
});

当我们在菜单上点击时就会调用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.添加对应的依赖:

javascrdiptrequire.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