在2个模板Meteor.js中组合2个集合

时间:2014-04-01 20:07:12

标签: javascript meteor

我正在尝试制作一个类别系统,我似乎无法弄清楚如何使它工作。 这是一个模拟js和html来演示我想要完成什么

test.js

Categories = new Meteor.Collection('categories');
Rooms = new Meteor.Collection('rooms');

if (Meteor.isClient) {    
   Template.Category_System.categories = function () {
      return Categories.find({});
   };
   Template.Category_System.rooms = function () {
      return Rooms.find({}); //here i want to return the rooms and users in the Rooms collection but only the rooms that fall under the category and subcategory of the Categories collection
   };
}

if (Meteor.isServer) {
   Meteor.startup(function () {
        Categories.insert({category:"category1",subcategories:[{subcategory:"subcategory1",rooms:[]},{subcategory:"subcategory2",rooms:[]}]};
        Categories.insert({category:"category2",subcategories:[{subcategory:"subcategory1",rooms:[]},{subcategory:"subcategory2",rooms:[]}]};

        Rooms.insert({category:"category1",subcategory:"subcategory1",room:'Room_01',users:[a,b,c]});
        Rooms.insert({category:"category1",subcategory:"subcategory1",room:'Room_02',users:[d,e,f,g,h]});
        Rooms.insert({category:"category1",subcategory:"subcategory2",room:'Room_03',users:[i]}); 
        Rooms.insert({category:"category2",subcategory:"subcategory1",room:'Room_01',users:[j,k]});
        Rooms.insert({category:"category2",subcategory:"subcategory2",room:'Room_02',users:[l,m,n]});
        Rooms.insert({category:"category2",subcategory:"subcategory2",room:'Room_03',users:[o,p,q,r]});               
   });
}

test.html - >只是模板

<template name="Category_System">
   {{#each categories}}
        {{category}}
        {{#each subcategories}}
             {{subcategory}}
             {{#each rooms}}
                  {{room}}{{users}}
             {{/each}}
        {{/each}}
   {{/each}}
</template>

我想要实现的结果

category1
    -subcategory1
         -Room_01 a,b,c
         -Room_02 d,e,f,g,h
    -subcategory2
         -Room_03 i
category2
    -subcategory1
         -Room_01 j,k
    -subcategory2
         -Room_02 l,m,n
         -Room_03 o,p,q,r

提前致谢

1 个答案:

答案 0 :(得分:0)

根据您的模拟代码,您可以执行以下操作:

<强> category.js

Categories = new Meteor.Collection('categories');
Rooms = new Meteor.Collection('rooms');

if (Meteor.isClient) {    
    Template.Category_System.categories = function () {
        return Categories.find();
    };
    Template.Category_System.rooms = function ( cat ) {
        var _subcat = this.subcategory,
            _cat = cat;
        return Rooms.find({ category: _cat, subcategory: _subcat });
    };
}

if (Meteor.isServer) {
    Meteor.startup(function () {
        if ( !Categories.find().count() ) {
            Categories.insert({category:"category1",subcategories:[{subcategory:"subcategory1",rooms:[]},{subcategory:"subcategory2",rooms:[]}]});
            Categories.insert({category:"category2",subcategories:[{subcategory:"subcategory1",rooms:[]},{subcategory:"subcategory2",rooms:[]}]});
        }
        if ( !Rooms.find().count() ) {
            Rooms.insert({category:"category1",subcategory:"subcategory1",room:'Room_01',users:["a","b","c"]});
            Rooms.insert({category:"category1",subcategory:"subcategory1",room:'Room_02',users:["d","e","f","g","h"]});
            Rooms.insert({category:"category1",subcategory:"subcategory2",room:'Room_03',users:["i"]});
            Rooms.insert({category:"category2",subcategory:"subcategory1",room:'Room_01',users:["j","k"]});
            Rooms.insert({category:"category2",subcategory:"subcategory2",room:'Room_02',users:["l","m","n"]});
            Rooms.insert({category:"category2",subcategory:"subcategory2",room:'Room_03',users:["o","p","q","r"]});
        }
    });
}

<强> category.html

<head>
  <title>Category System Test</title>
</head>

<body>
  {{> Category_System}}
</body>

<template name="Category_System">
    <ul>
        {{#each categories}}
        <li>
            {{category}}
            <ul>
                {{#each subcategories}}
                     <li>
                        {{subcategory}}
                        <ul>
                            {{#each rooms ../category }}
                                <li>{{room}} - {{users}}</li>
                            {{/each}}
                        </ul>
                     </li>
                {{/each}}
            </ul>
        </li>
        {{/each}}
    </ul>
</template>

需要注意的关键是../categoryrooms的块助手中传递roomssubcategory的模板助手,它接受了category参数,并且还使用了当前{{} 1}}数据上下文来过滤Room集合。

如果你在Meteor 0.8.0下运行,你会看到以下输出...... sample output from code found above

您可以通过在每个rooms文档中完成对Category数组的引用来简化此操作。可以通过UI执行此操作,也可以捕获每个Room文档的insertId,并在播种时更新相应的Category文档。

顺便说一下,当你为你的收藏品播种时,你可能想要检查一下(参见上面的代码)...否则,你每次都会收到大量的记录。你做出改变的时间,应用程序重新启动。