Question

我几乎是初学者，我正在使用Meteor作为我们在工作中用于UX测试的快速原型。（UX设计师做编码，但是）。

现在问题是，我有两个包含两个模板的集合：Comments和Tasks。我想显示按创建日期排序的这两个组合视图。现在，我只能首先显示评论，然后显示任务，只需执行以下各项模板：

<template name="yourTemplate">
    {{#if comments.count}}
        {{#each comments}}
            {{> comment}}
        {{/each}}
    {{else}}
        <li class="empty">
            <h1>No comments yet :(</h1>
            {{#if currentUser}}
                <p>Why don't you <span class="write-comment">write one?</span></p>
            {{else}}
                <p>Log in to write a new one.</p>
            {{/if}}
        </li>
    {{/if}}
    {{#each tasks}}
        {{> task}}
    {{/each}}
</template>

有没有办法简单地“统一”视图？我在客户端本地做所有事情，没有任何服务器端的东西，也没有安全性，因为它都是在测试系统上本地完成的，主持人坐在测试对象旁边，所以我把它放在不安全的地方并自动发布，非常快原型。

我想一种方法是将注释和任务放入一个数组中并在显示之前对其进行排序，但这仍然会被反应并且有效吗？

我也失去了我必须说的语法。

提前感谢您的帮助。

Answer 1

正如您所提到的，您可以编写一个将两者结合起来的帮助器。因为它是一个帮助器，所以如果你在该帮助器中查询集合（或任何被动数据源），它将是被动的。

Template.yourTemplate.helpers({
    items: function () {
        // get comments and tasks - Add appropriate query properties to filter results
        var comments = Comments.find({}).fetch();
        var tasks = Tasks.find({}).fetch();

        //Add a property to each comment object to identify whether an item is a comment or task 
        comments = _.map(comments, function (obj) {
            obj.isComment = true;
            return obj;
        });

        //combine comments and tasks into single array
        var items = comments.concat(tasks);

        //sort combined array by creation date
        items = _.sortBy(items, function (item) {
            return item.creationDate; //edit this based on your requirement
        });
        return items;
    }
});

然后在你的模板中

<template name="yourTemplate">
    {{#if items.count}}
        {{#each items}}
            <!-- This is the property that we have added in helper -->
            {{#if this.isComment}}
                {{> comment}}
            {{else}}
                {{> task}}
            {{/if}}
        {{/each}}
    {{else}}
        <li class="empty">
            <h1>No comments and tasks yet :(</h1>
            {{#if currentUser}}
                <p>Why don't you <span class="write-comment">write a comment?</span></p>
            {{else}}
                <p>Log in to write a new comment.</p>
            {{/if}}
        </li>
    {{/if}}
</template>

希望它有所帮助。

如何在Meteor中按时间显示两个不同的模板显示两个不同的集合

1 个答案: