So I have these two data structures that I need to loop over and both of these will output the expected values
{{#each viewData.activity}}
{{label}}<br/>
{{/each}}
<hr>
{{#each viewData.maxActivity}}
{{label}}<br/>
{{/each}}
But I need to perform the following loop but it's not working as I have it below:
{{#each viewData.activity}}
{{label}}<br/>
{{../viewData.maxActivity.label}}<br/>
{{/each}}
The ../ should be working but it isn't. What am I missing?
I found in another SO post (https://stackoverflow.com/a/26341035/483140) and have the following working but doesn't seem efficient:
{{#each .}}
{{#activity}}{{activityLabel}}{{/activity}}<br/>
{{#maxActivity}}{{activityLabel}}{{/maxActivity}}<br/>
{{/each}}
Okay, so I tried this in my code and it's working great.
{{#each .}}
{{#activity}}{{activityLabel}}{{/activity}}<br/>
{{#maxActivity}}{{activityLabel}}{{/maxActivity}}<br/>
{{/each}}
In a small code sample, this looks odd but in a larger form, it actually makes more sense, visually which might have been my hang up to begin with.
Related
I have a partial like
{{> form/my-form value=form.value.someValue}}
I want to send someValue to my-form only if a condition is true. Something like
{{> form/my-form value={{#if (condition)}}form.value.someValue{{/if}}}}
But this syntax seems to be wrong.
How to achieve it?
I'm using Foundation for Sites which uses Panini and Handlebars for JS templating. I need an {{#ifequal}} statement that includes a js variable so that I can compare a URL parameter to a JSON
What I have right now:
{{#ifequal "Canada" this.destination}}
//do the thing
{{/ifequal}}
What I need is something like this:
{{#ifequal <script>document.write(destId)</script> this.destination}}
//do the thing
{{/ifequal}}
The js var "destId" is assigned earlier in the page when it's pulled out of the URL parameters, but of course I can't include the script inside the handlebars. If there's a way to pass a URL parameter directly into a handlebar that would also work.
as noted before on this question (link is here):
Handlebars partials take a second parameter which becomes the context for the partial:
{{> person this}}
In versions v2.0.0 alpha and later, you can also
pass a hash of named parameters:
{{> person headline='Headline'}}
You can see the tests for these
scenarios:
https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462
https://github.com/wycats/handlebars.js/blob/e290ec24f131f89ddf2c6aeb707a4884d41c3c6d/spec/partials.js#L26-L32
I have a problem of looping two of Polymers firebase-collection elements.
With my database structure i first have to check which events the user has access to, then get the information on that event from events.
The problem with this code is that when i loop the second firebase-collection the data-binding on "events" will be the same on all that repeats and therefore it will be the same name on every h4.
So is there a way of having a unique variable in data="{{ }}".
or is there a better way of writing out the data?
<firebase-collection data="{{userData}}" location="{{_getCorrectUrl()}}"></firebase-collection>
<template is="dom-repeat" items="{{userData}}" as="user">
<firebase-collection data="{{events}}" location="{{_getCorrectEventsUrl(user.__firebaseKey__)}}" ></firebase-collection>
<template is="dom-repeat" items="{{events}}" as="event">
<h4>{{event.value.name}}</h4>
</template>
</template>
I have a solution which I consider not the best way to solve this issue, but it works for me. I created another element called 'my-user, I exposed an attribute called user which is assigned the value of user from the first dom-repeat. Everything works, however, I am not satisfied with this solution. I am still looking for a solution which doesn't involve creating a dedicated element for that.
<firebase-collection data="{{userData}}" location="{{_getCorrectUrl()}}">
</firebase-collection>
<template is="dom-repeat" items="{{userData}}" as="user">
<my-user user="[[user]]"></my-user>
</template>
and the other 'my-user':
<dom-module id="my-user">
<template>
<firebase-collection data="{{events}}" location="{{_getCorrectEventsUrl(user)}}" ></firebase-collection>
<template is="dom-repeat" items="{{events}}" as="event">
<h4>{{event.value.name}}</h4>
</template>
</template>
<script>
(function () {
Polymer({
is: 'my-user',
_getCorrectEventsUrl: function(obj) {
return 'https://app.firebaseio.com/users/' + obj.__firebaseKey__;
},
properties: {
user:{
type:Object,
},
},
});
})();
</script>
</dom-module>
EDIT
Now after sometime of answering this question I came to realize that when someone face such a situation with NoSQL database, it usually highlights a problem in the design. Data should be de-normalized and one should avoid joining like what is normally done in SQL databases. Watch the The Firebase Database For SQL Developers on youtube.
I have a JavaScript object like this
Object {all: Array[5], cattype: "sometype"}
My question is, how to write cattype in the code below
I do this
{{#each all}}
<li><a href="#{{cattype}}/{{ id }}" >{{{title}}}</a></li>
{{/each}}
This code is working, just cattype is not written. Outside {{#each}} it's working of course.
Thank you very much for your attantion ! :)
I found solution
{{../cattype}}
solved my problem
I have a tree structure of arbitrary depth that I want to display with Handlebars. I don't see any way to recurse. If I knew the depth, I could hard code it I suppose, but it can be arbitrarily deep.
Something like this, but it needs to recurse at the display children part.
{{#aNode}}
{{id}
{{name}}
{{description}}
...spew this same template with each member of {{#children}}...
{{/aNode}}
Handlebars has ways to iterate collections, but no way that I can see to recurse into the children
Found that you can do it with a delegation/embedded file technique. So, it'd look like this:
spew_a_node.mustache (I'm using the Mustache implementation):
{{#aNode}}
{{id}
{{name}}
{{description}}
{{#children}}
{{> spew_a_node}}
{{/children}}
{{/aNode}}
Here's a nice article and jsfiddle describing exactly how to do it (which is more or less what Chris Kessel has described in his answer):
http://www.boduch.ca/2014/03/recursive-list-building-with-handlebars.html