If I have a parent template Container with a child template Content avec only a button :
<head>
<title>test</title>
</head>
<body>
{{> Container}}
</body>
<template name="Container">
{{# Content callback = callBack }}
<button>ok</button>
{{/Content}}
</template>
<template name="Content">
{{> UI.contentBlock}}
</template>
If can pass a function to the callback. Like that :
Template.Container.helpers( {
callBack: function () {
return function () {
console.log( 'this is my callback' );
}
}
} );
So in my content template, I can call a function from my parent template. Like this for instance :
Template.Content.events( {
'click button': function ( e, tmpl ) {
tmpl.data.callback();
}
} );
But sometimes, I need to make it happen the other way. The parent calling a function in his child. What's your way of doing it ?
EDIT :
I saved it in a meteorpad to show it in action and to make it easy to fork : http://meteorpad.com/pad/48NvCFExxW5roB34N/test-pass-callback-to-parent
Here's a pattern you could use. Define a class Child and a template child; the idea is that inside the child template, the data context is a Child instance. For example, I'll create a component which has a number that can be incremented by pressing a button.
<template name="child">
<button class="increment">{{number.get}}</button>
</template>
function Child() {
this.number = new ReactiveVar(0);
}
Template.child.events({
"click .increment": function () {
this.number.set(this.number.get() + 1);
}
});
In the parent's created callback, create a Child instance and store it on the template instance. Then in the parent template, call out to child, passing in the Child as a data context:
Template.parent.created = function () {
this.childInstance = new Child();
}
Template.parent.helpers({
childInstance: function () {
return Template.instance().childInstance;
}
});
<template name="parent">
{{> child childInstance}}
</template>
Now you can define methods on the Child prototype and call them from the parent template, for example:
Child.prototype.getNumberTimesTwo = function () {
return this.number.get() * 2;
}
<template name="parent">
{{> child childInstance}}
That number multiplied by two is: {{childInstance.getNumberTimesTwo}}
</template>
Based on my experience with Meteor, it seems like it favors more of an event driven UI design. This means that you would not directly call the parent or child methods directly, but you would fire a custom event or set a Session variable. So you could do something like:
Template.Container.helpers( {
callBack: function () {
Session.get('button.lastClickTime');
console.log( 'this is my callback' );
}
} );
Template.Content.events( {
'click button': function ( e, tmpl ) {
Session.set('buttom.lastClickTime', new Date());
}
} );
The Session object is reactive so the callback method will be called anytime that 'button.lastClickTime' Session value is set.
Then you could just reverse the set/get calls to notify the child from the parent.
You can register an event handler on the parent template that triggers on events in the child template by using a Selector that matches elements in the child template, like this:
Template.Container.events( { // 'Container' is the parent template
'click button': function ( e, tmpl ) { // Selector for an element in the child-template*
// You will now have access to the parent's context instead of the child's here.
}
} );
*) Assuming there are no other buttons in the parent template. If so, make a unique name to the button so you can uniquely select it from the parent.
You can also create template functions in the child and then set those on the parent when the child gets created. This requires use of the meteor-template-extension package. Though if you dig into that package you could just pull out the code that does the parent() function.
Template.child.onCreated(function() {
let instance = this;
instance.someFunction = function() {...};
instance.parent(1, false).someFunction = instance.someFunction;
});
Then this can be called by the parent in an event handler (or anywhere) for example.
Related
I have 2 separate templates:
<template name = "MusicControl">
<!-- Some Logics here -->
</template>
<template name = "MusicSystem">
<!-- Some Logics here ("click" event) -->
</template>
I have 2 JavaScript files associated with these 2 templates.
What I want is that if an event occurs ("click" event) on the MusicControl template, it sets some sort of global variable (but not Session variable) so that I can access it in another template as a helper function.
How to implement in Reactive-Dict in Meteor?
Do not worry I have the helper functions defined for both the template in their respective js.
And one thing, these <templates> are independent of each other, I just want to listen the event in <template 1> on <template 2> by using some sort of global variable.
A simple version of #zim's answer is:
HTML (actually Spacebars)
<template name="Parent">
{{> Child1 sharedVar1=sharedVar}}
{{> Child2 sharedVar2=sharedVar}}
</template>
JavaScript
import { ReactiveVar } from 'meteor/reactive-var';
// Just initialize the variable. Could also be within the scope of a template.
var myReactiveVar = new ReactiveVar();
Template.Parent.helpers({
// This is what will be sent to Child1 and Child2.
sharedVar: function () {
return myReactiveVar;
}
});
Template.Child1.helpers({
myValue: function () {
// As usual, this will be reactive.
return Template.instance().data.sharedVar1.get();
}
});
Template.Child2.events({
'event selector': function (event, template) {
// This change will trigger an autorun of Child1 myValue helper.
template.data.sharedVar2.set(myNewValue);
}
});
(of course you can split these into several JS files)
Example with a demo app using Meteor 1.6.1 and Blaze: https://github.com/ghybs/meteor-blaze-templates-share-data
for this scenario, i generally use a reactive variable owned by the parent, whose job it is to coordinate among its children. i would not use a global variable here.
below are the basics. Child1 sets the shared var and Child2 uses it. the parent owns it. Child1 and Child2 have no relationship to one another.
<template name="Parent">
{{> Child1 sharedVarSetter=getSharedVarSetterFn}}
{{> Child2 sharedVar=sharedVar}}
</template>
JS:
Template.Parent.onCreated(function() {
this.sharedVar = new ReactiveVar();
});
Template.Parent.helpers({
sharedVar() {
return Template.instance().sharedVar.get();
},
getSharedVarSetterFn() {
let template = Template.instance();
return function(newValue) {
template.sharedVar.set(newValue);
}
}
});
Template.Child1.onCreated(function() {
this.sharedVarSetterFn = new ReactiveVar(Template.currentData().sharedVarSetter);
});
and somewhere in Child1 (helper, event handler, what have you):
let fn = template.sharedVarSetterFn.get();
if (_.isFunction(fn)) {
fn(newValue);
}
here, i've shown just 1 shared var. but if you have multiple, a reactive dict could work the same way.
I'm working in meteor trying to use a reactive var to switch the content in the main panel between two tabs. I've been able to test the content successfully on it's own so I'm fairly confident the issue lies in the reactive var code. Specifically I think the issue is with the tab: function() but after many searches and reading documentation I haven't found a solution.
The relevant js:
Template.content.onCreated( function() {
this.currentTab = new ReactiveVar('form');
});
Template.content.helpers({
tab: function() {
return Template.instance().currentTab.get();
}
});
Template.content.events({
'click .nav li': function (event, template) {
var currentTab = $( event.target ).closest( "li" );
currentTab.addClass( "active" );
$( ".nav li" ).not( currentTab ).removeClass( "active" );
Template.currentTab.set();
}
});
The relevant html:
<template name ="content">
<ul class ="nav">
<li data-template="form">Form</li>
<li data-template="results">Results</li>
</ul>
{{ > Template.dynamic template=tab}}
</template>
{{ > Template.dynamic template=tab}}
This is calling the tab helper to get a string that is the name of the template you want to show here. It should work the first time because you start out by setting the value of currentTab to "form".
To change the template that gets shown, you need to change the value of currentTab to a string matching the name of the new template. You're not doing that.
Template.currentTab.set();
This is where you should be doing that. Instead you're calling set() on the currentTab property of Template, which I don't think exists. Template with a capital T is a Meteor object, not the template instance that I think you're trying to refer to. And to set a new value for currentTab, you actually need to provide a value. Like so:
Template.content.events( {
'click .nav li': function(event, instance) {
//logic to decide which template you want to show
//and put the name of that template in templateName
instance.currentTab.set(templateName)
}
});
Is there a clean way to get the parent template of the current template? Nothing is officially documented in Meteor's API.
I'm talking about the Blaze.TemplateInstance, not the context (i.e. not Template.parentData).
In the end, I've extended the template instances similarly with Meteor's parentData, like this:
/**
* Get the parent template instance
* #param {Number} [levels] How many levels to go up. Default is 1
* #returns {Blaze.TemplateInstance}
*/
Blaze.TemplateInstance.prototype.parentTemplate = function (levels) {
var view = this.view;
if (typeof levels === "undefined") {
levels = 1;
}
while (view) {
if (view.name.substring(0, 9) === "Template." && !(levels--)) {
return view.templateInstance();
}
view = view.parentView;
}
};
Example usage: someTemplate.parentTemplate() to get the immediate parent
Is there a clean way to get the parent template of the current
template?
Currently, none that I know of, but this is supposed to happen sometime in the future as part of a planned "better API for designing reusable components" (this is discussed in the Meteor post 1.0 roadmap).
For the moment, here is a workaround I'm using in my projects :
// extend Blaze.View prototype to mimick jQuery's closest for views
_.extend(Blaze.View.prototype,{
closest:function(viewName){
var view=this;
while(view){
if(view.name=="Template."+viewName){
return view;
}
view=view.parentView;
}
return null;
}
});
// extend Blaze.TemplateInstance to expose added Blaze.View functionalities
_.extend(Blaze.TemplateInstance.prototype,{
closestInstance:function(viewName){
var view=this.view.closest(viewName);
return view?view.templateInstance():null;
}
});
Note that this is only supporting named parent templates and supposed to work in the same fashion as jQuery closest to traverse parent views nodes from a child to the top-most template (body), searching for the appropriately named template.
Once this extensions to Blaze have been registered somewhere in your client code, you can do stuff like this :
HTML
<template name="parent">
<div style="background-color:{{backgroundColor}};">
{{> child}}
</div>
</template>
<template name="child">
<button type="button">Click me to change parent color !</button>
</template>
JS
Template.parent.created=function(){
this.backgroundColor=new ReactiveVar("green");
};
Template.parent.helpers({
backgroundColor:function(){
return Template.instance().backgroundColor.get();
}
});
Template.child.events({
"click button":function(event,template){
var parent=template.closestInstance("parent");
var backgroundColor=parent.backgroundColor.get();
switch(backgroundColor){
case "green":
parent.backgroundColor.set("red");
break;
case "red":
parent.backgroundColor.set("green");
break;
}
}
});
What I've been doing so far is that if I need to access the parent instance in a child template's function, I try to instead refactor this function to declare it on the parent template, and then pass it as argument to the child, who can then execute it.
As an example, let's say I want to increment a template variable on the parent template from within the child template. I could write something like this:
Template.parentTemplate.onCreated(function () {
var parentInstance = this;
parentInstance.count = new ReactiveVar(1);
});
Template.parentTemplate.helpers({
incrementHandler: function () {
var parentInstance = Template.instance();
var count = parentInstance.count.get();
return function () {
var newCount = count + 1;
parentInstance.count.set(newCount);
};
}
});
Then include my child template:
{{> childTemplate handler=loadMoreHandler}}
And set up my event:
Template.childTemplate.events({
'click .increment-button': function (event, childInstance) {
event.preventDefault();
childInstance.data.handler();
}
});
If you don't want to extend Blaze.TemplateInstance you can access the parent instance like this:
Template.exampleTemplate.onRendered(function () {
const instance = this;
const parentInstance = instance.view.parentView.templateInstance();
});
Only tested in Meteor 1.4.x
You can use a package like Aldeed's template-extension
The following method is available there:
templateInstance.parent(numLevels, includeBlockHelpers)
If I have an {{# each}} binding in Meteor, and I want to update a property on only one instance of the template inside the #each. How would I do that? I've tried setting a value on the "template" object inside the events map, but that doesn't seem to be reactive. I've also tried binding to a Session property, but that will cause every instance to update instead of just the one I want...
for example:
{{#each dates}}
{{> dateTemplate}}
{{/each}}
<template name="dateTemplate">
{{date}}
<span style="color: red;">{{errorMsg}}</span> <--- how do i update errorMsg?
</template>
Template.dateTemplate.events({
'click': function(event, template) {
template.errorMsg = 'not valid'; <--- this doesn't do anything
}
});
EDIT TO ADDRESS ANSWER BELOW:
Template.dateTemplate.events({
'click': function(event, template) {
template.errorMsg = function() { return 'not valid';} <--- this also doesn't do anything
}
});
You don't have to use handlebars for this, because its not something that needs reactivity to pass the message through, reactive variables work best with db data, or data that would be updated by another client over the air.
You could use JQuery (included by default) to update it, it can also get a bit fancier:
<template name="dateTemplate">
{{date}}
<span style="color: red;display: none" class="errorMessage"></span>
</template>
Template.dateTemplate.events({
'click': function(event, template) {
$(template.find('.errorMessage')).html('Your Error Message').slideDown();
}
});
Ive edited it so the error is hidden by default, and slides down with an animation
I'm experimenting handling this by passing a different reactive object to each instance of the template. Then the template can bind to the reactive object (which is unique per instance) and we don't have any extra boilerplate.
It ends up looking like this:
Initial render:
Template.firstTemplateWithPoll(ContextProvider.getContext())
Template.secondTemplateWithPoll(ContextProvider.getContext())
// (I actually pass getContext an identifier so I always get the same context for the same template)
JS:
Template.poll.events = {
'click .yes' : function() {
this.reactive.set('selection', 'yes');
},
'click .no' : function() {
this.reactive.set('selection', 'no');
}
};
Template.poll.selection = function(arg) {
return this.reactive.get('selection');
}
Template:
<template name="poll">
<blockquote>
<p>
Your selection on this poll is {{selection}}
</p>
</blockquote>
<button class='yes'>YES</button>
<button class='no'>NO</button>
</template>
template.errorMsg should be a function that returns your error.
Template.dateTemplate.events({
'click': function(event, template) {
template.errorMsg = function() { return 'not valid'; };
}
});
I would like to add specific event only to elements that match a certain criteria, in this case, if the element is selected in the session or not.. Here's some example code:
Template.leaderboard.events({
'click Session.get("selected_team") .win': function () {
Teams.update(Session.get("selected_team"), {$inc: {won: 1, score : 5, played: 1}});
}
});
This looks for the selected team in the session & then updates that item. Does that make sense? Is there a better way to achieve what I want?
In the leaderboard example, the selected player is given a css class of "selected", so all you need to do is:
Template.player.events({
'click .selected': function () {
console.log('clicked on the selected player:', this.name);
}
});
You can use the same pattern for other elements that you might want to trigger events on conditionally: assign a particular css class to them (or not) depending on the condition.
If you prefer not to add a css class to elements through the templates (for whatever reason), you're better off simply checking your condition in Javascript:
Template.player.events({
'click': function () {
if (Session.get("selected_player") === this._id) {
console.log('clicked on the selected player:', this.name);
}
}
});
It won't work the way you're writing it since you've included the Session.get statement as part of the string. Something like this might work:
Template.leaderboard.events({
'click ' + Session.get("selected_team") + ' .win': function() {}
});
...but I wouldn't recommend it. Instead you should probably do something like this:
Template.leaderboard.events({
'click .team': function() {
Teams.update(this.id, {...});
}
});
Template.leaderboard.teams = function() {
return Teams.find({});
}
In your view:
<template name="leaderboard">
{{#each teams}}
<div class="team">{{team}}</div>
{{/each}}
</template>
Each .team still remembers its context within the leaderboard template, referred to as this inside the event handler, so you can just pass this.id to the query.