【问题标题】:How do you render multiple templates with one route controller using iron-router?如何使用 Iron-router 用一个路由控制器渲染多个模板?
【发布时间】:2015-02-04 03:02:42
【问题描述】:

背景:

我正在使用流星和铁路由器制作博客。我想为几个不同的“类别页面”使用一个控制器,这些页面过滤了产量区域中的博客文章列表。

问题:

当 URL 更改时,文章列表不会重新呈现。 IE。文章列表不是被动的。有趣的是,如果我导航回主页,就会显示正确的文章列表。

问题:

当我在类别路由控制器上的不同路由之间进行更改时,如何更改该文章列表?


一些示例代码:

请注意,整个项目的代码可用here

这是我的路由控制器:

CategoryController = RouteController.extend({
    action: function(){
        this.render();
    },
    template: 'category',
    data: function(){
        return {category: this.params.category};
    }
});

CategoryController.helpers({
    articles: function(){
        return Articles.find({category: this.params.category});
    }
});

这是它正在渲染的模板:

<template name='category'>
    <div class="container">
        <h2>{{category}}:</h2>
        <ul>
            {{#each articles}}
                <li>
                {{#linkTo route="article.show"}}
                    {{title}}
                {{/linkTo}} 
                </li>
            {{/each}}
        </ul>
    </div>
</template>

资源/更新:

【问题讨论】:

    标签: javascript mongodb meteor iron-router


    【解决方案1】:

    文章列表不会改变,因为模板助手没有使用响应式数据源。您可以使用RouteController.getParams 方法来建立对路由参数的响应式依赖,如下所示。

    CategoryController.helpers({
        articles: function(){
            var controller = this;
            var params = controller.getParams();
    
            return Articles.find({category: params.category});
        }
    });
    

    来自Iron Router documentation

    注意:如果你想在哈希改变时重新运行一个函数,你可以这样做 这个:

    // get a handle for the controller.
    // in a template helper this would be
    // var controller = Iron.controller();
    var controller = this;
    
    // reactive getParams method which will invalidate the comp if any part of the params change
    // including the hash.
    var params = controller.getParams();
    

    默认情况下,路由器将遵循正常的浏览器行为。如果你 单击带有哈希片段的链接,它将滚动到具有该哈希片段的元素 ID。如果你想使用 controller.getParams() 你可以把它放进去 如果你想做一些程序性的事情,或者你自己的自动运行,或者在 一个帮手。

    【讨论】:

      猜你喜欢
      • 2015-02-15
      • 2015-06-23
      • 2015-05-31
      • 2015-05-24
      • 1970-01-01
      • 2016-01-16
      • 1970-01-01
      • 2017-05-04
      • 2014-01-16
      相关资源
      最近更新 更多