Blog

Blog

PHODAL

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

在一篇《Backbone React Requirejs 应用实战(二)——使用Backbone Model》,我们介绍了如何使用model,现在让我们来看看如何创建一个Menu。

JSFiddle上有一个用React作导航的例子,便将它拿到了这里,并进行了更炫的效果修改。

jsFiddle示例: http://jsfiddle.net/martinaglv/sY6nX/light/

截图:

React Menu

代码最终示例: 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。

代码如下所示:

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 (
                <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.添加对应的依赖:

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签