I am struggling to see how to use Handlebars with simple string arrays. I have the following object
When looping around the searchParam array I use something like :
{{#each model.searchParam}}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="th-narrow">Property</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="label">name</span></td>
<td>{{name}}</td>
</tr>
<tr>
<td><span class="label">type</span></td>
<td>{{type}}</td>
</tr>
</tbody>
</table>
{{/each}}
In the image above, how do I loop around the "searchInclude" array?
{{#each model.searchInclude}}
... wht do I reference here for the contents of the array?
{{/each}}
In case of an array, this will be the value and you can obtain the index with the Handlebar magic keyword #index
{{#each model.searchInclude}}
{{#index}}: {{this}}
{{/each}}
Related
I have created a table using component nztable from ``ng-zorro`. That table contains a nested table where I want to load data dynamically(REST service call) on click of the expand icon.
I am able to load the data in the nested table but when I expand next row, it is overriding data in the first row with the new result.
As nested table creation is in the loop(ngfor), I am unable to control the data binding to a specific row.
<nz-table #nestedTable [nzData]="displayData" [nzPageSize]="10">
<thead colspan="5">
<tr>
<th nzWidth="4%"nzShowExpand></th>
<th nzWidth="12%">Id</th>
<th nzWidth="10%">Start Time</th>
<th nzWidth="10%">End Time</th>
<th nzWidth="10%">Status</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nestedTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="data.expand" (click)="getDetails(data)"></td>
<td >{{data.Id}}</td>
<td>{{data.startTime}}</td>
<td>{{data.endTime}}</td>
<td>{{data.status}}</td>
</tr>
<tr [nzExpand]="data.expand">
<td><nz-spin *ngIf="isEventLoading"></nz-spin></td>
<td colspan="9">
<nz-table #innerTable [nzData]="innerTableData" nzSize="middle" [nzShowPagination]="false">
<thead>
<tr>
<th>E ID</th>
<th>S ID</th>
<th>E Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of innerTable.data">
<td>{{data.eID}}</td>
<td>{{data.sID}}</td>
<td>{{data.eType}}</td>
</tr>
</tbody>
</nz-table>
Try to replace this [nzData]="innerTableData" whith your inner collection like this [nzData]="data.childRows".
I'm fairly new to meteor and I'm trying to iterate over a cursor using #each to populate a table. Here's my code:
<template name="choral">
<div class="container" style="padding-top: 25px">
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
my js.
Template.choral.helpers({
pieces: function(){
return choralm.find({});
}
});
I'm outputting a blank row between the #each tag. I publish the collection server side and subscribe. I'm just not sure where to look. Any ideas?
My publishment and subscription:
Meteor.publish('choralList', function() {
return choralm.find();
});
Template.choral.onCreated( function(){
Meteor.subscribe('choralList');
});
As far as I can see you are subscribing to your data but you are not "telling" your template, that the subscription is finished and it should redraw.
Therefore your template immediately renders while the subscription is ongoing and thus uses the yet empty collection data.
In order to inform your template that data has been updated you can use it's internal Tracker and store the information in a reactive data-source (for my example I use ReactiveDict instead of ReactiveVar).
import { ReactiveDict } from 'meteor/reactive-dict';
Template.choral.onCreated( function (){
// inside onCreated, this refers to the
// current template instance
const instance = this;
// let's attach a ReactiveDict to the instance
instance.state = new ReactiveDict();
// use the internal Tracker
instance.autorun(() => {
// subscribe and store a flag, once ready
const choralListSub = Meteor.subscribe('choralList');
if (choralListSub.ready()) {
instance.state.set('subscriptionComplete', true);
}
});
});
Next you add a helper, that returns the reactive value for 'subscriptionComplete':
Template.choral.helpers({
pieces(){
return choralm.find({});
},
subscriptionComplete() {
// we use 'state', our ReactiveDict,
// which we added as prop in onCreated
return Template.instance().state.get('subscriptionComplete');
}
});
And finally we let our template draw the data, once our subscription is complete. Until the subscription is complete (note the {{else}} block), we display a message about the loading status:
<template name="choral">
<div class="container" style="padding-top: 25px">
{{#if subscriptionComplete}}
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
{{else}}
<div>Loading template...</div>
{{/if}}
</div>
</template>
Related resources
TemplateInstance.autorun
http://blazejs.org/api/templates.html#Blaze-TemplateInstance-autorun
https://docs.meteor.com/api/tracker.html
Reactive stores
https://guide.meteor.com/data-loading.html#stores
Subscription readyness
https://guide.meteor.com/data-loading.html#readiness
Helpers
http://blazejs.org/guide/spacebars.html#Built-in-Block-Helpers
I followed the steps described in this post http://support.ghost.org/create-custom-page-template/ to create a custom page.
What I want to do in this page is show an Index of all my blog posts. Without description, just the header.
So, I created a static page that's on http://myadress/test
And create a page-test.hbs in my root folder. In this file I wrote this code to make a test:
{{!< default}}
<ol class="posts">
{{#foreach posts}}
<table>
<thead>
<tr>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
{{/foreach}}
</ol>
<table>
<thead>
<tr>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
The code inside the foreach is no executed. But what's outside is.
Now, I'm new to Ghost, so probably the posts variable has nothing, right? How do I put the list of posts in there?
Thanks in advance (:
You actually need to put some post data/attributes in there. What you have done is just create the post scope .ie
{{title}} {{content}} {{published_at}} etc....
Take a look here for a list of all the attributes: The post context
I got this code:
<th:block th:if="${!#lists.isEmpty(partyInfoByUploaderList)}" th:each="pInfo : ${partyInfoByUploaderList}">
<h4 th:text="${pInfo.getCharName()}"></h4>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th:block th:if="${!#lists.isEmpty(pInfo.getCharColumnTitles())}" th:each="title: ${pInfo.getCharColumnTitles()}">
<td th:text="${title}"></td>
</th:block>
</tr>
</thead>
<tbody>
<tr>
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
</tr>
</tbody>
</table>
And I got this result:
http://screenshot.ru/6dfbe559f905a17dff44d360b5d13f28
So this code correctly create table head, and dont parse table body.
BTW, after delpoy this code appear at another place:
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
Web source code in browser:
http://screenshot.ru/9d3fab8030c5ca382ab81094e0c1ca86
Question #2:
Why this code produce TemplateProcessingException error?
P.S. Not enough reputation for images, so just links. Soz
According to Thymeleaf Documentation, <th:block></th:block> should wrap <tr></tr> and not the opposite. So you should try this :
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<tr>
<td th:text="${val}"></td>
</tr>
</th:block>
I am trying to understand how to loop through all entries in a Map in Thymeleaf. I have a domain object being processed by Thymeleaf that contains a Map.
How do I loop through the keys and fetch the values ?
Thanks.
Nevermind... I found it...
<tr th:each="instance : ${analysis.instanceMap}">
<td th:text="${instance.key}">keyvalue</td>
<td th:text="${instance.value.numOfData}">num</td>
</tr>
Thanks.
In case you have a List as the value. For example, when you have a map with key being the category, and value being a list of items pertaining to that category, you can use this:
<table>
<tr th:each="element : ${catsAndItems}">
<td th:text="${element.key}">keyvalue</td>
<table>
<tr th:each="anews : ${element.value}">
<td th:text="${anews.title}">Some name</td>
<td th:text="${anews.description}">Some name</td>
<td th:text="${anews.url}">Some name</td>
<td th:text="${anews.logo}">Some name</td>
<td th:text="${anews.collectionDate}">Some name</td>
</tr>
</table>
</tr>
</table>