With iron router I can set the data context of a template like so:
Router.route('hello', {data: {greeting: 'hello'}})
So if my hello.html looks like this:
<template name="hello">
<h1>{{greeting}}</h1>
</template>
I get, as expected, a page saying hello.
Question:
Can I do this with Router.go()?
According to what I've read, this should work:
Router.go('hello', {greeting: 'Whazaaaaaaa'})
But all I get is a boring hello. Is it possible to set the data in this way? If the second argument in Router.go isn't for data, then what is it for?
yeah that should work. the second argument is passed to the route function as a parameter, so you need to set that one up accordingly. try this:
Router.route('/hello/:greeting', {
template: 'hello',
data: function() {
return {greeting: this.params.greeting};
}
});
now you can call:
Router.go('hello', {greeting: 'Whazaaaaaaa'})
Related
Refer to the code below please:
Router.route('/posts/:_id', function () {
this.render('Post', {
to: 'content',
data: function () {
return Posts.findOne({id: this.params._id});
}
});
});
If a Post object has title and body fileds in MongoDB, I can access them from Post.html template like
<h4>Post title: {{title}}</h4>
<h3>Post body: {{body}}</h4>
I would like to access Post object from Post.js in a template helper function. Is it possible?
Update:
According to this question: Meteor data-context with iron-router, I can access the data variable like this:
Template.Post.rendered = function() {
console.log(this.data)
}
Is there a way to do this inside Template.Post.events ?
Seems like you are looking for the Template.currentData() method.
Template.example.events({
'click #test':function(e,t){
console.log(Template.currentData())
}
})
update Seems like using currentData have differents behaviors depending the case check this
So it seems like if you want to use it, you it should be inside a DOM element.
Template.post.events({
'click h4':function(){
console.log(Template.currentData()) // and should return the title.
}
})
based on the stubalio says.
Inside an event handler, returns the data context of the element that
fired the event.
I have a cursor returned from a route, how can I use the data as context in a template?
example:
router.js
this will return a cursor with all documents where parent is equal to the params_id
this.route('my route', {
path: '/myroute:_id',
data: function(){
return MyCollection.find({parent: this.params._id});
}
});
how should my template look like to "iterate" over the cursor? normally if I use MyCollection.find({}) I iterate with #each and give the context a name via a TemplateHelper. I guess
{{#each data}}....{{/each}}
should be right but it doesn´t work.
Setting data in the route sets the context for the template. In the template, the context is accessed via this:
{{#each this}}...{{/each}}
Alternatively, if you prefer to assign a name to your data, can return an object from the route:
data: function(){
return {posts: Posts.find({parent: this.params._id})};
}
And then you can iterate over the documents like so:
{{#each posts}}...{{/each}}
I wonder why the following thing outputs 'hello' instead of 'bye'???
Template:
<template name="example">
{{#with dataContext}}
{{say}}
{{/with}}
</template>
Template Helper:
Template.example.helpers({
dataContext: function() {
return {
say: 'bye'
};
},
say: function() {
return 'hello';
}
});
(Meteor 1.1.0.2)
The shortest answer to this is the helpers have a preference over the data context.
If you rename one of them to something else it should solve your problem.
The order the lookup goes is:
The data context (if it contains a .). {{say}} does not.
The template's helper. {{say}} has a helper for say.
A template
A global helper such as those defined with Template.registerHelper.
The data context
So if the first isn't found, it goes down the list until it finds something
[1]https://github.com/meteor/meteor/blob/90b356061ff2464f11749dc8b43d1a139b233980/packages/blaze/lookup.js#L100-L139
I am using iron-router for my meteor project and everything was going fine but I just ran into some strange behavior.
I have a loop set up for a list of items that looks something like this.
{{#each list_items}}
<div>{{user.username}}
Click here!
</div>
{{/each}}
The JSON object for my user looks something like this:
{
user: {
username: jdoe
},
images: {
low-res-url: http://example.com
},
link: http://example.com/profile
}
Now the {{user.username}} shows up as expected but when I try to put the {{link}} in the href I get an error from iron-router saying
"You called Router.path for a route named undefined but that that route doesn't seem to exist. Are you sure you created it?"
Any help or advice would be appreciated.
Under the hood Iron-Router registers handelbars helper:
Handlebars.registerHelper('link', function (options) {
...
});
Simply change field link to different name like my_link.
As #perhelium mentioned Iron-Router has specified a helper named 'link'
Handlebars.registerHelper('link', function (options) {...});
In order to access an item named 'link' in your JSON object you need to explicitly refer to the JSON object itself.
So your line: Click here!
Would need to be specified as Click here!
I want to create a template/js combo similar to the ones below. What I would like is to have two variables available to the 'collection' template
<template name="collection">
Title: {{title}}
<UL>
{{#each items}}
{{> item}}
{{/each}}
</UL>
</template>
<template name="collection_items">
<LI>{{item_title}}</LI>
</template>
Where the javascript function would be something like:
Template.collection.data = function() {
var record = Record.findOne({whatever:value});
return { title: record.title, items: record.items }
}
I've tried using Handlebars' {{#with data}} helper and return an object as above, but that just crashed the template. I've tried creating a 'top level' function like:
Template.collection = function () {... }
but that also crashed the template.
What I'm trying to avoid is having two separate functions (one Template.collection.title, and one Template collection.items) where each of them calls a findOne on the Record collection where really its the same template and one call should suffice.
Any ideas?
Template.collection = function () {... }
Template.collection is not a function, it's an instance and thus an object.
You can type Template.collection in the console to see something essential as well as Template.collection. and autocomplete that to see its methods and fields.
For a #with example, the Todos indeed doen't seem to contain one as you have outlined in your comments. So, an example use of it can be found here:
https://github.com/meteor/meteor/blob/master/packages/templating/templating_tests.js#L75
https://github.com/meteor/meteor/blob/master/packages/templating/templating_tests.html#L92
Here is another example that I tried that works on both the current master and devel branch:
<head>
<title>test</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</template>
And the JS part of it:
if (Meteor.is_client) {
Template.hello.author = function () {
return {
firstName: "Charles",
lastName: "Jolley"
};
};
}
Any specific reason why you're hoping to avoid two functions?
From your code sample I see one issue: the first template is calling a second template with this line:
{{> item}}
But your second template is not called 'items'. I believe that your second template should be called this way:
<template name="item">
Seems that it would be simple enough to have helper functions for the first and the second. Although I haven't gotten it to work with my own code, I believe the second helper function would want to use the 'this' convention to refer to the collection you're referring to.
Cheers - holling
Tom's answer is correct. I want to just chime in and add that in my scenario the reason why #with was failing was because due to the 'reactive' nature of meteor my first call to load the model resulted in 'undefined' and I didn't check for it. A fraction later it was loaded ok.
The moral is to do something like
var record = Record.findOne({whatever:value})
if (record) {
return record;
} else {
// whatever
return "loading"
}