How to use HandlebarsJS helper - handlebars.js

I have an array like below.
I have template like below.
<tbody>
{{#each this.catalog_number}}
<tr>
<td>
{{ this }}
</td>
{{#each (show_data this.data) }}
<td>
{{ this }}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
My helper is like below
Handlebars.registerHelper("show_data", (data_array) => {
return data_array.CATALOG_NUMBER;
});
I am getting error like below.
Uncaught (in promise) TypeError: data_array is undefined

Related

handlebars js using collection.first item in different each

I am trying to use collection firs item property in another each but it does not work,it does not give any error but also it does not work
Bagaj not work but
Bagaj1 work,altough it is same code,what is problem with this ?
{{#each Flights}}
<tr>
<td>
<div class="col-md-10">
<strong><span data-i18n="app.booking.flight-number"></span></strong>{{FlightNumber}}
<strong>Bagaj:</strong>{{PassengerPricing.0.BaggageDescription}}
</div>
</td>
</tr>
{{/each}}
<strong>Bagaj1:</strong>{{PassengerPricing.0.BaggageDescription}}

Get checked values of checkboxes from a table and use them in controller

I'm using Symfony 3.4. I'd like to get checked values of checkboxes from a table and get these values in the controller for another process.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Agent</th>
<th>Sélectionner</th>
</tr>
</thead>
<tbody>
{% for agent in agents %}
<tr>
<td>{{ agent.id }}</td>
<td>{{ agent.fullname }}</td>
<td>
<input type="checkbox" name="idagent[{{agent.id}}]" value={{agent.id}}" />
</td>
</tr>
{% endfor %}
</tbody>
In the controller
public function newinterneAction(Request $request)
{
...
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$ids=$request->get('idagent');
die(dump($ids));
}
}
But this return null. How can I make it with Symfony?
Any help will be appreciated.
Use $request->getContent();
Anyway, you should use https://symfony.com/doc/current/forms.html for creating forms

#each helper to populate a table

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

Looping in Handlebars

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}}

asp.net with underscore templatesettings

I suppose there are people who encountered underscore problem, so I found something here:
Using Underscore.js with ASP.NET
and the solution was to add:
_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g, // print value: {{ value_name }}
evaluate : /\{%([\s\S]+?)%\}/g, // excute code: {% code_to_execute %}
escape : /\{%-([\s\S]+?)%\}/g}; // excape HTML: {%- <script> %} prints <script>
to underscore.js
so I opened underscore.js and found the _.templateSettings section, and replaced with the above solution, still with no luck.
Is there anywhere that I'm missing? here's my code looks like:
<table class="table">
<thead>
<tr>
<th></th>
<th>#</th>
<th>Keyword</th>
<th>Corresponding Field</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<% _.each(keywords, function(keyword, key, list) { %>
<tr>
<td><label class="checkbox"><input type="checkbox" /></label></td>
<td><%= key + 1 %></td>
<td><input name="keywords[<%= key %>][keyword]" class="input-medium keyword-name" type="text" value="<%= keyword.name %>" /></td>
<td>
<select class="keyword-field">
<% _.each(fields, function(field, key, list) { %>
<option name="keywords[<%= key %>][field]" value="<%= field.id %>" <% if (keyword.fieldId == field.id) { %>selected<% } %>><%= field.name %></option>
<% }); %>
</select>
</td>
<td class="align-right">Define</td>
</tr>
<% }); %>
</tbody>
</table>
so this is what I end up doing:
<script type="text/javascript">
$(document).ready(function ()
{
_.templateSettings = {
interpolate: /\<\#\=(.+?)\#\>/g,
evaluate: /\<\#(.+?)\#\>/g
};
});
</script>
above code inside html head
and change to <# ... #>
so this is what my code ends up:
<tbody>
<# _.each(keywords, function(keyword, key, list) { #>
<tr>
<td><label class="checkbox"><input type="checkbox" /></label></td>
<td><#= key + 1 #></td>
<td><input name="keywords[<#= key #>][keyword]" class="input-medium keyword-name" type="text" value="<#= keyword.name #>" /></td>
<td>
<select class="keyword-field">
<# _.each(fields, function(field, key, list) { #>
<option name="keywords[<#= key #>][field]" value="<#= field.id #>" <# if (keyword.fieldId == field.id) { #>selected<# } #>><#= field.name #></option>
<# }); #>
</select>
</td>
<td class="align-right">Define</td>
</tr>
<# }); #>
</tbody>

Resources