Backbone React Requirejs 应用实战(三)——创建MenuComponent与

在一篇《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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!