iron:使用相同模板更改路由后路由器不会重新渲染

时间:2014-11-17 10:41:48

标签: meteor iron-router

如何制作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进行模拟)时,路径确实会发生变化,但模板不会重新渲染。 有没有办法强迫铁:路由器重新渲染?

2 个答案:

答案 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>