I am using Meteor 1.2.1 + iron-router with autopublish turned on
I would like to construct an anchor href based on collection values returned by a helper and query params
Is it possible to do this in the template tag, e.g. query_param1 should be read from the URL?
<template name="dataEntry">
{{#each data}}
<li>
<a href="/listing?name={{name}}&color=<query_param1>">
Data name
</a>
</li>
{{/each}}
</template>
Above, {{name}} is returned by the collection and query parameters are appended to that to create a full hyperlink for the href.
You can use #Stephen's suggestion like this.
In your template html,
<template name="dataEntry">
{{#each data}}
<li>
<a href="/listing?{{queryParams}}">
Data name
</a>
</li>
{{/each}}
</template>
In your template JS,
Template.dataEntry.helpers({
"queryParams": function () {
var name = "";
//get name from collection here like...
//name = Meteor.user().profile.firstName;
var color = Router.current().params.color;
return "name=" + name + "&color=" + color;
}
});
Or you can use two separate helpers
In your template html,
<template name="dataEntry">
{{#each data}}
<li>
<a href="/listing?name={{name}}&color={{color}}">
Data name
</a>
</li>
{{/each}}
</template>
In your template JS,
Template.dataEntry.helpers({
"name": function () {
var name = "";
//get name from collection here like...
//name = Meteor.user().profile.firstName;
return name;
},
"color": function () {
return Router.current().params.color;
}
});
You can access an IronRouter param through a helper, e.g.:
Router.current().params.query_param1
Related
I'm returning a 3rd party object to handlebars but i've noticed that some property names are prefixed with unique namespaces. Here's a short extract:
var data={
"soapenv:Envelope":{
"soapenv:Body":{
"CaseDetails":[
{
"Status":"Open",
"Opened":"2018-02-19T10:56:03.783Z",
"ns1:CaseReference": {"id":"111111"}
},
{
"Status":"Closed",
"Opened":"2017-02-19T10:56:03.783Z",
"ns3:CaseReference": {"id":"222222"}
},
{
"Status":"Closed",
"Opened":"2016-02-19T10:56:03.783Z",
"ns8:CaseReference": {"id":"3333"}
}
]
}
}
};
I want to loop through this object and output the information. Is it possible to match these unique names: ns1:CaseReference, ns3:CaseReference and ns8:CaseReference?
{{#each data.soapenv:Envelope.soapenv:Body.CaseDetails}}
<td>{{Status}}</td>
<td>{{Opened}}</td>
<td>{{???.id}}</td>
{{/each}}
You can write a custom HandlebarsHelper, ifKeyHasText to check whether the key contains a specific string (CaseReference in this scenario).
Handlebars.registerHelper('ifKeyHasText', function(array, value, options) {
var key;
if(Object.keys(array).some(function(k){
if(~k.indexOf(value)){
key = k;
}
}));
if(key){
return options.fn(this[key]);
}
});
And in the template, you can pass the string CaseReference to the helper {{#ifKeyHasText}} along with the data JSON as this object.
{{#each soapenv:Envelope.soapenv:Body.CaseDetails}}
<td>{{Status}}</td>
<td>{{Opened}}</td>
<td>
{{#ifKeyHasText this 'CaseReference'}}
{{id}}
{{/ifKeyHasText}}
</td>
{{/each}}
Hope this helps.
I managed to get it based on this post: https://stackoverflow.com/a/21452230/1622376
var data={
"soapenv:Envelope":{
"soapenv:Body":{
"CaseDetails":[
{
"Status":"Open",
"Opened":"2018-02-19T10:56:03.783Z",
"ns1:CaseReference": {"id":"111111"}
},
{
"Status":"Closed",
"Opened":"2017-02-19T10:56:03.783Z",
"ns3:CaseReference": {"id":"222222"}
},
{
"Status":"Closed",
"Opened":"2016-02-19T10:56:03.783Z",
"ns8:CaseReference": {"id":"3333"}
}
]
}
}
};
Handlebar using 'this' to traverse the tree:
<ul>
{{#each soapenv:Envelope}}
{{#each this}}
{{#each this}}
<li>
{{this.Status}}
{{#each this}}
{{this.id}}
{{/each}}
{{this.Opened}}
</li>
{{/each}}
{{/each}}
{{/each}}
</ul>
I have an array of 10 objects 'categories' and each category has sub objects such as posts within that category. This is how it looks.
I access the category list like this.
<template name="CategoriesMain">
{{#each articles}}
<li>
<h2>{{name}}</h2>
</li>
{{/each}}
</ul>
</template>
this link
<h2>{{name}}</h2>
accesses the 'posts' list within the category which looks like this
<template name="CategoriesSingle">
<h1>This is a test</h1>
<ul>
{{#each articles}}
{{#each posts}}
<li>
<h2>{{title}}</h2>
</li>
{{/each}}
{{/each}}
</ul>
</template>
this link is supposed to target the SINGLE POST from the post list within the category
<h2>{{title}}</h2>
PROBLEM:
I get the error: There is no route for the path: /catsingle/ when ever i try to access the SINGLE POST
even though i have it in my routes.js like this
FlowRouter.route('/catsingle/:_id', {
name: 'catsingle',
action() {
BlazeLayout.render("AppLayout", {main: "CategoryArticleSingle"});
}
});
the template helper looks like this
Template.CategoryArticleSingle.helpers({
articles: function () {
var id = FlowRouter.getParam('_id')
return CategoryCollection.findOne({_id: id});
}
});
How can I successfully the single post within a category?
Your posts array doesn't have an _id key, it has an ID key.
Try:
<h2>{{title}}</h2>
In Meteor, I have an app where I make a list of items grouped by tags, where non-tagged items come first and then tagged items are hidden under a "tag header" drop down.
I haven't touched this app since 0.8 came out, and I was using a block helper in a template which worked fine in pre-0.8...
See working jsfiddle here
Handlebars.registerHelper('eachItem', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
if(!context[i].tag){
ret = ret + options.fn(context[i]);
} else {
if(i===0||!context[i-1].tag ||context[i-1].tag !== context[i].tag){
ret = ret + '<li class="list-group-item"><a data-toggle="collapse" data-target="#'+ context[i].tag +'"> Items tagged '+context[i].tag + '</a></li><div id="'+context[i].tag+'" class="collapse">';
}
ret = ret + options.fn(context[i]);
if(i+1<j && context[i+1].tag !== context[i].tag){
ret = ret + '</div>';
}
}
}
return ret;
});
But I'm struggling a bit to translate this into post-0.8 Meteor
The inserted HTML must consist of balanced HTML tags. You can't, for example,
insert " </div><div>" to close an existing div and open a new one.
One idea I had was to render the non-tagged items and also the containers in a vanilla {{#each}} loop (with 2 different templates), and then do something like this
Template.myListContainer.rendered = function(){
_.each(tags, function(tag){
var tagged_items = _.filter(items, function(item){ return item.tag == tag; });
_.each(tagged_items, function(item){
UI.insert(UI.RenderWithData(listItemTemplate, { item : item }), tagContainer);
});
});
}
Is there a simpler way to do this ? If the items come from a collection, will they keep their reactivity ?
Many thanks in advance !
If you haven't already, it's worth reading the Meteor wiki on migrating to blaze.
Anyhow, this one seems difficult to implement as a straight iteration.
If you don't need them in a specific order, I would just list items w/ and w/o tags, eg:
Template.example.helpers({
dataWithoutTags: function(){
return items.find({tag:{exists: false}});
},
tagList: function(){
// create a distinct list of tags
return _.uniq(items.find({tag:{exists: true}}, {tag: true}));
},
dataForTag: function(){
// use `valueOf` as `this` is a boxed-string
return items.find({tag: this.valueOf()});
}
});
Template:
<template name="example">
<div class='panel panel-default'>
<ul class='list-group'>
{{#each dataWithoutTags}}
<li class='list-group-item'>{{name}}</li>
{{/each}}
{{#each tagList}}
<li class="list-group-item">
<a data-toggle="collapse" data-target="#{{this}}"> Items tagged {{this}}</a>
</li>
<div id="{{this}}" class="collapse">
{{#each dataForTag}}
<li class='list-group-item'>{{name}}</li>
{{/each}}
</div>
{{/each}}
</ul>
</div>
</template>
If you do need them in a specific order - eg. grouping only consecutive items (as per your example). The only option would be to pre-process them.
eg:
Template.example.helpers({
itemsGrouped: function(){
dataGroups = [];
currentGroup = null;
items.find({}, {sort: {rank: 1}}).forEach(function(item){
if (currentGroup && (!item.tag || currentGroup.tag != item.tag)){
dataGroups.push(currentGroup);
currentGroup = null;
}
if (item.tag){
if (!currentGroup){
currentGroup = {
group: true,
tag: item.tag,
items: [item]
};
} else {
currentGroup.items.push(item);
}
} else {
dataGroups.push(item);
}
});
if (currentGroup){ dataGroups.push(currentGroup); }
return dataGroups;
}
});
Template:
<template name="example">
<div class='panel panel-default'>
<ul class='list-group'>
{{#each itemsGrouped}}
{{#if group}}
<li class="list-group-item">
<a data-toggle="collapse" data-target="#{{tag}}"> Items tagged {{tag}}</a>
</li>
<div id="{{tag}}" class="collapse">
{{#each items}}
<li class='list-group-item'>{{name}}</li>
{{/each}}
</div>
{{else}}
<li class='list-group-item'>{{name}}</li>
{{/if}}
{{/each}}
</ul>
</div>
</template>
If you log the value you are returning from the eachItem helper, you will see you are not closing the last div element. Fixing that may get it working again. However, you have div elements as direct children of the ul element, which you are not supposed to according to the HTML5 specification:
Permitted contents: Zero or more li elements
Also, I think it would be a better option for you to prepare your context in a format that makes it easier to let simple templates take care of the rendering. For example, using the same data from your jsfiddle, suppose you had it in the following format:
tagGroups = [{
names: ["item1", "item2"]
},{
tag: "red",
names: ["item3", "item4"]
},{
tag: "blue",
names: ["item5", "item6", "item7"]
}]
The following templates would give you the expected result in a valid html format. The ending result is a bootstrap panel containing collapsible list-groups:
<template name="accordion">
<div class="panel panel-default">
{{#each tagGroups}}
{{> tagGroup}}
{{/each}}
</div>
</template>
<template name="tagGroup">
{{#if tag}}
{{> namesListCollapse}}
{{else}}
{{> namesList}}
{{/if}}
</template>
<template name="namesList">
<ul class="list-group">
{{#each names}}
<li class="list-group-item">{{this}}</li>
{{/each}}
</ul>
</template>
<template name="namesListCollapse">
<div class="panel-heading"><a data-toggle="collapse" data-target="#{{tag}}">Items tagged {{tag}}</a></div>
<ul id="{{tag}}" class="panel-collapse collapse list-group">
{{#each names}}
<li class="list-group-item">
{{this}}
</li>
{{/each}}
</ul>
</template>
And here is an example of a helper to transform your data so you can make a quick test to see it working:
Template.accordion.tagGroups = function () {
var data = [{
name : 'item1'
},{
name : 'item2'
},{
name : 'item3',
tag : 'red'
},{
name : 'item4',
tag : 'red'
},{
name : 'item5',
tag : 'blue'
},{
name : 'item6',
tag : 'blue'
},{
name : 'item7',
tag : 'blue'
}];
data = _.groupBy(data, 'tag');
data = _.map(data, function (value, key) {
var obj = {};
if (key !== 'undefined') {
obj.tag = key;
}
var names = _.map(value, function (item) {
return item.name;
});
obj.names = names;
return obj;
});
//console.dir(data);
return data;
};
And yes, if the items come from a collection, you will get reactivity by default.
Ok, so I found this post: Meteor breadcrumb
But lets say I have the following:
<template name="somePage">
<h1>Page Title</h1>
{{> breadcrumb}}
</template>
<template name="breadcrumb">
<ul class="breadcrumb">
<li>
Home
</li>
{{#each path}}
<li>
{{this}}
</li>
</ul>
</template>
Helper:
Template.breadcrumb.helpers({
path: function() {
return Router.current().path.split( "/" );
}
});
Ok so the linked question at the top got me the basics. I'm trying to understand how to do a few more things here that should be obvious. I want the first to be for the home page, and the result returned from the path: function() includes an empty "", "page", "page", etc. in the beginning of it.
I'd like to be able to incorporate the proper paths. To be clear, I'd love to pull this off:
<template name="breadcrumb">
<ul class="breadcrumb">
<li>
Home
</li>
~ pseudo logic
{{#each path that isn't current page}}
<li>
{{this}}
</li>
{{/each}}
<li>
{{ currentPage }}
</li>
</ul>
</template>
Has anyone done this or found a reference that I haven't stumbled across yet?
I'll give you my own recipe for breadcrumbs using iron:router.
It works by supplying additional options to your routes in order to establish a hierarchy between them, with parent-children relations. Then we define a helper on the Router to give us a list of parent routes (up to home) for the current route. When you have this list of route names you can iterate over them to create your breadcrumbs.
First, we need to define our breadcrumbs template which is actually very similar to your pseudo-code. I'm using bootstrap and font-awesome, as well as some newly introduced iron:router#1.0.0-pre features.
<template name="breadcrumbs">
<ol class="breadcrumb">
<li>
{{#linkTo route="home"}}
<i class="fa fa-lg fa-fw fa-home"></i>
{{/linkTo}}
</li>
{{#each intermediateRoutes}}
<li>
{{#linkTo route=name}}
<strong>{{label}}</strong>
{{/linkTo}}
</li>
{{/each}}
<li class="active">
<strong>{{currentRouteLabel}}</strong>
</li>
</ol>
</template>
The {{#linkTo}} block helper is new in iron:router#1.0.0-pre, it simply outputs an anchor tag with an href attribute which value is {{pathFor "route"}}.
Let's define the helpers from our breadcrumbs template:
Template.breadcrumbs.helpers({
intermediateRoutes: function() {
if (!Router.current()) {
return;
}
// get rid of both the first item, which is always assumed to be "home",
// and the last item which we won't display as a link
var routes = Router.parentRoutes().slice(1, -1);
return _.map(routes, function(route) {
// extract name and label properties from the route
return {
name: route.getName(),
label: route.options.label
};
});
},
currentRouteLabel: function() {
// return the label property from the current route options
return Router.current() && Router.current().route.options.label;
}
});
Notice that we rely on the existence of a special option named 'label' which represents what we're going to put in our anchors, we could also have used the name for testing purpose.
The parentRoutes method is something we need to extend the Router with:
_.extend(Router, {
parentRoutes: function() {
if (!this.current()) {
return;
}
var routes = [];
for (var route = this.current().route; !_.isUndefined(route); route = this.routes[route.options.parent]) {
routes.push(route);
}
return routes.reverse();
}
});
Again, this function assumes that every route (except "home") has a parent property which contains the name of its parent route, we then iterate to traverse the route hierarchy (think of a tree, like a file system structure) from the current route up to the root route, collecting each intermediate route in an array, along with the current route.
Finally, don't forget to declare your routes with our two additional properties that our code relies on, along with a name which is now mandatory as routes are indexed by name in the Router.routes property:
Router.route("/", {
name: "home"
});
Router.route("/nested1", {
name: "nested1",
parent: "home"
});
Router.route("/nested1/nested2", {
name: "nested2",
parent: "nested1"
});
// etc...
This example is pretty basic and certainly doesn't cover every use case, but should give you a solid start in terms of design logic toward implementing your own breadcrumbs.
Inspired by #saimeunt I created a meteor breadcrumb plugin which can be found here: https://atmospherejs.com/monbro/iron-router-breadcrumb. You also specify a parent route and a title for the route itself.
I used saimeunt answer but had to make small changes to the template and the template helpers because I have parameters in some of my route paths. Here are my changes.
Template changes: add data=getParameter to #linkTo for intermediate routes
<template name="breadcrumbs">
<ol class="breadcrumb">
<li>
{{#linkTo route="dashboard"}}
<i class="fa fa-lg fa-fw fa-home"></i>
{{/linkTo}}
</li>
{{#each intermediateRoutes}}
<li>
{{#linkTo route=name data=getParameters}}
<strong>{{label}}</strong>
{{/linkTo}}
</li>
{{/each}}
<li class='active'>
<strong>{{currentRouteLabel}}</strong>
</li>
</ol>
</template>
Template helper changes: add helper function getParameters to get parameters from current route.
Template.breadcrumbs.helpers({
intermediateRoutes: function () {
if (!Router.current()) {
return;
}
var parentRoutes = Router.parentRoutes();
var routes = parentRoutes.slice(1, -1);
var intermediateRoutes = _.map(routes, function (route) {
return {
name: route.getName(),
label: route.options.label
};
});
return intermediateRoutes;
},
currentRouteLabel: function () {
var currentRouteLabel = Router.current() && Router.current().route.options.label;
return currentRouteLabel;
},
getParameters: function(){
var currentRoute = Router.current();
var parameters = currentRoute.params;
return parameters;
}
});
In the Handlebars.js - template i am getting a senario to check the value of the array, and if the value is not equal to do a task and equal to do a taks.. i do like this, But it thrown a error, how to handle this scenario.. any one help me?
Or any one give the way to handle this properly.
myJson would be :
{
"links":[{"label":"x","link":"x"},
{"label":"y","link":"y"},
{"label":"Logout","link":"Logout"}]
}
{{#each links}}
{{#if !lable.Logout}}
<li>
{{label}}
{{#if subLinks}}
<ul>
{{#each subLinks}}
<li>{{label}}</li>
{{/each}}
</ul>
{{else}}
<div>{{label}}</div>
{{/if}}
{{/each}}
Handlebars alone cannot handle conditional if statements, you need to use a helper function.
<div id="myDiv"></div>
<script type="text/x-handlebars-template" id="handlebar">
{{#each links}}
{{#ifCond label "Logout" }}
<li>
{{label}}
{{#if subLinks}}
<ul>
{{#each subLinks}}
<li>{{label}}</li>
{{/each}}
</ul>
{{/if}}
{{else}}
<div>
{{label}}
</div>
{{/ifCond}}
{{/each}}
</script>
<script>
$( document ).ready(function() {
var source = $("#handlebar").html();
var template = Handlebars.compile(source);
var context = {
"links":[
{"label":"x","link":"x"},
{"label":"y","link":"y"},
{"label":"Logout","link":"Logout"}
]
};
var html = template(context);
$("#myDiv").html(html);
});
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
</script>