如何制作Iron:路由器重新渲染模板?
我有这个HTML:
<head>
</head>
<body>
</body>
<template name="mainLayout">
<a href="{{pathFor route='list'}}">list</a>
<a href="{{pathFor route='find' query='q=xxx'}}">find</a>
{{> yield}}
</template>
<template name="listTemplate">
<p>list</p>
</template>
和这个js:
Router.configure({
layoutTemplate: 'mainLayout'
});
Router.route('/list', {
name: 'list',
template: 'listTemplate'
});
Router.route('/find', {
name: 'find',
template: 'listTemplate',
data: function () {
return this.params.query;
}
});
if (Meteor.isClient) {
Template.listTemplate.rendered = function () {
if (this.data)
console.log('find ' + this.data.q);
else
console.log('list all');
};
}
当我点击切换视图的链接(使用console.log进行模拟)时,路径确实会发生变化,但模板不会重新渲染。 有没有办法强迫铁:路由器重新渲染?
答案 0 :(得分:1)
您可以尝试这样的事情:
Router.configure({
layoutTemplate: 'mainLayout'
});
Router.route('/list', {
name: 'list',
template: 'listTemplate',
action: function() {
this.state.set('query', this.params.query);
}
});
Router.route('/find', {
name: 'find',
template: 'listTemplate',
data: function() {
return this.params.query;
},
action: function() {
this.state.set('query', this.params.query);
}
});
if (Meteor.isClient) {
Template.listTemplate.rendered = function() {
this.autorun(
function() {
if (this.state.get('query'))
console.log('find ' + this.data.q);
else
console.log('list all');
}
);
};
}
渲染的方法不具有反应性,这就是您需要自动运行的原因。 模板&#34; this.data&#34;没有被动反应所以你需要一个被动变量才能做到这一点,无论是会话变量,控制器状态还是某种被动变量。
您可能需要根据采取的方法添加reactive-var包。
答案 1 :(得分:1)
设置路由器控制器状态对我不起作用。答案Antônio Augusto Morais在此相关github issue中有效。使用Session存储反应性var以触发自动运行反应性。这是一个黑客,但它的确有效。
## router.coffee
Router.route '/profile/:_id',
name: 'profile'
action: ->
Session.set 'profileId', @params._id
@render 'profile'
## profile.coffee
Template.profile.onCreated ->
@user = new ReactiveVar
template = @
@autorun ->
template.subscription = template.subscribe 'profile', Session.get 'profileId'
if template.subscription.ready()
template.user.set Meteor.users.findOne _id: Session.get 'profileId'
else
console.log 'Profile subscription is not ready'
Template.profile.helpers
user: -> Template.instance().user.get()
## profile.html
<template name="profile">
{{#if user}}
{{#with user.profile}}
<span class="first-name">{{firstName}}</span>
<span class="last-name">{{lastName}}</span>
{{/with}}
{{else}}
<span class="warning">User not found.</span>
{{/if}}
</template>