I am learning meteor and I cannot get my helper function to return some static text.
<head>
<title>LeaderBoard</title>
</head>
<body>
<h1>Leaderboard</h1>
<p>{{player}}</p>
</body>
in JS
if(Meteor.isClient){
Template.leaderboard.helpers({
player: function(){
return "text";
}
});
}
This only returns the Leaderboard header
UPDATE:
changed to:
LeaderBoard
<body>
<h1>Leaderboard</h1>
<p>{{player}}</p>
</body>
<template name="leaderboard">
{{player}}
</template>
and JS is still the same and it still does not work
So, there are few mistakes you made. Let's deconstruct it.
What is a template?
A template is a piece of code that renders into DOM and can be manipulated using helpers, events and such. For you to use any template, there has to exist one. They can either be put into your app from packages or made by yourself. In this particular case, you're looking for the latter.
To define a template, pick any HTML file or create a new one and define it in HTML way:
<template name="theTemplate">
Hello, I am the template.
</template>
So now you can inject this template wherever in the DOM you want, using this syntax:
<body>
<h1>My super app</h1>
<div>{{> theTemplate}}</div>
</body>
It will render into
<body>
<h1>My super app</h1>
<div>
Hello, I am the template.
</div>
</body>
or, in fact, something a bit uglier since Meteor preserves all the indentation and stuff.
How can I put changeable text into the template?
You're already right that you need helpers for that. A helper is a function that returns an Object (be it String, Number, etc.) which is being injected as is, as if it was document.writed.
Helpers for any template are defined in this way:
Template.theTemplate.helpers({
coolestString: function () {
return 'I am the coolest string put by a helper.';
}
});
Note that Template object contains theTemplate property. It happened exactly after Meteor picked up your template definition and then stored it into an object with helpers method (and a bunch of other useful methods, too).
If you remove theTemplate template definition (aka HTML), the Template object will not have its theTemplate property, and the whole thing will throw a TypeError since you try to access a property of undefined.
How do I put values returned by helpers into the template?
Simply use {{ ... }} syntax. Say, you have a helper coolestString and you need to fetch value from it, whatever it is, and put into h1 tag:
<template name="theTemplate">
<h1>{{ coolestString }}</h1>
</template>
Note the difference between {{> ...}} and {{ ...}}. The former inject a template, the latter inject a value from current context; template's helpers stay within its root context (or just forget it if you don't understand contexts yet).
So, what should I do to use template in my app?
To make a conclusion,
Define a template.
Optionally, define its helpers. Each helper should return a string, a number, an array or an object.
Access helpers' values within the template using {{ ... }} syntax.
Inject the template into your document using {{> ...}} syntax.
That's it.
Okay, show me the whole code!
In myCoolestApp.html,
<body>
{{> theTemplate}}
</body>
<template name="theTemplate">
{{ coolestAppName }}
</template>
And in myCoolestApp.js,
if (Meteor.isClient()) {
Template.theTemplate.helpers({
coolestAppName: function () {
return 'My super cool app!';
}
});
}
Done!
But what if I want to omit template?
In general, a helper by definition belongs to some template, so the hierarchy of injection is the body, then the template, then the helper. But it is possible to inject a helper right into document body and omit intermediary template. You do so with Template.registerHelper method:
Template.registerHelper('theHelper', function () {
return 'I am helper'; // add some logic here and see how it works; hint: reactively.
});
What you do then is just put it into your document:
<body>
{{ theHelper }}
</body>
which gets rendered to
<body>
I am helper
</body>
The principle behind Template.registerHelper is DRY, don't repeat yourself. Sometimes you need to provide exactly same data to more than one template, so at first you would think you have to copy helpers code. But this method helps avoid unnecessary repetition.
You can use more complex objects, covered with more complex logic, this way, or you can even put Mongo collections into the document directly.
Option 1
In case you dont have multiple pages/screens for your app. Edit your template html like this.
<head>
<title>LeaderBoard</title>
</head>
<body>
<h1>Leaderboard</h1>
{{> leaderboard}}
</body>
<template name="leaderboard">
{{player}}
</template>
PS:- {{player}} refers to the template helper "player" and {{> leaderboard}} refers to a template ( This is handlebar syntax ).
Option2 : Your template should look like this.(Assuming you have multiple pages/screens for you app - it would be better if you use some kind of router)
A main layout page - call it master.html
<head>
<title>LeaderBoard</title>
</head>
<body>
</body>
A template named leaderboard. call it leaderboard.html
<template name="leaderboard">
{{player}}
</template>
Then your helper with the same code that you provided in the question.
This should work.
Related
In Polymer 1.0+, how do you pass in a template from the light dom to be used in the dom-module? I'd like the template in the light dom to have bind variables, then the custom element use that template to display its data.
Here is an example of how it would be used by the component user:
<weather-forecast days="5" as="day">
<template id="forecast-template">
<img src="{{day.weatherpic}}">
<div>{{day.dayofweek}}</div>
<div>{{day.wordy}}</div>
<div>{{day.highlowtemp}}</div>
</template>
</weather-forecast>
This weather-forecast component would contain an iron-list in the dom-module and ideally, the component would reference the "forecast-template" inside the iron-list that would bind the variables to the element. Ultimately, it would generate a 5-day forecast using that template. My issue is that I haven't seen an example of bind-passing variable based templates into a Polymer 1.0 custom element. I would think this or something similar would be fairly commonplace.
The following is an example of how I would like to see it work on the client side, but no luck yet. Although the template is successfully references, it only displays once, while other fields actually do show in the loop.
<dom-module id="weather-forecast">
<template is="dom-bind">
<iron-list items="[[days]]" as="day">
<content selector='#forecast-template'"></content>
</iron-list>
</template>
</dom-module>
Any input is appreciated. Thanks!
You cannot use dom-bind inside another polymer element.
Your first element should just be dom-bind
<template is="dom-bind">
<iron-list items="[[days]]" as="day">
<weather-forecast day=[[day]]></weather-forecast>
</iron-list>
</template>
Your second element should be weather-forecast
<dom-module id="weather-forecast">
<template>
<style></style>
<img src="{{day.weatherpic}}">
<div>{{day.dayofweek}}</div>
<div>{{day.wordy}}</div>
<div>{{day.highlowtemp}}</div>
</template>
<script>
Polymer({
is: "weather-forecast",
properties: {
day: {
type: Object
}
}
});
</script>
</dom-module>
If this does not work, try wrapping the weather-forecast tag inside a template tag inside iron-list.
You can use the Templatizer. You can look at my blog for some example (there's also a Plunker link).
Unfortunately there seems to be some bug or limitation, which breaks two way binding:
Add a "dynamic" element with data-binding to my polymer-element
Polymer: Updating Templatized template when parent changes
Two way data binding with Polymer.Templatizer
I realise that this has been brought up before, and that Template.dynamic isn't designed to take in a parameter if its template parameter is a helper.
But here is what I would like to do:
// a global helper that composites the template's name using domain-specific and global parameters
Template.registerHelper('templateName', function (name) {
return name + Session.get('someVariable');
});
<!-- use case: a template calling two dynamic ones -->
<template name="someTemplate">
<div class="some-class">
{{> Template.dynamic template=templateName 'title' }}
</div>
<div class="another-class">
{{> Template.dynamic template=templateName 'content' }}
</div>
</template>
This pattern is extremely DRY and it avoids having to set up nested conditionals and rewrite quasi-identical templates each with minimal changes.
Right now, I've got this:
Template.registerHelper('templateName', function () {
var dt = this.dName || Template.parentData().dName;
return dName + Session.get('someVariable'));
});
<template name="someTemplate">
{{> segment dName="title"}}
{{> segment dName="content"}}
</template>
<template name="segment">
<div class="some-class">
{{> Template.dynamic template=templateName }}
</div>
</template>
It works, but it isn't ideal, because;
confusion-prone need to include the parameter for the dynamic template's name in the parent template's call
only ever being allowed one Template.dynamic per template due to one parameter, leading to scalability issues
putting the dName parameter in the template's data context is mixed in with local data, requiring the hacky check whether it's accessible in the current one or the parent's
any further complexity in the DOM requires lots of nested conditionals for parameters or many slightly different static templates, leading to bloat
Are there plans to add this functionality? Am I going about this the wrong way? Did anyone else run into these issues?
Thanks for reading.
There is a trick to doing this with {{with}}. See here:
https://forums.meteor.com/t/pass-argument-to-helper-in-template-dynamic-call/3971
Using Polymer, I am attempting to instantiate several ajax-service elements using template binding, <template repeat=...>.
Code is as follows:
<template repeat="{{viewName, i in views}}">
<section hash={{viewName}} layout vertical center-center on-tap={{closeOpenDrawer}}>
<core-ajax id="ajaxService" auto response={{list}}" url="../componentsItems/demo-components.json"></core-ajax>
<template repeat="{{element, j in list}}">
<workspace-elem class="dropped" name="{{element.name}}"></workspace-elem>
</template>
</section>
</template>
The problem is, each ajax response is concatenated to a shared list variable, rather then instantiating its own local list variable per repeated template, so when the sub template is triggered, it generates <workspace-elem>s in each section for the sum of data from all ajax calls.
Is there an easy way to solve this? Is there something I am over looking?
EDIT:
Same sort of problem occurs with the inner template. Each instantiated inner template shares the list variable, if anything is pushed to template.model.list, all instantiated template models are updated.
When you use response={{list}} in the template, you are not creating that variable, but you are binding the value of the response attribute to an existing variable called ‘list’.
The question you need to ask yourself is: ‘Where does the “list” variable that I'm binding to come from?’ It is not obvious from the snippet you mention, but it's very likely that it's coming from some enclosing custom element, so it's only natural that it will be shared between the iterations of the template (though I'm surprised that it get concatenated instead of overwritten…). I think a good solution would be to encapsulate the code you have in the outer template in a custom element to hold the variable:
<polymer-element name="my-element" attributes="viewName">
<template>
<!--Your original code starts here-->
<section hash={{viewName}} layout vertical center-center>
<core-ajax id="ajaxService" auto response={{list}}" url="../componentsItems/demo-components.json"></core-ajax>
<template repeat="{{element, j in list}}">
<workspace-elem class="dropped" name="{{element.name}}"></workspace-elem>
</template>
</section>
<!--Your original code ends here-->
</template>
<script>
Polymer({
publish: {
list: null
},
created: function() {
// Create your array on instantiation of an element
this.list = [];
}
}
</script>
</polymer-element>
<template repeat="{{viewName, i in views}}">
<my-element on-tap={{closeOpenDrawer}}></my-element>
</template>
I think that should solve your problem. Alternatively, I think it might help to make the outer template an auto-binding template(‘is="auto-binding"’). Then the model of the template would be the template itself, but since I have not used this facility very often, I'm not quite sure (it might be that you're then loosing the ability to bind to ‘views’).
My app displays a collection of items and I'd like to add an item drilldown view.
I've only been able to get half of the solution working; I find the appropriate document and use that document to render the template:
var item = Items.findOne('my_id');
$('#main').html(
Meteor.render(function () {
return Templates.item(item)
}));
This renders the individual item successfully and the appropriate events are bound.
Here's the rub, the template isn't reactive! If I change its data using the associated event handlers or from the console, the template isn't updated. However, a page refresh will reveal the updated data.
I'm a Meteor noobie, so it's probably something very simple. Any help would be greatly appreciated.
It seems to me that you aren't using the templates in they way they were really intended to be.
A meteor app starts with the main html markup which can only exist once in your app..
<head>
<title>My New Fancy App</title>
</head>
<body>
{{>templateName}}
</body>
Then you add a template..
<template name="templateName">
{{#each items}}
template or relevant html goes here..
{{/each}}
</template>
Now you need a template helper to give you data for your {{#each items}} block helper..
Template.templateName.helpers({
items: function(){ return Items.find({}) }
});
All this gets defined on the client side..
Then you'll need a collection and the collection should be defined on both the client and server.
Items = new Meteor.Collection('items');
This should now work as long as you have records in your collection.
Since you wish to only wish to render a single document you can change the helper and template just slightly..
first the helper becomes:
Template.templateName.helpers({
item: function(){ return Items.findOne() }
});
Then the template can reference the values of the returned document through document, so we change our template to:
<template name="templateName">
{{item.propertyName}}
</template>
I've got a few templates which list items (log lines, users) and style them accordingly in tables. Now I've added a "search" page which searches for a string in different item types and displays them on one page. In terms of layout, I want to reuse the original templates, but obviously with the data returned by the search.
How can I do that without duplicating the template itself in the HTML file?
Put another way: How can I use the actual data from the top-level template in the sub-templates.
Small example:
<template name="user_list">
{{#each user_list}}
</template>
<template name="users">
{{> user_list}}
</template>
<template name="search">
{{> user_list}}
{{> group_list}}
</template>
In .coffee:
Template.users.user_list = ->
[a,b,c,d]
Template.search.user_list = ->
[b,c]
Maybe this is an easy one, which would show how little I really understood about Meteor.
Just put the template you want to use inside the {{#each}} statement. Then each item in the array will be the context for that inner template.
HTML file
<template name="users">
<ul>
{{#each UserArr}}
{{> userItem}}
{{/each}}
</ul>
</template>
<template name="userItem">
<li>{{username}} {{profile.name}}</li>
</template>
JS file
Template.users.UserArr = function()
{
return Meteor.users.find({});
};
another solution is to put your request in a Session attribute and check for its existence when querying for the users. By default Session.get("userQuery") would return undefined but once you enter something in the search field you change that with Session.set("userQuery", {type: "something"})
Now in the coffeescript you could say:
Template.users.user_list = ->
if(Session.get("userQuery"))
[a,b,c,d]
else
[b,c]
or alternatively use a MiniMongo query because it is much nicer :-)
the nice thing is that your HTML will rerender because it is reactive to the Session's content.