路由的开发在项目是很重要的,它指定了url的规则,还有参数
需要安装iron:router
它不仅能帮助路由设置路径,还能为路径分配跳转,还可以管理订阅,控制路径 可以访问哪些数据。
路由:把url映射到模板:
路由用来处理body里的变化 。
我们可以创建一个layout.html
<template name="layout"> <div class="container"> {{> header}} <div id="main"> {{> yield}} </div> </div> </template>Router.configure({
layoutTemplate:'layout'
});
Router.route('/', {name: 'postsList'});
这里需要在lib下创建config.js
配置默认布局,把页面因路由需要改变的部分做成模板,加载到yield里。
并且配置默认的/访问的模板。
{{pathFor templatename}}它返回指定模板的url
等待数据:
在访问页面时,当数据未出来前,列表里会空一段时间。
因为第一次加载页面时,要等到posts订阅完后,即从服务器 抓取完数据,才可显示到本地。
我们可以在配置里把首页的订阅放在waitOn函数内并返回。
这样默认client的main.js内的订阅可以注释了。
我们还可以配置一个加载配置
Router.configure({
layoutTemplate:'layout',
loadingTemplate:'loading',
notFoundTemplate:'notFound',//404配置
waitOn:function(){return Meteor.subscribe('posts'); }
});
因为我们在路由全局定义了waitOn,所以这个只会在用户第一次访问时发生一次。
那么以后,数据已经加载到本地内存,路由不需要再次等待了。
loading需要添加sacha:spin
<templatename="loading"> {{>spinner}}</template>
Router.route('/posts/:_id', { name: 'postPage'});
配置详情,指定postPage模板
我们可以在路由的data方法内返回数据
data:function(){
return posts.findOne(this.params._id);
}
还可以在模板的js里订阅集合,获取指定id的数据。
//模板订阅 Template.postPage.onRendered(function(){ this.subscribe('postById',Router.current().params._id); }) Template.postPage.helpers({ post:function(){ return posts.findOne(Router.current().params._id); } })
可以在创建路由的data方法内返回数据,
函数内可以通过this.params.XX来获取传递过来的值,访问集合用find来查找需要的数据。
二就是在模板js里通过helpers内返回数据,
访问传递参数需通过Router.current().params.XX
帖子排序:
return Posts.find({}, {sort: {submitted: -1}});