I'm trying to pass an array from the parent context into a partial as a parameter. I've read numerous SO articles and tried all the suggestions and so far I can't get it to work. The best I've gotten so far is the the array shows in the partial as [object Object]. That's the closest I've gotten :-(
In my parent layout I have...
{{> dropdown dd-id='appId' dd-text='App' dd-options=this.app }}
app is set to an array of objects like: [{ "id": "blah...", "text": "blether..." }]. It has only 1 line in the array.
In the partial is...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="{{ dd-id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ dd-text }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{{#each dd-options }}
<a class="dropdown-item" id="{{ id }}">{{ text }}</a>
{{/each}}
</div>
</div>
In the parent rendered page, the dropdown looks like a Bootstrap button dropdown, so that's good, but the options shows...
[object Object] instead of the single option row with id and text that I need it to show.
What am I doing wrong? Thank you for sharing your expertise! :-)
I ran into this problem as well and it seems handlebars.js doesn't support sending arrays (or objects) to partials using named parameters. See this issue:
https://github.com/wycats/handlebars.js/issues/1058
Related
Let's say I have one view
users.handlebars
{{#each users}}
<tr>
<td>{{this.id}}</td>
<td>{{this.profile.firstname}}</td>
<td>{{this.profile.lastname}}</td>
<td>{{this.profile.location}}</td>
<td>{{this.email}}</td>
<td>{{this.profile.status}}</td>
<td><i class="fas fa-user-edit"></i>
<a class="user-ban-btn" href="javascript:void(0)">
<i class="fas fa-hand-paper"></i>
</a>
<a class="user-delete-btn" href="javascript:void(0)"> // THIS IS DELETE BUTTTON
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
{{/each}}
And another
main.handlebars
<div class="modal-box" id="user-delete-modal">
<div class="modal-box-message">
<p>Are you sure u want to delete this user?</p>
YES
NO
</div>
</div>
In first view, I click on button delete user but I need to parse data from this view to the second view where I choose YES or NO because yes have a link with ID parameter /users/delete/:id But i don't know to do it.
Note: Main.handlebars is template and users.handlebars is inserted into this template and that modal box is opened just with javascript there is no page refresh.
I will be thankful for any idea how to make it.
Solved by adding onClick="get_user_id(this.id)" to a element.
And then taking it with javascript.
I am rather new to Node.js, Express, Handlebars, etc. and I am attempting to build a dynamic dropdown menu using Node.JS and Express-Handlebars.
This is what my data looks like
var dropdownCategory = [
{title:"Title", dropdownItem: [{title: "1"}, {title: "2"}]},
{title: "Other title", dropdownItem: [{title: "3"}, {title: "4"}]}]
This is how I am iterating over it in express handlebars currently:
{{# each dropdownCategory}}
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle = "dropdown">
{{title}}
</a>
{{# each dropdownItem}}
<div class="dropdown-menu">
{{title}}
</div>
{{else}}
{{/each}}
</li>
{{else}}
(...)
{{/each}}
I am always getting the first title from the dropdownItem only. Would appreciate your input on this. I assume it is a problem of nesting the second array within the object, but I honestly have no idea how to fix it. Thank you!
First lets iterate over dropdownCategory and log it on to the console to see:
{{# each dropdownCategory}}
{{log this}}
{{/each}}
in console you should see this :
{title:"Title", dropdownItem: [{title: "1"}, {title: "2"}]},
{title: "Other title", dropdownItem: [{title: "3"}, {title: "4"}]}
now we have to iterate over inside "this".
{{# each dropdownCategory}}
{{#each this.title}} //instead of "this.title", "this" or "." also correct
{{this}}
{{/each}}
{{/each}}
you can always log it with "log" helper method.
I left the html part to you :) you can decorate the way u want.
I hope it helps
I got a problem with displaying values inside "main" loop
my code looks like this:
{{# each movies}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<!--<img src="..." alt="...">-->
<div class="caption">
<h3>{{this.title}}</h3>
<p>Rating :
{{#each ../ratings}}
{{this}}
{{/each}}
</p>
<p>Genre: <b>{{this.genre}}</b></p>
<p>{{this.description}}</p>
<p>Modify Delete</p>
</div>
</div>
</div>
{{/each}}
And the problem is that I get all three values of "ratings" list inside the same block, but I want to get them separately one per each of movies. Any suggestions? Thank you in advance.
I needed to change my model and include rating field to it. So I didn't need the second each loop at all.
I have a nested each helper inside an each helper. i want to accsess a variable from the outer each helper inside the inner each helper. code bellow
{{#each this=outer}}
<li>
{{each this.values}}
<input type='radio' value='{{this}}' data-id='{{outer.id}}'>
{{/each}}
</li>
{{/each}}
the above syntax does not work
You can use a parent context using ../ inside the variable.
I'm not sure how your data is structured but your template should probably look something like this:
{{#each outer}}
<li>
{{each outer.values}}
<input type='radio' value='{{this}}' data-id='{{../outer.id}}'>
{{/each}}
</li>
{{/each}}
Check out this github issue for more.
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.