您的位置: 首页  >  技术问答  >  如何使用Iron-Router使用一个路由控制器渲染多个模板?

如何使用Iron-Router使用一个路由控制器渲染多个模板?

分类: 技术问答 • 2022-04-05 10:52:48

如何使用Iron-Router使用一个路由控制器渲染多个模板?

问题描述：

  • URL to current version of my project
  • Here is the code for my project

我正在使用流星和铁路由器制作博客.我想对多个不同的类别页面"使用单个控制器，会在收益率区域中过滤博客文章列表.

I am making a blog using meteor and iron-router. I want to use a single controller for several different "category pages," which filter a list a blog articles in the yield region.

URL更改后，文章列表不会重新呈现. IE.文章列表不具有反应性.有趣的是，如果我导航回到主页，则会显示正确的文章列表.

The article list does not get rerendered when the URL changes. I.e. the article list is not reactive. Interestingly, if I navigate back to the home page, the correct article list shows up.

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

How do I make that article list change when I change between different routes on the category route controller?

请注意，整个项目的代码在此处.

Please note that the code for this whole project is available 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});
    }
});

这是它正在渲染的模板:

And here is the template it is rendering:

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

资源/更新:

  • 阅读此关于流星反应性和Deps程序包的文章.非常有趣，但是在不同地方尝试了Deps.autorun后，我认为这不是答案.
  • 当前试图做出不同的类别".路由从控制器继承.

    • Resources/Updates:

    • Read this article on Meteor Reactivity and the Deps Package. Very interesting, but after trying some Deps.autoruns in different places, I don't think that this is the answer.
    • Currently trying to make different "category" routes inherit from the controller.

答

文章列表不会更改，因为模板帮助程序未使用反应性数据源.您可以使用RouteController.getParams方法建立对路由参数的反应性依赖关系，如下所示.

The article list does not change because the Template helper is not using a reactive data source. You may use the RouteController.getParams method to establish a reactive dependency on route parameters as shown below.

CategoryController.helpers({
    articles: function(){
        var controller = this;
        var params = controller.getParams();

        return Articles.find({category: params.category});
    }
});

来自铁路由​​器文档:

注意:如果要在哈希值更改时重新运行函数，可以执行 这个:

Note: If you want to rerun a function when the hash changes you can do this:

// 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()，可以将其放入 如果您要执行程序操作，则可以自行运行，也可以 一个帮手.

By default the router will follow normal browser behavior. If you click a link with a hash frag it will scroll to an element with that id. If you want to use controller.getParams() you can put that in either your own autorun if you want to do something procedural, or in a helper.

相关推荐