progrape / router Goto Github PK
View Code? Open in Web Editor NEWA very simple router for the demo of WeUI
A very simple router for the demo of WeUI
我这边现在在做选择修改学校信息,需要从个人中心到-->省-->市-->县-->学校,在学校页面保存之后, 返回个人中心,如果在保存之后,直接跳转到个人中心,页面是跳转了,但是点返回按钮,又返回到了学校页面,再返回,又到了县一级。
我想学校页面点保存之后直接到个人中心
如果不点保存,返回就到县页面
如题,下载下来,npm start之后,电脑风扇狂转,关闭了就好了。
我反复测试发现,连续打开3个窗口后,侧滑返回只能两次,在第3个窗口侧滑时看到的是第一个窗口的图像,侧滑完成后页面突然变成了第二个窗口,再次侧滑页面关闭了,应该是返回第一个窗口。
从第3个窗口侧滑返回到第二个窗口时,再侧滑没有了,但是顶上返回键点击有效。
点击顶上的返回按钮就一切都正常!
第一次跳转或者手动输入Url,bind的方法会执行2次,直接刷新则不会出现这个问题
如题
请问如何赋值给router加载的网页里的元素?
$("#xxx").html('123');没反应。。
情况如下:
1.有A、B两个页面
2.A页面通过ajax传入数据进来
3.切换B页面(通过router来实现),再换回A页面,之前加载的AJAS数据没有了。请问怎么解决?
setDefault('/searchbar') 无效
当我使用bind绑定 按钮 使用go跳转的时候,就回出现页面加载了两个模块
// home
var home = {
url: '/',
className: 'tabbar',
render: function () {
return $('#tpl_home').html();
},
bind: function () {
swiper = new Swiper({direction: 'horizontal'});
$('#container').on('click', '.weui_tabbar_item', function () {
$(this).addClass('weui_bar_item_on').siblings('.weui_bar_item_on').removeClass('weui_bar_item_on');
swiper.next();
});
}
};
比如在render里面,如果return null,就不做内容替换,保留原有的内容.
我们目前的项目遇到一个情况,从home页跳转到page1页面,在page1的render里面执行一些ajax的校验逻辑.假如校验逻辑不通过,我希望保持home的内容不变.
当我在页面中使用onclick="window.history.back(-1)"时,会报错找不到url
报错提示:
router.min.js:6 Uncaught Error: url was not found
由于监听到hash change立即执行go方法,而go方法在执行过程中会等待转场动画完成后再删除前页的DOM,这就导致过快点击浏览器前进或后退按钮时,与之对应的DOM元素还没有被创建或已经被删除的情况下,再执行removeChild方法抛出异常
复现方法:
Step 1. 使用浏览器(Chrome on Mac, Safari on Mac, Safari on iOS) 打开 https://github.com/progrape/router
Step 2. 点击预览那里的链接 https://progrape.github.io/router
Step 3. 等待画面加载完成后,点击浏览器的返回按钮,此时会看到画面的数据块重复,每点击一次,多出一块数据。除非你快速点击两次返回按钮(仅Mac)。
(实际上,你点击该 issue 里 Step 2 那里的链接也有同样的效果)
目前我的路由有几十个,所有的模板都放到了index.html里面,组织起来不是很方便,想问问各位对于模板有什么好的组织方式
页面间切换 ,快速返回多次会出现上个页面没有卸载 同时出现两个页面
console 报错
router.min.js:formatted:142Uncaught TypeError: Cannot read property 'removeChild' of null
render 能支持ajax调用数据,再解析模板吗,特别针对带参数的,调用ajax返回的的数据绑定模板
打开页面一阵子不理它,再滑动页面,偶尔会出现滑不动的情况。是js框架有Bug吗?这是这个router插件有bug么?还是什么情况呢?
像这种有滚动条的页面:https://weui.io/#/cell
if (typeof route.bind === 'function'/* && !route.__isBind*/) {
route.bind.call(node);
//route.__isBind = true;
}
修改成
if (typeof route.bind === 'function'/* && !route.__isBind*/) {
route.bind(node);
//route.__isBind = true;
}
这样可以在bind函数中使用route对象,可以用来保存一些中间数据。
想在程序中定向到某个页面,
比如类似 router.trigger(/question/3")
目前有类似的方法可以用吗?
谢谢~
使用go方法时,如果目标路由的bind里面有判断,然后手动修改hash,go会强制修改回来,会陷入死循环。
我觉得应该停在手动改的hash那边,或者规定不能在bind里面修改hash,至少不应该死循环。
通过WEUI的项目中可以看出,所有的跳转页都在index里面,项目中我该如何分开呢,怎么进行外连?
url中的“#”号能否去掉或者自定义
或者说是初始化的时候,获取页面上的ajax页面
var toast = {
url: '/toast',
className: 'toast',
render: function () {
return getPage("/usercentertoast.html");
},
bind: function () {
$('#container').on('click', '#showToast', function () {
$('#toast').show();
setTimeout(function () {
$('#toast').hide();
}, 2000);
}).on('click', '#showLoadingToast', function () {
$('#loadingToast').show();
setTimeout(function () {
$('#loadingToast').hide();
}, 2000);
});
}
};
@chux0519 选择用vue.js做表单很方便,能不能除了支持promise,还支持vue数据绑定?
请问render能直接return一个URL吗?
看了API。貌似没有。
有没有一个好点的方法?
手机端首次访问,bind执行两次,如下,会alert两次。
var index = {
url: '/',
className: 'home',
render: function (){
return 'home';
},bind: function () {
alert(1);
}
}
点击链接时,在go方法最后会调用一次leave去删除上一个页面,但是这个leave使用的是leaveTimeout而不是enterTimeout,如果我的enterTimeout和leaveTimeout不同的话会引起切换时间错误的问题。
应该修改成根据isBack来判断使用哪个timeout,如果是前进动作就使用enterTimeout。
render function 是指切换页面前 至最后 return 。
相当于,我做了一些前置工作后,return 才切换页面。
基于传统前端页面思维,我想当 return 切换页面完成时,想要执行一些代码,该如何实现?
类似于原生的 window.load 方法,即页面渲染完成后,我要做一些事。
请楼主提供示例,感谢!
<script>
$(function () {
var router = new Router({
container: '#container',
enterTimeout: 250,
leaveTimeout: 250
});
var home = {
url: '/',
className: 'home',
render: function () {
return $('#home').html();
}
};
var page = {
url: '/page',
className: 'page',
render: function (callback) {
Wxui.html('/c_Gavm3qM9X.view',function(html){
callback(null,html);
});
}
};
router.push(home)
.push(page)
.setDefault('/')
.init();
});
</script>
<div id="container">
</div>
<div id="home" style="display:none;">
<a href="#/page">第一页</a><p>首页</p>
</div>
Wxui.html是一个$.ajax的封转.
我和官方演示一样,用的是https://github.com/progrape/router.git 做路由的,为何官方点击页面切换的时候是有左右滑动的效果,而我没有呢?
我用起来很卡顿。。。。。
是不是可以写成这样
// button
var button = {
url: '/button',
className: 'button',
render: function () {
//do something query
xxxx.query();
return $('#tpl_button').html();
}
};
发现url连接参数必须跟router配置的url对应,如果参数值为空字符串或url连接多出参数,错误提示 not found 。能否输出正确的对象? 比如 /list/:id 输出 {id:''} ,多个参数如何配置url呢
rt
在ios的微信中(其他系统未验证),进入三级页面,通过左滑返回二级页面,显示为二级页面,实际已后退至一级页面,再后退将会退出页面。可参考https://github.com/weui/weui示例中,进入tab->navbar后的后退问题
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.