Looping through two arrays simultaneously and printing in Handlebars Ember - javascript

I have two arrays NOVNoticeTypeName and NOVNumber, they both have the same number of elements, now I want to loop through one of them and print the values side by side as below:
{{#each v.NOVNoticeTypeName as |nntn index|}}
{({{v.NOVNoticeTypeName.[index]}} {{v.NOVNumber.[index]}})
{{/each}}
I understand looping is a mess in the Ember handlebars.
How can I achieve this?

First of all I don't share your opinion that looping is a mess in Ember templates. Would be great if you don't put such opinions as a facts. Especially if it comes without any argument.
What you want to achieve could be done with a combination of an {{each}} loop and a template helper. As your example already shows {{each}} loop yields the current value and index. You can't access an array element directly using the index as in JavaScript array[index] in an Ember template but you could achieve the same using a template helper. A template helper, lets call it {{object-at}} that gets an index as first and an array as second argument and returns array[index].
Lets see an example how that would work:
{{#let (array 'a' 'b' 'c') as |letters|}}
{{#let (array '1' '2' '3') as |numbers|}}
<ul>
{{#each letters as |letter index|}}
{{letter}} {{object-at index numbers}}
{{/each}}
</ul>
{{/let}}
{{/let}}
Such a template helper wouldn't be to complex. But you don't have to worry at all, cause it's already available as part of ember-composable-helpers.

Related

How can I iterate an array of (Mongoose) objects and output string properties?

I have this Handlebar code in an Express project:
{{#if user}}
<p>Welcome, {{user.username}}.</p>
{{#each user.snippets}}
{{log 'heading' this.heading}}
<h1>{{heading}}</h1>
<code>{{code}}</code>
{{/each}}
The username is output correctly, and the loop is executed the right amount of times (which I see from the logging). However, the string properties heading and code are undefined, even though they are correctly set in my database. Both user and snippets are Mongoose objects or schemas (I am not sure about the terminology), or rather snippets (a property of users) is an array of such objects.
I am not a 100% sure if I'm using the this keyword correctly, or if I need brackets. I have also tried helpers, but they don't seem to do what I want. Any suggestions?

Using result of one helper function in another helper function within Handlebars

I am checking if there is anyway that I can use the result of one helper function in another helper function and how can I use it, for example, I am looping through as below
{{#each v.NOVNumber as |vv iindex|}}
And then if I am getting another element as below, using the same index:
{{get v.NOVNoticeTypeName iindex}}
Can I use this element that we have got in a statement like below, to check if that is first or last element etc?
{{#if (isFirst v.NOVNumber vv)}}
You you can use helpers together to create more powerful functions. Ember Composable Helpers provides both a good pattern for using helpers together as well as the specific has-next and has-previous helpers that you need to know if an element is first of last.
An example using has-next
{{#if (has-next page pages)}}
<button>Next</button>
{{/if}}

Rendering Empty Arrays/Objects with Mustache

Is it possible to render empty arrays or objects in Mustache if I'm passing these values automatically? For instance, I might use {{value}} where the value is an empty object or array. But I want to render the empty array like [], I don't want Mustache to try to iterate through it!
Mustache is very very simplistic - you might want to look into Handlebars for more functionality. That being said, {{value}}{{^value}}[]{{/value}} should do the trick!

Meteor: Using while loop in Template

How would I use a while loop in meteor blaze?
I tried using {{unless}} but that did not work. This is what I tried:
<template name="homePage">
<h2>Welcome to home page! </h2>
{{#unless numberOfDays 0}}
<span>hi</span>
{{numberOfDays--}}
{{/#unless}}
</template>
It did not work at all.
There is no #while in spacebars, the templating engine that is default in meteor-blaze.
The #unless keyword is a negated #if, a conditional on something not being truthy. The unless block is not a loop, it can only run once. Like if, the block will either run or not run. The #unless runs if the condition is not truthy.
The only loop construct is #each. You could emulate the behavior of a for or while loop by calculating the results outside the template and placing them in an array variable. In the template, call #each on the array variable.
Although writing a customized handlebars block helper can be used to make custom iteration such as a while loop, Meteor's spacebars is a fork of the handlebars code, and may require a slightly different syntax.
For most simple uses, #each is enough . Reformatting data will often allow #each to be used in a natural way.
From the Spacebar docs
#Each
An #each template tag takes a sequence argument and inserts its content for each item in the sequence, setting the data context to the value of that item:
<ul>
{{#each people}}
<li>{{name}}</li>
{{/each}}
</ul>
The argument is typically a Meteor cursor (the result of collection.find(), for example), but it may also be a plain JavaScript array, null, or undefined.
An "else" section may be provided, which is used (with no new data context) if there are zero items in the sequence at any time.

Check for duplicates in each loop in Ember.js

I have a very simple template loop:
{{#each}}
{{title}}
{{/each}}
Fact is, my title can appear in my data multiple times (of course other parts of the record change) but I want to make sure that there are no duplicates for a given property (in this case title). Is there any way to put some logic inside the template to make sure to exclude duplicates?
I tried using an Handlebar Helper, but I really didn't make much progress with that.
You should put a computed property on the controller that's backing the template. Ember has a method uniq that will return the unique items in the array.
uniqueItems: function(){
return this.get('model').getEach('title').uniq();
}.property('model.#each.title')
http://emberjs.jsbin.com/IMOMoliB/5/edit

Categories