I'm trying to pass an array to another template in Meteor.
Why? Because I would like to create a small template for each Bootstrap element, allowing me to reuse components much more easily.
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems=["item1", "item2"] }}
This does not seem to work unfortunately.
Any clue? Does what I'm doing even make sense? I'm new to Meteor.
Thanks!
Spacebars is currently pretty limited in what it can accept - you'll need to add a helper to accomplish this:
Template.myTemplate.helpers({
listItems: ['item1', 'item2']
});
And them modify your template:
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems="{{listItems}}"}}
Make sure to update myTemplate to the parent template's name.
Related
Consider the following templates:
layout
pageLayoutStandard
aboutUs
'layout' is my top-level template, which I specify using:
Router.configure({
layoutTemplate: 'layout',
});
Inside layout.html I have the following:
<main id="site-main" role="main">
{{>Template.dynamic template=page.pageLayoutTemplate }}
</main>
I pass some data in from the route: a page object which has a property 'pageLayoutTemplate', having the value 'pageLayoutStandard'.
Inside 'pageLayoutStandard' template, I have:
{{> yield }}
If I visit the '/about-us' route, I render the 'aboutUs' template into 'pageLayoutStandard' - no worries.
And now to my problem...
In my 'aboutUs' template, I expect the 'data' property of the instance to contain the data I passed down from iron-router. However, I find that my the data property contains a 'Template' object; specifically, it contains 'pageLayoutStandard'.
So it looks like 'yield' doesn't like living in a sub-layout - it wants to live at the top level layout for it to get the data from the route. This I validated by moving my yield to the top level layout - the 'aboutUs' template then gets the right data.
Is there any way I can get 'yield' to get the correct data context when it exists in a sublayout?
One solution is to access the data using
Router.current().data()
I my self am fairly new to Iron-Router, but I believe it may be a similar issue that I cam across in another way. There are also several ambiguities in your question, such as where and how are you specifically defining the data context.
Basically I discovered that {{> yield}} creates it's own <body> tags. This also means that things like Template.body.events(); don't propagate into this new Iron-router <body>. This is a known "bug" with Iron-Router.
There is a workaround that has been developed to solve that particular issue, but I'm not sure it's relevant to your case, or at least may not solve the problem since you are not looking to propagate the main body template.
In the end it may be that your routing logic is somewhat inverted, as you mentioned, with the intended usage of Iron-Router.
I believe a better way to perform what you want would be to have:
<main id="site-main" role="main">
{{> yield}}
</main>
With something like this in your router definition
Router.map(function (){
this.route("/about-us", {
template: "pageLayoutStandard"
}
});
You should then be able to set your data context and rendering as per usual.
What is the use of Template.myTemplate.rendered in Meteor?. I had studied the document but i didn't understand the exact functionality.The document says Provide a callback when an instance of a template is rendered. What is the meaning of instance of a template is rendered.Can you please suggest me with an example?
When the callback is fired, an instance of the template has been rendered (added to the document). It can be useful if you for example want to manipulate the elements in the template through the use of a JavaScript library, for example CodeMirror, as I used in one of my projects. For example:
<template name="test">
<textarea></textarea>
</template>
Template.test.rendered = function(){
// Make the textarea highlight the code (kind of).
var myCodeMirror = CodeMirror.fromTextArea(this.find('textarea'))
}
I have a template that contains a second template, I'd like to make the second template variable ie. it can change depending on what I pass as the template name.
<template name="template1">
<div>
{{> template2}}
</div>
</template>
So when my main page shows template1 I want to specify the template to use for template2.
<template name="main">
{{> template1 TemplateArgs }}
</template>
I know how to set up TemplateArgs - it would contain the name of the template I want to use for template2.
Is this possible?
A future version of meteor allows this with the new Meteor UI functionality. Currently you need to do this manually in a different way. See Meteor set overall template context.
Meteor UI
Beware meteor UI is still in a betaish and is a bit buggy. More details on the post in the references
If you use meteor UI (which you can use in preview mode with)
meteor --release template-engine-preview-5
Then you can do stuff like this
Template.main.template1 = function (value2) {
return Template["template2"].withData({foo: "bar", value2: value2}));
}
Then html like
{{>template1 "valueofvalue2"}}
Current Version / Spark rendering
There is a way in the current version of meteor but it wont work with the UI release since Meteor.render will be phased out in favour of using DOM objects
Template.main.template1 = function(value2) {
return Meteor.render(Template.template2({foo: "bar", value2: value2});
}
Then something like this in your html. You might have to play around with the data to get it working but its something like this
{{template1 "value2"}}
References:
https://groups.google.com/forum/#!topic/meteor-core/gHSSlyxifec
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
http://www.youtube.com/watch?v=aPf0LMQHIqk
It is very useful to use template.find to locate DOM elements inside a specific template instance. But what happens when the template iterates {{#each}} over some tags without using a sub-template?
<template name="top">
{{#each items}}
<img src="{{src}}">
Click me
{{/each}}
</template>
Tempalte.events(
'click a': (event, template) ->
template.find('img') # This doesn't do the trick
# Is there a better way?
)
Is there a way to easily access the img element associated with the click event?
I know I can use event.target or create another template an use it inside the {{#each}} block. I wonder if there is a better/shorter way to do it.
You could add an #index to the img to make it possible to select it (using js or CSS). How to get index in Handlebars each helper?
Is there a variable passed into every handlebar.js template that contains all the context content that is accessible by the template?
e.g. I'm creating a template, but I don't know all the context content accessible by the template. I want to be able to type into the template {{ debug }} and handlebars.js will spit out all the context content into the HTML
You can use the following code to iterate through this object:
{{#each this}}
{{#key}}: {{this}}
{{/each}}
or a similar piece of code iterating through #root object:
{{#each #root}}
{{#key}}: {{this}}
{{/each}}
Handlebars has built-in helper log.
You just need to set logging level to DEBUG.
Handlebars.logger.level = 0;
Then use helper:
{{log this}}
EDIT: Sorry, this will not write context to HTML, helper uses console.log. For outputting to HTML you need to write custom helper that will use for example JSON.stringify.
Though this question is somewhat old, someone might find this usefull. You can just dump the handlebars current context into plain text with;
{{{.}}}