I try Meteor and have object in Mongo like this:
{ _id: iureuyhfiwuyerbe, "title": "title", "channel": "http://...", "desc": "description", "items" : [{ "title" : "This is title", "description" : "This is description", "link" : "http://123435", "pubDate" : "16 Oct 2014 20:46:00 +0400" }, { }, { } ... ] }
This news from RSS sources. I have many same documents in Db with it's own id.
I planned use <select> to switch RSS channel and display news items for selected channel. I need to bind this two values. How? I don't understand how I can display on client side items array values for each object in this array? Title, description etc.
This piece of my HTML
<template name="newsList">
<div class="container-fluid">
{{> channel}}
</div>
<div class="container-fluid">
{{#each items}}
{{> item}}
{{/each}}
</div>
</template>
I see channel, but not see Items.
How I can debug code in client side to view variables in template? I use Webstorm 9. Debugger is not stop on breakpoints in template.
Thank you.
Make template of item..
same strategy of showing channels to channel.
{{> items}}
{{item.title}}, {{item.description}} // and more..
Related
I have the following json object -
{
"type": "typeOne",
"Children": [
{
"ChildType": "ChildTypeOne",
"Settings": {
"IsChildTypeOne": true
}
},
{
"ChildType": "ChildTypeTwo",
"Settings": {
"IsChildTypeTwo": true
}
}
]
}
My handlebars template contains the following snippet -
{{#each Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!
{{else}}
ChildTypeTwo!!
{{/if}}
{{/each}}
If I run this data through the template, the only thing that ever renders is ChildTypeTwo!!. So it seems that the if statement isn't properly evaluating IsChildTypeOne. The strange part is that if I put a statement in to display the value of IsChildTypeOne in the else clause, the value is displayed as true for the first ChildType.
Does anyone have any thoughts as to why this is not working as expected?
NOTE - the json posted above is a trimmed down version of my actual object. The real object has nested Children arrays that reuse the same object structure. So for instance, in my example, ChildTypeOne can also have a Childrens array with other objects within it.
EDIT****
So in stepping through the code, I found that if I had my type defined as follows -
...
"Settings" : {
"IsChildTypeOne": 'true'
}
...
it appears to work. Removing the single quoted causes the value to be read as undefined when stepping through.
Given charrs answer didn't seem to help, and the fact that your JSON is more complex than what you've posted, maybe your actual template isn't referencing a parent context correctly? For instance, if you wanted to access the type field in #each children block, it would look like this:
{{#each Children}}
{{#if Settings.IsChildTypeOne}}
{{../type}}
{{/if}}
{{/each}}
This ended up being related to the process being used to serialize the json string into an object. Please see the issue here for an explanation.
Can you try changing the handlebar template code as below:
{{#Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!!
{{else}}
ChildTypeTwo!!!
{{/if}}
{{/Children}}
This would iterate your array of Children and would give you result as
ChildTypeOne!!!
ChildTypeTwo!!!
Since your json has two elements one which has ChildTypeOne true and other not.
Sample handelbar:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
{{#Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!!
{{else}}
ChildTypeTwo!!!
{{/if}}
{{/Children}}
</div>
</div>
The html Output for above template :
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
ChildTypeOne!!!
ChildTypeTwo!!!
</div>
</div>
You can see ChildTypeOne!!! for first element is coming.
I have an embedded document in a MongoDB collection "Author" as such:
{"Name": "John Doe",
"Country": "U.S.A",
"Books": [
{"BName": "Book1", "Year": "1950"},
{"BName": "Book2", "Year": "1960"}
]
}
I want to access the Books data, loop through it and display each Book in a table.
This is what my JS file looks like
Template.Author.helpers({
author: function() {
//_id of the Author is passed via the URL
return Author.find({"_id": FlowRouter.getParam('_id')})
}
});
This is the HTML for my report
<template name="Author">
<body>
<div class="row">
<div class="col-md-2">
Book Name
</div>
<div class="col-md-2">
Year
</div>
</div>
{{#each author}}
{{> bookdetails}}
{{/each}}
</body>
</template>
<template name="bookdetails">
<div class="row">
<div class="col-md-2">
{{Books.BName}}
</div>
<div class="col-md-2">
{{Books.Year}}
</div>
</div>
</template>
This works when I have only one record in the embedded Books document but not when I have more than one record - which makes sense since 'Books.BName' is ambiguous at that point.
I need to loop through 'Books' and output each BName and Year. This answer is the closest I found to doing this but I get the error:
TypeError: _.value is not a function
This may be because I have an embedded document as opposed to an array.
Your naming is confusing. You've got Book helper that returns an author, and that's what you're passing to the bookdetails template. You should rename the helper to author to reduce confusion. Then you can loop through the actual array of books with {{#each author.Books}}.
Furthermore, in the bookdetails template access the book parameters directly, e.g. {{BName}} instead of {{Books.BName}}.
I am using mizzao:autocomplete package in one of my search field in my application. Autocomplete is working fine and auto-suggestion is coming from my DB. As per given in the usage documentation this package using separate template for showing the suggestion list. Usually when someone select from given suggestion, the list will disappear and selected value appears in the textbox.
Now what i want is manually trigger some event in title template & do some extra stuff in autoComplete template when someone select some suggestion..
autoComplete.html
<template name="autoComplete">
<div class="col-md-4">
<h4>Auto Complete</h4>
{{> inputAutocomplete settings=settings id="jobTitle" class="form-control" name="title" placeholder="Job Title" autocomplete="off"}}
</div>
</template>
<template name="titles">
{{title}}
</template>
autoComplete.js
Template.autoComplete.helpers({
settings : function() {
return {
position: 'bottom',
limit: 10,
rules: [
{
collection: JobTitleCollection,
field: 'title',
matchAll: true,
template: Template.titles
}
]
};
}
});
You want to use the autocompleteselect event, as described in the docs.
Template.foo.events({
"autocompleteselect input": function(event, template, doc) {
console.log("selected ", doc);
}
});
(Disclaimer: I am mizzao.)
I have two collections:
Contracts = new Mongo.Collection('contracts');
Reminders = new Mongo.Collection('reminders');
These are structured in the database more or less like this:
Contracts:
{
"id": "4432234",
"contract": "C-42432432",
"description": "Description of contract",
"counterpart": "Company name",
"status": "awarded"
},
etc.
Reminders:
{
"name": "Contract expiring",
"type": "expiring",
"contract": "C-42432432",
"reminderDate": "2015-06-01",
"urgency": 3
},
etc.
The "contract"-name here are referring to a "contract"-name in the contract-collection. We can ha multiple reminders connected to the same contract. Therefore I want them in two different collections.
To get the contract-data I use:
<template name="example">
{{#each contracts}}
{{description}}
{{/each}}
</template>
corresponding js:
Template.example.helpers({
contracts: function() {
return Contracts.find();
}
});
This works ok and the result in this instance is Description of contract.
But what do I do if I want to display the reminder-collection and get the corresponding data from the Contract-collection? In other words: I want to loop the reminder-collection and get the same output.
<template name="notworking">
{{#each reminder}}
{{description}}
<!-- Here I want the description from the Contract-collection -->
{{/each}}
</template>
corresponding js:
Template.notworking.helpers({
reminder: function() {
//?
}
});
You might be better off using Contracts._id to refer to a contract from the Reminders collection that way if the contract name and description change at some point you won't need to update all the related reminders.
Contract:
{
"_id": "tPN5jopkzLDbGypBu",
"contract": "C-42432432",
"description": "Description of contract",
"counterpart": "Company name",
"status": "awarded"
},
Reminder:
{
"name": "Contract expiring",
"type": "expiring",
"contractId": "tPN5jopkzLDbGypBu",
"reminderDate": "2015-06-01",
"urgency": 3
},
Then if you want to list reminders and show related contract information you'd have:
HTML:
<template name="remindersList>
{{#each reminder}}
Date: {{reminderDate}} Urgency: {{urgency}}
{{#with relatedContract}}
Description: {{description}} Counterpart: {{counterpart}} Status: {{status}}
{{/with}}
{{/each}}
</template>
JS:
Template.remindersList.helpers({
reminder: function(){
return Reminders.find(); // or whatever query you need to run
},
relatedContract: function(){
return Contracts.findOne({_id: this.contractId}); // 'this' will be the Reminder document
}
});
OR - if you want to keep your denormalized schema, then the relatedContract function would simply need to return Contracts.findOne({contract: this.contract})
I'm assuming you need to loop over each reminder inside the loop iterating over each contract :
<template name="contracts">
{{#each contracts}}
<p>{{description}}</p>
{{#each reminders}}
<p>{{description}}</p>
{{/each}}
{{/each}}
</template>
The current data context when evaluating the reminders will be the currently iterated over contract, so we can access its contract name using this.contract.
As a result you simply need to return every reminders document having the same contract name.
Template.contracts.helpers({
reminders: function(){
return Reminders.find({
contract: this.contract
});
}
});
https://atmospherejs.com/reywood/publish-composite
This package provides flexible way to publish a set of related documents from various collections using a reactive join. Hope it helps.
QQ on MongoDB and Meteor templates. I'm trying to set up a helper that will display each photo from a given DB and I'm having trouble pulling the image.
Right now a document from my DB looks like:
{ "order" : 19,
"img" : "http://foo.cdninstagram.com/photo.jpg",
"time" : "99999999999",
"user" : { "username" : "ME!",
"website" : "",
"profile_picture" : "http://foo.instagram.com/foophoto.jpg",
"full_name" : "Monique Rana",
"bio" : "",
"id" : "1234567" },
"_id" : "abc123" }
Below is the code that I'm working with.
<template name="currentTag">
<div class="container">
<ul class="grid effect-8" id="grid">
{{#each Tag}}
<li><img src="{{Tags.img}}"></li>
{{/each}}
</ul>
</div>
</template>
and the helper I'm building:
Template.currentTag.helpers({
Tag: function () {
return Tags.find().fetch();
}
});
Thanks!
You can use {{img}} instead of {{Tags.img}} to fix the issue. The data context in the {{#each Tag}} block is of the item itself.
Also you don't need .fetch since the template understands cursors, which are slightly more efficient i.e return Tags.find();