Polymer template repeat group - templates

Is there a way to do grouping in a polymer repeat template? I have a list of items with doc.name and doc.manualType, but I want to group a list of items so the manualType only displays once per group instead of for each item.
Or how do I update my binding to have a previousManualType so I can only display the manualType if it's different than the previous manualType.
<template id="docListTemplate" bind="{{searchResults}}">
<div class="vGroup">
<core-selector id="selector" class="list" multi selected="{{multiSelected}}">
<template repeat="{{doc, i in data}}" {previousManualType:''}>
<template if="{{doc.manualType!=previousManualType}}">
<h1>{{doc.manualType}}</h1>
</template>
<div class="cb item">
{{doc.name}}
</div>
</template>
</core-selector>
</div>
</template>

What about
<template id="docListTemplate" bind="{{searchResults}}">
<div class="vGroup">
<core-selector id="selector" class="list" multi selected="{{multiSelected}}">
<template repeat="{{manualType in ManualTypes}}">
<template repeat="{{doc, i in manualType.data}}">
<h1>{{doc.manualType}}</h1>
<div class="cb item">
{{doc.name}}
</div>
</template>
</core-selector>
</div>
</template>
You need to prepare the data structures accordingly.

As Gunter pointed out the data structure seems to be the keypoint.
If you have no control over the input, then you will need to transform it.
You could user underscore / lodash to groupBy
http://underscorejs.org/#groupBy
https://lodash.com/docs#groupBy

Related

Hope to know Parent/Child template render order in Meteor

I have really issue on my app development, and hope to get your expert-level help.
<template name="inspection_go">
<div class="transitions-content">
<div class="row toolbar">
<div class="col s1">
{{#if previous_group}}
</i>
{{else}}
</i>
{{/if}}
</div>
<div class="col s4">
{{#if next_group}}
</i>
{{else}}
</i>Complete Inspection
{{/if}}
</div>
</div>
<div class="content">
{{> answer_draw_at_a_location group=current_group building=building inspection_id=inspection._id}}
</div>
</div>
</template>
<template name="answer_draw_at_a_location">
<div class="row" style="margin-top: 20px; height: 100%;">
<div>
{{#each questions_in_group}}
<div style="width: 100%;">{{> question_to_answer question_id}}</div>
{{/each}}
</div>
</div>
</template>
<template name="question_to_answer">
...
</template>
The above code shows parent - child template relation.
And this is the onRendered of parent/sub template.
Template.answer_draw_at_a_location.onRendered(function() {
console.log("parent");
});
Template.question_to_answer.onRendered(function() {
console.log("child");
});
The problem is below.
When I go to inspection_go page firstly, the answer_draw_at_a_location, that is, parent template's onRendered function invoked firstly, after then, the question_to_answer, that is, child template's onRendered function invoked.
And because when I click next_group or previous_group link, it recognize the same template, inspection_go in iron:router, it does not invoke the "answer_draw_at_a_location" onRendered function, so I changed to use #each to invoke it as below.
{{#each current_groups}}
{{> answer_draw_at_a_location group=this building=../building inspection_id=../inspection._id}}
{{/each}}
But now when I click prevoius_group or next_group tag, it execute onRendered function of child template ( question_to_answer ) firstly and after then execute onRendered function of parent template ( answer_draw_at_a_location ).
So I hope to know why it happens, and at least, is there a way to execute parent template onRendered function firstly and after then execute child template onRendered or vice versa.
Please help me.

How to get _id value in Meteor template

Here is my template snippet.
{{#if is_multiple_choice _id}}
<div class="row" style="margin-bottom: 20px;">
<div class="input-field col s11">
<select id="ans_{{_id}}" name="answer" class="multiple_choice_answer">
<option value="">No Answer Given for Multiple Choice</option>
{{#each allowed_values}}
{{#if matched value _id}}
<option value="{{value}}" selected>{{value}}</option>
{{else}}
<option value="{{value}}">{{value}}</option>
{{/if}}
{{/each}}
</select>
<label>{{text}}</label>
</div>
</div>
{{/if}}
So I aimed to use _id in "matched" helper, but it seems the _id in matched value _id line gets nothing.
How can I get _id and use it in "matched" helper?
Please help me!!!
Within the {{#each}} {{/each}} loop, you are in a child context
To access the parent context, you need to use the .. notation, like this: ../_id.
You can also use this within a Template.helper to get this._id:
Template.example.helper({
"id": return this._id;
});
You can then use id anywhere in the Template.
Note:
1) this._id is equivalent to Template.instance().data._id within a helper.
Use Template.instance().data to access the template data context within an event, onCreated or onRendered.
2) The .. notation can be used to access the grand-parent template as well, with ../../_id for example.
This .. pattern is acceptable to access parent context from a {{#each}} loop within the same Template for example, but it is not recommended to use with child templates (to access parent template) because your child template is not reusable without the parent template context.

Polymer iron list with firebase collection/document

Is there a way to combine polymer firebase-collection with iron-list?
I'm able to show my data with firebase-collection, but I also want to use iron-list to style my elements...
<firebase-collection data="{{games}}"
location="url">
</firebase-collection>
<template is="dom-repeat" items="{{games}}" as="game">
<div>
<span>{{game.home}}</span>
<span class="game_score">
<span>{{game.home_score}}</span> - <span>{{game.away_score}}</span>
</span>
<span>{{game.away}}</span>
</div>
</template>

How to get every value in template which use each

<template name="mytemplate">
{{#each work}}
<div name="adiv">
<input type='hidden' value={{_id}} id="testid"> <br/>
</div>
{{/each}}
</template>
If I use document.getElementById('testid'),It just get the lasted value.But I want to get the every value.
It's because id value is meant to be unique,
change id to class and document.getElementByClassName('testid') will return an array

Ember view with dynamic class names

Considering the following:
Parent template:
{{view App.SomeView id="42" panelClass="default"}}
View template:
<div class="col-md-3 col-sm-6">
<div class="panel panel-{{panelClass}}">
<div class="panel-heading">
<h3 class="panel-title">
{{name}}
</h3>
</div>
<div class="panel-body">
{{description}}
</div>
</div>
</div>
View JS:
App.SomeView = Ember.View.extend({
templateName: 'views/some-view'
});
How can I achieve output HTML where the panel class gets set properly? At the moment it doesn't work because it wants to bind, so it inserts the ember metamorph script tags, instead of just plain text for the panel class.
Also, the template is wrapped in an extra div. How would I modify it so that the ember-view wrapping div is actually the first div in the template (the one with col-md-3 col-sm-6)?
The bind-attr helper exists for that reason. Here's the guide entry.
<div {{bind-attr class=":panel panelClass"}}></div>
Also, not sure if you can use a prefix on panelClass in the template. If might be easier just to use a computed property to add the panel- beforehand.
I'm sorry, I didn't see your second question about the extra div. The guide explains here how to extend the element.
App.SomeView = Ember.View.extend({
classNames: ['col-md-3', 'col-sm-6']
});