I want to execute a method that modify one data structure on wich I iterate to render the interface.
Im going to try to explain it with one easier example :
I have two datas structure: Car dealerships and cars. I have one array of all car dealerships and one array of all the cars with a property dealership.
This would be and example of the data:
Dealership : [“CONCESIONARIO A”, “CONCESIONARIO B”, “CONCESIONARIO C”]
Cars : [ { name : “CAR A” , description : “description a”,dealership : “CONCESIONARIO C”},
{ name : “CAR B” , description : “description b”,dealership : “CONCESIONARIO B”},
{ name : “CAR C” , description : “description c”,dealership : “CONCESIONARIO B”},
{ name : “CAR D” , description : “description d”,dealership : “CONCESIONARIO B”}]
I’m going to create an accordion for each dealership and into the accordion one card with the info of each cars that have this dealership.
<div class="list accordion-list accordion-opposite">
<ul>
<li>
{{#each dealerships}}
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>
</a>
<div class="list media-list mt0 list-group">
<ul>
<li>
{{#each filterDealership(cars,this)}}
<li>
<a id="element_{{this.ID}}" class=" sheet-open item-link item-content elemento{{this.ID}}" data-sheet="#modal-{{this.ID}}" >
<div class="item-inner" id="div-{{this.ID}}">
<div class="item-title-row">
<div class="item-title-bold">{{this.name}}</div>
</div>
<div class="item-subtitle text-color-green mv6">{{this.description}} </div>
</a>
</li>
{{/each}}
</ul>
</div>
</li>
{{/each}}
</ul>
</div>
And in my property methods I have the function filterDealership(originalArray, dealername) that filters all the cars of one dealership but I cant call this function in my html code. In others frameworks like Vue it is possible, but here?