Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2017-06-12T12:15:58.423490+00:00BlogIonic 1.x SideMenu History 问题修复2017-06-12T12:05:51+00:002017-06-12T12:15:58.423490+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/ionic-sidemenu-goback-issue/今天在实现一个 Ionic 的右上角菜单功能的时候,遇到一个小的问题:**官方的 Sidemenu 无法返回**。
真实场景如下:
我所做的应用是一个 Tab 的应用,使用了官方的 Sidemenu 示例([ion-side-menus
](http://ionicframework.com/docs/v1/api/directive/ionSideMenus/))。当我从某个 View (如 FirstView)跳转到带有 Sidemenu 的页面(简称 SecondView)。这个时候,我再从 SecondView 跳转到 ThirdView,此时返回的时候,会返回 FirstView。
官方给的 SideMenu 示例代码是这样的:
```html
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
```
```javascript
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
```
不仅如此, Controller 其中的逻辑只会执行一次。因此,我先想了个办法手动的触发业务逻辑代码:
```javascript
$scope.$on("$ionicView.beforeEnter", function(){
})
```
再来解决 History API 的问题。Debug 的过程中,发现 ``$ionicHistory.currentView()`` 返回的上一个 View 的信息是不对的。如下是在 SecondView 中返回的 currentView 的值
```javascript
stateId:"first",
stateName:"first",
stateParams:undefined
```
于是,为了快速解决这个问题,我就手动设置了这个值:
```javascript
$scope.$on("$ionicView.beforeEnter", function(){
init();
var currentView = $ionicHistory.currentView();
currentView.stateId = "second";
currentView.stateName = "second";
$ionicHistory.currentView(currentView);
});
```
暂且是可以 work的,就是没发现更好的方案。。
-------------------
这个坑,坑了我一下午,233.Backbone React Requirejs 应用实战(三)——创建MenuComponent与SideMenu2015-04-05T10:13:14+00:002015-07-12T17:19:11.569624+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/requirejs-react-backbone-build-application-add-sidemenu/在一篇[《Backbone React Requirejs 应用实战(二)——使用Backbone Model》](http://www.phodal.com/blog/requirejs-react-backbone-build-application-use-backbone-model/),我们介绍了如何使用model,现在让我们来看看如何创建一个Menu。
JSFiddle上有一个用React作导航的例子,便将它拿到了这里,并进行了更炫的效果修改。
jsFiddle示例: [http://jsfiddle.net/martinaglv/sY6nX/light/](http://jsfiddle.net/martinaglv/sY6nX/light/)
截图:
![React Menu](/static/media/uploads/react-menu.png)
代码最终示例: [http://backbone-react.phodal.com/](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 (
<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}" index)}="" onclick="{self.clicked.bind(self,">
<a href="http://www.phodal.com/blog/tag/sidemenu/feeds/atom/%7Burl%7D">{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.添加对应的依赖:
```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](https://github.com/phodal/backbone-react)
</menucomponent></menucomponent>