I have a few lines of markup that I'd like to avoid keeping in an external partial file, but it should be rendered based on a variable value, either IN_PROCESS or DONE. I can make inline partials and render them based on static names:
{{#* inline "IN_PROCESS"}}IN_PROCESS{{/inline}}
{{#* inline "DONE"}}DONE{{/inline}}
{{> IN_PROCESS }}
{{> DONE }}
However I cannot figure out how to combine that with the () dynamic values syntax I have read about here.
So something like,
{{> (data.status) }}
└─────────┘ data.status would be either 'IN_PROCESS' or 'DONE'
Is this possible?
I believe you want something similar to this:
{{#* inline "IN_PROCESS"}}IN_PROCESS{{/inline}}
{{#* inline "DONE"}}DONE{{/inline}}
{{> (lookup . 'status')}}
{{> (lookup . 'status')}} will look through the JSON data object for its status attribute.
That is if you're passing your data in something like this:
var template = Handlebars.compile(**your source**);
$('body').append(template(data));
JSFiddle Example
The dot represents the data object that has been passed into the template function. The template function has no way of knowing what the object's name was:
template(inputData){
// This function wouldn't know that inputData.status was originally data.status
}
var data = {status: "DONE"};
template(data);
The dot is therefore used to tell "template" when searching for a parent that inputData should be the parent and we're looking for "status" as a child. I believe that is the use of it. I actually can't find any documentation regarding its use but all lookup's seem to be in the format lookup parent child so I assume that's the reasoning.
Related
I have a Handelbars app that loads data from javascript and partials for the templates. To get the templates to work I use the following in the Javascript:
var data = require('partials/data.js');
Handlebars.registerPartial('data', data);
Then in my partial I am able to do:
{{> data }}
I have a Handelbars variable I can use in my main template but I want to pass it down to the partial. With my other partials that don't register via the Javascript this is possible. I am assuming I need to pass this variable down like I do the templates?
As per the handlebars documentation, you should be able to simply pass the variable down as a parameter, like so:
{{> data parameter=variable }}
I am using on a common template in two pages. I have to show some lines in one page. So i have added an if function which will check the current url . It is working for me only once. After coming back to the same url i am getting previous url's value. Then this it is not changing . Below is a sample code. How to achieve this?
Below is my code
Url- /template1
Template1.html
<template name="template1">
{{>commontemplate}}
</template>
Url - /template2
Tempalate2.html
<template name="tempalte2">
{{>commonTemplate}}
</template>
CommonTemplate.html
<template name="commonTemplate">
{{#if isAdmin 'template1'}}
<div> hello</div>
{{else}}
<div> hai</div>
{{/if}}
</template>
CommonTemplate.js
Template.CommonTemplate.helpers({
isAdmin: function (val) {
var path = window.location.pathname;
var str = path.split("/");
return val === str[1];
}
})
The reason it's not rerunning is that your helper function has no reactive dependencies. Normal Javascript variables (like window.location.pathname) don't instruct reactive computations (like helper functions) to rerun when their values change.
The two easiest possibilities are:
Name your routes and use FlowRouter.getRouteName() in the helper function, which is reactive.
Add the line FlowRouter.watchPathChange() to your helper, which doesn't return anything, but does ensure the containing reactive function reruns whenever the path changes. FlowRouter API.
The other alternative is to simply use CSS. Have a look at meteor-london:body-class, which appends the route name as a class to the body, allowing you to selectively show or hide stuff based on route in your CSS.
I don't really understand partials / template inheritance from Mustache / Hogan.js. As defined here and here you seem to must have two different files to make that work. I use it as follows in my (client side) page:
<template id="server-template">
{{#servers}}
<b>some html and {{> some other which I dont understand how to use}}</b>
{{/servers}}
</template>
<template id="room-template">
I want this in up there. (in the "partials" tag)
</template>
Thanks for helping. I compile them with this:
var source = $('#room-template').html(),
compiled = Hogan.compile(source)
$('#main').html(compiled.render(data))
Is that even possible?
The docs state that you must compile your partials separately, and then pass them to the render function:
In mustache.js an object of partials may be passed as the third
argument to Mustache.render. The object should be keyed by the name of
the partial, and its value should be the partial text.
var roomTemplateSource = $('#room-template').html();
var roomTemplate = Mustache.compile(roomTemplateSource);
Mustache.render(template, view, {
room: roomTemplate
});
<template id="server-template">
{{#servers}}
<b>some html and {{> room}}</b>
{{/servers}}
</template>
I am reading the docs of Google Polymer,there are two types of data binding,Node.bind() and Template Binding,so, what is the difference between Node.bind() and Template Binding
They're both ways of achieving data-binding. One in the context of DOM nodes and the other in the context of templates.
Node.bind()
Node.bind() allows you to tell DOM nodes to bind a named property to some data that you provide. So below, we're binding the property value (object.path.to.value) to the .textContent in our textNode.
var obj = {
path: {
to: {
value: 'hi'
}
}
};
var textNode = document.createTextNode('mytext');
textNode.bind('textContent', obj, 'path.to.value');
This is neat because anytime value changes, Node.bind() keeps your .textContent updated.
TemplateBinding
The Polymer docs state that this extends what you can do with the HTML <template> tag - specifically, giving you access to four new attributes: bind, repeat, if and ref.
So let's say that we wanted to pass a propery foo to a <template> which we would like to use in our template content, but want to keep in sync so that anytime foo changes, the template also gets updated. With bind that's as straight-forward as:
<template bind="{{ foo }}">
Creates a single instance with {{ foo }} when singleton model data is provided.
</template>
repeat is really useful for when you're working with lists or collections of data - like users:
<template repeat="{{ user in users }}">
<li>{{user.name}}</li>
</template>
if is really handy for conditional values in templates:
<template if="{{ conditionalValue }}">
Binds if and only if conditionalValue is truthy. (same as *bind if*)
</template>
and so on. You can find more examples of what can be done with these attributes in the TemplateBinding docs.
To the handlebars (version 1.0.0-rc.3) template I am passing two variables , one is the json and the other one is the string containing the current language on site.
self.template = template({ data: self.model, lang:self.lang });
Then inside the template file I have the following structure:
{{#each data}}
//this is working
{{../lang}}
{{#if this.title}}
{{this.desc}}
//i've tried this
{{../lang}}
//and this
{{lang}}
{{/if}}
{{/each}}
...but I couldn't access the lang value inside the if statement. What am I doing wrong?
I know you already solved your issue with a workaround but registering a Helper for doing a native way is cumbersome.
The thing is that every Handlebars helper overwrites the context and nest the new one inside the parent one, so you have to go up uone step further, like a UNIX like directory.
So, to access lang inside an each->if you have to use:
{{ ../../lang }}
I've find a solution by creating a handlebars helper function:
Handlebars.registerHelper('language', function() {
return self.lang; });
Then in the template i could use {{language}}
where ever I want.