<template name="add">
{{> addst grName="{{name}}" }} // tried without "" throwing error
<div >{{name}}</div> //Displaying the name
</template>
<template name="addst">
{{grName}} //Not working displaying {{name}}
</template>
why is the above code not working.
FYI, in the router I'm sending the data to add tempate
groups.findOne({_id:this.params._id}); in data context
This is the correct syntax : no "" nor {{}}.
<template name="add">
{{> addst grName=name}}
<div>{{name}}</div>
</template>
<template name="addst">
{{grName}}
</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'd like to access a parameter template while I'm on a {{#each}} already. Something like:
<template name="overview">
{{> userList users=users level=0}}
</template>
<template name="userList">
{{#each users}}
<div class="level{{../something}}">
<!-- not working, how can i access {{something}} here ? -->
{{>userList users=users level=subLevel}}
{{name}}
{{/each}}
</template>
Template.userList.helpers({
subLevel: function() {
return this + 1;
}
});
but it's not working, do you have any idea ?
Technically, I'm calling recursively a template, and I'd like to know at what level my template is.
I'm not sure what you're trying to do but this doesn't look right. A template calling itself leads to an infinite loop. For example, create a new meteor project and try to call {{> hello}} inside "hello" template. It doesn't work.
<head>
<title>test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
{{> hello}}
</template>
There must be another way to do what you're trying to do...
<template name="overview">
{{> userList users=users level=0}}
</template>
<template name="userList">
{{#each users}}
<div class=level>
{{>userList users=users level=subLevel}}
{{name}}
{{/each}}
</template>
Because you have enclosed level variable in double quotes that will not be evaluated.
Ok, I finally found that the best way to achieve that was to add a level key in my array of users instead of passing it with a parameter. Spacebars seems to no be able to achieve what I wanted initially.
I'm having trouble understanding why AutoForm is not working 100% here. The client-side validation works but submitting the form is not calling the meteor method insertQuestion.
As soon as I replace the contents of the modal template with the modalQuestion template it works and the meteor method is called. So my best guess here is that it has got something to do with {{> Template.dynamic }} include but haven't been able to solve this problem myself.
Can anyone tell me why the dynamic template include is not playing nice here?
layout.html
<template name="layout">
{{> modal}}
</template>
layout.js
Session.set('modalData', {template: "modalQuestion", title: "Test"});
modal.js
Template.modalBlock.onRendered(function () {
this.autorun(function() {
if (Session.get('modalData')) {
$('#modal').modal();
}
});
});
modal.html
<!-- A template to include in index.html that dynamically renders the a modal template -->
<template name="modal">
{{#if modalData}}
{{> Template.dynamic template=modalData.template data=modalData}}
{{/if}}
</template>
<!-- A generic block to be used by our modals -->
<template name="modalBlock">
<div id="modal">
<header>{{title}}</header>
{{> Template.contentBlock }}
</div>
</template>
<!-- A specific modal template -->
<template name="modalQuestion">
{{#modalBlock title=title}}
{{ #autoForm schema=SchemasQuestion meteormethod="insertQuestion" type="method" id="insertQuestionForm" class="form" }}
{{> afQuickField name="text" label=false placeholder="schemaLabel" }}
<button type="submit" class="button">Submit</button>
{{ /autoForm }}
{{/modalBlock}}
</template>
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>
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}}