i have two collections
CategoryCollection = new Mongo.Collection("CategoryCollection");
usersWordpressCollection = new Mongo.Collection("usersWordpressCollection");
CategoryCollection hold posts within a category, within the posts objects there is the Author, which comes as an id. take a look at the image below, draw your attention to posts.author
usersWordpressCollection holds the authors whose id (see image below) is referenced in categoryCollection under posts.author
when i display a post, its coming from categoryCollection so i can get the post, the link etc. i can also get the author id however when it comes to this, i want to return, not the id, but the referenced Author information found in the usersWordpressCollection
latest html
<template name="latest">
<ul>
{{#each articles}}
<li class=" home-latest ">
<span class="label"> <a class="" href="/catsingle/CategorySingle/{{_id}}">{{name}}</a></span>
{{#each posts}}
<div class="card">
<div class="category-img">{{{image}}}</div>
<div class="card-divider">
{{title}}
</div>
<div class="card-section">
<p>
{{> authors}}
</p>
</div>
</div>
</li>
{{/each}}
</ul>
</template>
latest js
Template.latest.helpers({
articles: function () {
var id = FlowRouter.getParam('_id');
return CategoryCollection.find({}, {sort: {date_created: -1}, limit:1}).fetch();
}
});
authors html
<template name="authors">
{{#each authors}}
<p>
{{name}}
</p>
{{/each}}
</template>
authors js
Template.authors.helpers({
authors: function () {
var id = this.author;
console.log(id);
var alias = usersWordpressCollection.findOne(id, {fields: {name: 1} });
return alias.name;
console.log(alias.name);
});
As you can see, this.author is the author id found in categoryCollection posts.author. Im trying to find that id in the usersWordpressCollection matching the author, then i want to display the name field of the Author whose id was matched. but i can't seen to get it working, how can i achieve this.
Since there is only one author per post you don't need to iterate over a cursor of authors, you only need one. So where you have:
{{#each authors}}
<p>
{{name}}
</p>
{{/each}}
Instead use:
{{#with author}}
<p>
{{name}}
</p>
{{/with}}
Now, the data context coming into the authors template will be a post object (since you are within an {{#each posts}}. You can therefore construct your author helper as follows:
Template.authors.helpers({
author(){
return usersWordpressCollection.findOne({ id: parseInt(this.author) });
}
});
Since you've indicated that this.author is a string but the id of your user collection is an integer then you need to convert the type - you can do this directly in your query.
Related
I have an array of 10 objects 'categories' and each category has sub objects such as posts within that category. This is how it looks.
I access the category list like this.
<template name="CategoriesMain">
{{#each articles}}
<li>
<h2>{{name}}</h2>
</li>
{{/each}}
</ul>
</template>
this link
<h2>{{name}}</h2>
accesses the 'posts' list within the category which looks like this
<template name="CategoriesSingle">
<h1>This is a test</h1>
<ul>
{{#each articles}}
{{#each posts}}
<li>
<h2>{{title}}</h2>
</li>
{{/each}}
{{/each}}
</ul>
</template>
this link is supposed to target the SINGLE POST from the post list within the category
<h2>{{title}}</h2>
PROBLEM:
I get the error: There is no route for the path: /catsingle/ when ever i try to access the SINGLE POST
even though i have it in my routes.js like this
FlowRouter.route('/catsingle/:_id', {
name: 'catsingle',
action() {
BlazeLayout.render("AppLayout", {main: "CategoryArticleSingle"});
}
});
the template helper looks like this
Template.CategoryArticleSingle.helpers({
articles: function () {
var id = FlowRouter.getParam('_id')
return CategoryCollection.findOne({_id: id});
}
});
How can I successfully the single post within a category?
Your posts array doesn't have an _id key, it has an ID key.
Try:
<h2>{{title}}</h2>
I have a list template (#each) in a package that I plan to use across many different collections. Since the template is in a package they are not easily customizable. So I figured this was a great example to use Template.dynamic. Everything works except passing data.
.. I pull the data into the routed page and manipulate the data to match the dynamic template.
Template.usersIndex.helpers({
items: function() {
var users = Meteor.users.find({}).fetch();
var items = users.filter(function(user) {
return user;
}).map(function(user){
return {
name: user.profile.name,
description: user.emails[0].address,
tidbit: "hello"
};
});
return items
}
});
... the data passes perfectly to the usersIndex template.
<template name="usersIndex">
<div id="gc-users-index-navbar">
<h2>Title</h2>
</div>
<div id="gc-users-index" class="inner-content">
{{> Template.dynamic template="strataIndexItem" data="items" }}
</div>
</template>
... But no dice, the dynamic template is rendered but no data.
<template name="themeIndex">
<div class="list-group">
{{#each items }}
<div class="list-group-item">
<div class="row-content">
<div class="least-content">{{tidbit}}</div>
<h4 class="list-group-item-heading">{{name}}</h4>
<p class="list-group-item-text">{{description}}</p>
</div>
</div>
<div class="list-group-separator"></div>
{{/each}}
</div>
</template>
You pass data as string?
{{> Template.dynamic template="strataIndexItem" data="items" }}
You should pass data as variable, without ""
{{> Template.dynamic template="strataIndexItem" data=items }}
Also check if your strataIndexItem template is named strataIndexItem:
<template name="strataIndexItem">
...
</template>
rather a theoretical question - how can I render recursive templates in Meteor? For example, displaying a comment on comment with unlimited number of comment sub-levels so that HTML would be diplayed as the following?
<section>
some text
<section>
nested text
<section>
further nested text and sections
.....
</section>
</section>
</section>
In my case I pass to the "tree" template a mongoDB document and this document can have unlimited number of sub-content levels. My example below doesn't work the way I want.
<template name="tree">
<div class="wrapper" style="border:1px solid red">
<ul>
{{#each getStructure}}
<li>
{{#each content}}
<ul>
<li>
<a class="item">{{text}}</a>
<!-- TODO: this stuff needs to be recursive.
{{#if sub_content}}
<ul>
{{#each sub_content}}
<li>
<a class="item">{{text}}</a>
{{#if sub_content}}
....
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
</ul>
{{/each}}
</li>
{{/each}}
</ul>
</div>
</template>
A simplified example of recirsuve, say you had a post sample template of:
<template name="post">
{{post_text}}
{{#each comments}}
{{>comment}}
{{/each}}
</template>
and a post helper of:
Template.post.helpers({
comments: function() {
return CommentCollection.find({post_id: this._id, parent_id: {$exists: 0}});
}
});
I would create a template for the comment layout and provide a helper in that for sub-comments, depending on your data structure something like the following:
<template name="comment">
{{comment_text}}
{{#each sub_comment}}
{{> comment}}
{{/each}}
</template>
and then the helper along the lines of:
Template.comment.helpers({
sub_comments: function() {
return CommentCollection.find({parent_id: this._id});
}
});
This would recursively produce the comments template for each sub-comment then roll back up the tree to the next #each and then print that comment and all of its sub-comments etc.
Using data of the form:
users =
_id: 'foo'
books: [
{name: 'book1'}
{name: 'book2'}
]
<template name="user">
{{#each get_users}}
{{> shelf}}
{{/each}}
</template>
<template name="shelf">
{{#each books}}
{{> book}}
{{/each}}
</template>
<template name="book">
<div contenteditable="true" data-id="{{_id}}">{{name}}</div>
</template>
I want _id in the book template to refer to the _id of the user, but _id is not in scope inside the book template. I'd like to be able to do something like {{> book _id}}, but that doesn't work, I think because book can only have one argument, and that is each {name: 'book1'} doc.
Use a custom block helper. It would be nicer if Meteor allowed multiple arguments for custom block helpers (this is supported in Handlebars). Since it doesn't (see the the wiki), this is the best I came up with, passing a modified this to the subtemplate book.
<template name="shelf">
{{#my_iterator}}
{{> book}}
{{/each}}
</template>
Templates.shelf.my_iterator = (options) ->
html = "
for book in this.books
this.name = book.name
html += options.fn this
html
I have the following use-case: There are rooms which have beds inside. (Bummer...)
There is a loop of rooms which uses a template "room".
<template name="rooms">
{{#each availableRooms}}
{{> room}}
{{/each}}
</template>
This template gets for each iteration a room. This is accessible by this.
<template name="room">
<div class="room-outer">
<button type="button" class="btn" data-toggle="collapse" data-target="#list-{{_id}}">
{{name}} : {{getBeds this}} beds free.
</button>
<div id="list-{{_id}}" class="collapse in room-inner">
{{#each guests_id}}
<div class="bed">
<div class="blanket">
{{showUser this}}
</div>
</div>
{{/each}}
</div>
</div>
</template>
Now I like to calculate some special value which I do by extending the template. I need now to pass the this variable to the getBeds function. Is it possible to do this by grabing outside the template and get the room into the function?
Template.room.getBeds = function (room) {
if (room.guests_id)
return room.beds - _.size(room.guests_id);
else
return room.beds;
};
Basically I don't want to have to write {{getBeds this}} but only {{getBeds}}
Shouldn't this work?
Template.room.getBeds = function () {
if (this.guests_id)
return this.beds - _.size(this.guests_id);
else
return this.beds;
};
See the docs:
Helpers can take arguments, and they receive the current template data in this: