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!
Related
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.
In KnockoutJS, we can go
ko.mapping.toJS(object)
and get our object returned with observables and whatnot converted to vanilla Javascript object. Now, ko.mapping.toJS ignores computed properties. I have a scenario where I basically would like the functionality of ko.mapping.toJS to retain my pureComputed fields with whatever value they had at the time.
I've looked into the documentations page, but it looks like the "mapping options" are for the fromJS method, not toJS.
Any way I can convert my Knockout Object to a JS object but retain the pureComputeds being regular properties in the output?
I switched from ko.mapping.toJS to ko.toJS and the output of ko.toJS does include the computed properties like I want, so that seems to be all I need.
I have a HTML fragment that iterates over key, value collection. When I create an object and put some value in, then iterate trough that object via HTML fragment, all works perfectly.
However since I need keys in specific order, I'm using a Map instead of plain object. This time when I debug I can see that my insertion order was preserved, but for some reason the HTML fragment which iterates over collection doesn't seem to know how to do so. I see nothing on my screen when I use the map object, opposed to the regular object when I see unordered content
tr ng-repeat="(key, value) in rowTitlesValues"
Is how my HTML fragment looks like, when I switch rowTitlesValues back to object works again, what am I doing wrong, and how does one keep insertion order or how do I sort object so it's keys are in custom order?
From Angular reference on ng-repeat (link):
Iterating over object properties
It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:
<div ng-repeat="(key, value) in myObj"> ... </div>
You need to be aware that the JavaScript specification does not define the order of keys returned for an object. (To mitigate this in Angular 1.3 the ngRepeat directive used to sort the keys alphabetically.)
Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj. It seems that browsers generally follow the strategy of providing keys in the order in which they were defined, [...]
If this is not desired, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilter or implement a $watch on the object yourself.
Additionally, I do not think Angular 1.x knows how to iterate over a Map. I believe this line in the code proves it:
collectionKeys = [];
for (var itemKey in collection) { // iterates your object using `in`, not `of` or `Map.forEach()`
...
}
// ng-repeat then iterates the collectionKeys to create the DOM
So you will probably need to act as Angular docs suggest:
[...] convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilter or implement a $watch on the object yourself.
Let's say I have some data in an array. Each element of that array is an object that can have:
an id
some data
a property (let's call it sub) that would contain an array of objects with the same properties (including that sub property).
Basically, that is a nested data where each object can hold more object.
I know I can walk that data tree with a recursive function like this one, but I'm wondering if there is something that underscore or angular can offer me that would avoid me having to threat all that boilerplate and just do something like data.findNestedById(12345, "sub");
Take a look at this https://github.com/s3u/JSONPath it might be helpful to you. Include the required script reference into your page and then you can try it somehting like this.
JSONPath({json: jsonObject, path: pathToLookFor});
Demo http://plnkr.co/edit/6uNp23JkuRkQCI1KnmAK?p=preview
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