So I have serverl base templates:
<template name="Base1">
<div>basetitle1</div>
</template>
<template name="Base2">
<div>basetitle2</div>
</template>
and the base templates is included in different templates.
<template name="Parent1">
{{> Base1}} # basetitle1 => Parent1.Title1
{{> Base2}} # basetitle2 => Parent1.Title2
</template>
<template name="Parent2">
{{> Base1}} # basetitle1 => Parent2.Title1
{{> Base2}} # basetitle2 => Parent2.Title2
</template>
basetitle1 and basetitle2 are different when in different parent templates.
So how can I pass data from parent template to child template?
You can pass data to the children template via Object creation using keyword arguments.
Try this:
<template name="Parent">
{{> Base1 basetitle1=Title1}} # Get Title1 from a helper or data
{{> Base2 basetitle2="Parent.Title2"}} # Pass a string
</template>
<template name="Base1">
<div>{{basetitle1}}</div>
</template>
<template name="Base2">
<div>{{basetitle2}}</div>
</template>
Related
I have a template:
<template name="outerTemplateName">
...
{{> Template.dynamic template=inner}}
...
</template>
However, the template that i want to render as inner template also have a dynamic template inside it:
<template name="innerTemplateName">
...
{{> Template.dynamic template=anotherInner}}
...
</template>
Is it possible to use BlazeLayout.render() to achieve something like the template below?
<template name="outerTemplateName">
...
{{> innerTemplateName anotherInner="anotherInnerTemplateName"}}
...
</template>
I don't know about passing Templates to other Templates but you can dynamically switch Templates by passing a String like this.
<template name="outerTemplate">
{{> innerTemplate childTemplateName="templateA"}}
</template>
<template name="innerTemplate">
{{#if showTemplate 'templateA' }}
{{> templateA }}
{{/if}}
{{#if showTemplate 'templateB' }}
{{> templateB }}
{{/if}}
</template>
<template name="templateA">
<h1>I am templateA</h1>
</template>
<template name="templateB">
<h1>I am templateB</h1>
</template>
Template Helper
Template.innerTemplate.helpers({
showTemplate : function (templateName) {
return templateName === this.childTemplateName;
}
});
I want to do something like this:
Component file:
<template name="drop_down">
<span class="dropdown">
{{> primary_element}} <--- load the template named button
<span class="dropdown-panel">
{{> panel_template}} <--- load the template named button_panel
</span>
</span>
</template>
Usage:
{{> drop_down primary_element="button" panel_template="button_panel"}}
<template name="button"> some styled button </template>
<template name="button_panel"> panel content </template>
and then I can reuse it just like this
{{> drop_down primary_element="tmp_btn_2" panel_template="tmp_panel_2"}}
<template name="tmp_btn_2"> another button style </template>
<template name="tmp_panel_2"> other panel content </template>
You should be able to do this with dynamic templates. In blaze you can pass in the template to be used as a variable, as well as the data context itself. They are quite flexible.
For example:
{{> Template.dynamic template=whichTemplate data=myData }}
This would refer to the whichTemplate helper to figure out which template to use and would get the data context from the myData helper. i.e. both the choice of template and the choice of data come from variables.
In your case you are trying to use two dynamic templates in the context of your dropdown template. You can do:
<template name="drop_down">
{{#with myElements}}
<span class="dropdown">
{{> Template.dynamic template=this.primary}}
<span class="dropdown-panel">
{{> Template.dynamic template=this.panel}}
</span>
</span>
{{/with}}
</template
Then your myElements helper just needs to return the names of the templates to use as strings, ex:
Template.dropdown.helpers({
myElements() {
let p1 = "button"; // compute these two based on your own logic
let p2 = "button_panel";
return {primary: p1, panel: p2 };
}
});
I'm new with meteor and at the moment i'm testing out nested templates. More specific, i'm trying to get this pseudo switch working.
I have a PARENT template that gets data from a template.helper function where it gets the data for the {{#each}}.
This is the PARENT template
<template name="result">
{{#each Tresult}}
<div class="jow">
<h3>{{name}}</h3>
<p>{{type}}</p>
<div>{{> Tstatus}}</div>
</div>
{{/each}}
</template>
The PARENT also includes another template {{> Tstatus}}
This is the CHILD template
<template name="Tstatus">
{{#status_is "green"}}
{{> Tstatus_green}}
{{/status_is}}
{{#status_is "red"}}
{{> Tstatus__red}}
{{/status_is}}
{{#status_is "orange"}}
{{> Tstatus__orange}}
{{/status_is}}
</template>
<template name="Tstatus_green">
<span>green</span>
</template>
<template name="Tstatus_red">
<span>red</span>
</template>
<template name="Tstatus_orange">
<span>orange {{number}}</span>
</template>
This template can also include 3 other templates:
Tstatus_green
Tstatus_red
Tstatus_orange
But the problem is, how do i get this pseudo switch working. So i only need to include 1 of the 3 templates, based on it's status color.
And this is the helper function for the PARENT template
Template.result.helpers({
Tresult:function(){
return Ttable.find()
}
})
I would do something like this:
Template.Tstatus.helpers({
getStatusColor:function()
{
//"this" will be the current Ttable document
var color = getColorFunction(this)
return Template["Tstatus_"+color]
}
})
<template name="Tstatus">
{{#with getStatusColor}}
{{>.}}
{{/with}}
</template>
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 three simple Templates in Meteor, and a Collection on the server with any combination of their names. I want to be able to render these templates dynamically based on which of their names are in the Collection.
Currently I am trying to accomplish this by using the client to subscribe to the Collection, and access the names through a template function. Unfortunately, if I try to run ">" on the names, Meteor attempts to render the variable name instead of the Template pointed to by its value.
So instead of rendering the html in template1, template2, and template3, the output is merely their names on the page: "template1 template2 template3".
Here is the code I've been using, I hope there's a way to solve my issue without having to run Meteor.render manually.
Server js:
TemplatesToRender = new Meteor.Collection("templatesToRender");
TemplatesToRender.insert({templateName: "template3"});
TemplatesToRender.insert({templateName: "template2"});
Client html:
<body>
{{#each templatesToRender}}
{{> templateName}} // meteor trying to render a template
// called "templateName" instead of the
// variable inside templateName.
{{/each}}
</body>
<template name="template1">
<span>Template 1</span>
</template>
<template name="template2">
<span>Template 2</span>
</template>
<template name="template3">
<span>Template 3</span>
</template>
You can make a render helper:
Handlebars.registerHelper('render', function(name, options) {
if (Template[name])
return new Handlebars.SafeString(Template[name]());
});
And use it with
{{render templateName}}
You might want to try this
in your html
<body>
{{> templateToRender}}
</body>
<template name="templateToRender">
{{! use below to detect which template to render}}
{{#if templateName "template1"}}
{{> template1}}
{{/if}}
{{#if templateName "template2"}}
{{> template3}}
{{/if}}
{{#if templateName "template3"}}
{{> template3}}
{{/if}}
</template
<template name="template1">
<p>this is template1</p>
</template>
<template name="template2">
<p>this is template2</p>
</template>
<template name="template3">
<p>this is template3</p>
</template>
in your script
Template.templateToRender.templateName = (which) ->
# if user have a field like templateName you can do things like
tmplName = Meteor.user().templateName
# Session.equals will cause a template render if condition is true.
Session.equals which, tmplName
Meteor 1.0 just came out today, and I just want to update this for 2014 :)
https://docs.meteor.com/#/full/template_dynamic
{{> Template.dynamic template=template [data=data] }}
Sample Usage:
{{#each kitten}}
{{> Template.dynamic template=kitten_type data=this }}
{{/each}}