Example:
<template name="list_customers">
<p><h3>List Customers</h3></p>
{{#each customers}}
{{> list_customers_content}}
{{/each}}
</template>
<template name="list_customers_content">
..display all customer data from "Customers.find({})...
{{> list_customers_content_ip}}
</template>
<template name="list_customers_content_ip">
.. display data from Customers_ip.find({}) based on #each customer object id.
</template>
Template.list_customers.helpers({
customers() {
return Customers.find({});
},
});
How can this be done in fewest possible queries to two different collections, and is there any way to use the customers context object id? Please write full example.
What should the helper for Customers_ip.find() look like?
You need to pass the current document (which is this inside the #each context) to the list_customers_content template in order to further process it.
The name of the parameter will be the name to access the value in the child template.
Example:
{
name: "John Doe",
_id: "1232131",
}
<template name="list_customers">
<p><h3>List Customers</h3></p>
{{#each customers}}
{{> list_customers_content customer=this}}
{{/each}}
</template>
<template name="list_customers_content">
<span>Name: {{customer.name}}</span><!-- John Doe -->
{{> list_customers_content_ip customerId=customer._id}}
</template>
<template name="list_customers_content_ip">
{{#each customerIp customerId}}
<span>IP: {{this.ip}}</span>
{{/each}}
</template>
A helper for customerIp could look like this:
Template.list_customers_content_ip.helpers({
customerIp(customerId) {
// assumes, that these documents have
// a field named "customerId"
return Customers_ip.find({ customerId });
},
});
Related
I'm having this situation where I need to call a method from the dom-repeat. Below is my code
<template is='dom-repeat' items="[[_dataArray]]" as="rowItem">
<template is='dom-repeat' items="[[_objectArray]]" as="columnItem">
<template>
<span>[[_getColumnItemValue(rowItem, columnItem)]]</span>
</template>
</template>
</template>
and in my _getColumnItemValue method, I want to get the value for an object with key specified by the columnData attribute.
Like rowData[columnData]
_getColumnItemValue: function(rowData, columnData) {
return rowData[columnData];
}
My problem is the method _getColumnItemValue is not being called. Is there any better way to do achieve this?
If your code is exactly as you pasted, then you have one too many <template> tags.
<template is='dom-repeat'>
<template is='dom-repeat'>
<span></span>
</template>
</template>
The innermost template must be removed. You are rendering that instead of the <span>.
Finally i was able to make this thing working. Not exactly in this case, but in another project, with exact same logic. The only change was my _objectArray was not an array of strings, it was an array of objects. So the code will look like this:
<template is="dom-repeat" items="{{tableData}}" as="rowData">
<tr>
<template is="dom-repeat" items="{{headers}}" as="columnData">
<td>
<template is="dom-if" if="{{checkType(columnData, 'check')}}">
<paper-checkbox disabled="{{getAttributeValue(columnData, 'disabled')}}" checked="{{getRowData(rowData, columnData)}}" on-change="checkBoxSelected"></paper-checkbox>
</template>
<template is="dom-if" if="{{checkType(columnData, 'led')}}">
<led-indicator on="{{!getRowData(rowData, columnData)}}"></led-indicator>
<span style="display: none;">{{getRowData(rowData, columnData)}}</span>
</template>
<template is="dom-if" if="{{checkType(columnData, 'link')}}">
{{getRowData(rowData, columnData)}}
</template>
<template is="dom-if" if="{{checkType(columnData, 'text')}}">
<span>{{getRowData(rowData, columnData)}}</span>
</template>
</td>
</template>
</tr>
</template>
See the method getRowData
getRowData: function (row, column) {
return row[column.key];
},
and
checkType: function (columnData, type) {
var isType = false;
isType = columnData.type.toLowerCase() == type.toLowerCase();
return isType;
},
This is for a table, which can dynamically add or remove rows and columns and show different type of elements like, a text, link, checkbox some of my custom controls like led-indicator etc.
The logic behind is, the headers array will be used to generate the table columns, this array contains objects of structure
{
name: 'Popular Name',
key: 'PopularName',
type: 'text'
}
and table data contains array of object, which contains the key specified in the headers array.
Hope this may be useful for some one.
I have singlePost with postId. In each singlePost, I list comment.
Autoform for comment:
{{#autoForm id="updateCommentArray" type="update-pushArray" collection=Collections.Posts doc=commentDoc scope="comment" template="semanticUI"}}
{{> afQuickField name="content"}}
<div class="form-group">
<button type="submit" class="ui positive button">Submit</button>
<button type="reset" class="ui negative button">Reset</button>
</div>
{{/autoForm}}
What Autoform provide is to use scope to attach new array into specified field. For example, when I use scope comment.0.reply, that reply will attach to first array of comment. When I use scope comment.1.reply, that reply will attach to second array of comment. Etc
How to make it dynamic? What I thought is to use commentId, but how?
Thank you
I think it works like this:
The scope defines to which array inside a document the form is adding.
The doc is the document where the form shall add data to the scope.
For example (i did not test this, but it is similar to code i used):
javascript:
CommentsSchema = new SimpleSchema({
comment:{
type:String,
autoform:{
rows: 2
}
}
});
PostSchema = new SimpleSchema ({
content:{
type:String,
autoform: {
rows: 2
}
},
comments:{
type:[CommentsSchema]
}
});
template:
{{#each posts}}
{{#autoForm id=this._id type="update-pushArray" collection='Posts' doc=this scope="comment" template="semanticUI"}}
{{> afQuickField name="content"}}
<div class="form-group">
<button type="submit" class="ui positive button">Submit</button>
<button type="reset" class="ui negative button">Reset</button>
</div>
{{/autoForm}}
{{/each}}
I have a collection in Mongo that is populated with three records.
When viewing my app in localhost, it lists nothing. There are no errors displayed, however nothing is listed either.
What am I doing wrong?
Console output from manual find:
meteor:PRIMARY> db.users.find({})
{ "_id" : ObjectId("55ddba705374fcb03117d585"), "username" : "coderboy", "joined" : ISODate("2015-08-26T13:09:04.872Z") }
{ "_id" : ObjectId("55ddc7475374fcb03117d586"), "username" : "plumberboy", "joined" : ISODate("2015-08-26T14:03:51.960Z") }
{ "_id" : ObjectId("55ddcf3b5374fcb03117d587"), "username" : "sparkieboy", "joined" : ISODate("2015-08-26T14:37:47.883Z") }
HTML:
<body>
<div class="container">
<h2>Our users:</h2>
<ul>
{{#each user}}
{{> userlist}}
{{/each}}
</ul>
</div>
</body>
<template name="userlist">
<li>{{username}}</li>
</template>
JS:
users = new Mongo.Collection("users");
if (Meteor.isClient) {
Template.userlist.helpers({
user: function () {
return users.find({});
}
});
}
You use the user helper of userlist outside of the userlist template. So that's not defined. An easy fix is put move the each into the userlist template.
<body>
<div class="container">
<h2>Our users:</h2>
<ul>
{{> userlist}}
</ul>
</div>
</body>
<template name="userlist">
{{#each user}}
<li>{{username}}</li>
{{/each}}
</template>
I'm extremely new to Meteor and haven't been able to find the answer to something that's probably laughably simple.
I have a Meteor collection called Ingredients:
Ingredients = new Mongo.Collections("ingredients");
if (Meteor.isClient) {
Template.body.helpers({
ingredients: function() {
return Ingredients.find({});
});
}
Which is populated with documents like the following:
{ name: Boneless Pork Chop,
tags: [Paleo, Pork, Local] }
Right now I'm rendering the name in a template, as follows:
<template name="ingredient">
<tr>
<td>{{name}}</td>
</tr>
</template>
What I need to figure out now is how to also render the individual elements of the 'tags' array in that template. Preferably, I'd like to render them in such a way that later I could assign a click event to each of them so they could be individually removed or edited... which from my earlier reading means I might want to put the tags in their own collection and join them to the Ingredients documents by an ID, which is perfectly find with me if that's a better pattern.
Little help? Thanks!
you can use #each to print an array in meteor.
<template name="ingredient">
<tr>
<td>{{name}}</td>
<td>
{{#each tags}}
{{this}}
{{/each}}
</td>
</tr>
</template>
I´m working on a meteor example. I get the value of one tag on click event on the link. That value is the same that is present on one collection inside doc "pet" or "zoo". I want to use this value to filter the content present on the template.
A minimal example:
{{#each Animal}}
<div>
<span> {{pet}} </span>
</div>
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
After click:
{{#each Animal}}
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
On this case when I get the value present in "zoo" I just want to update the template with all the the spans that contains elements on doc zoo, and that all related to pet dissappear.
The query to mongodb is working perfectly, my problem is that I´m a little bit confused.
Should I use helpers?
Thank you so much.
Let's see if I understood correctly your problem.
You should use a Session variable where you store the action you are doing. Then add a template if and print inside of this tag whatever you want to show at that time.
Let's do a minimal example:
<template name="showAnimalsTemplate">
{{if showAnimals}}
{{#each Animal}}
<div>
<span> {{pet}} </span>
</div>
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
{{/if}}
{{if showZoo}}
{{#each Animal}}
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
{{/if}}
Following this example, you add in the client javascript something like this:
Template.showAnimalsTemplate.showAnimals = function(){
if( Session.get('action') == 'showingTheZoo')
return true;
return false;
}
Template.showAnimalsTemplate.showZoo = function(){
if( Session.get('action') == 'showingTheZoo')
return true;
return false;
}
Don't forget to set the session value inside the click event.
Session.set('action', 'showingTheZoo');