I'm trying do write a jQuery template where I loop over an array and the first element of the array produces a different output to the remaining elements
<script type='text/x-jquery-tmpl'>
{{each things}}
{{if ${index} == 0}}
<div class='active'>${value}</div>
{{else}}
<div class='passive'>${value}</div>
{{/if}}
{{/each}}
</script>
and data:
{things: ["Val1", "Val2", ... , "Valn"]}
But the {{if ${index} == 0}} condition does not work. How do I make the template produce a different output for the first item of the array from the rest?
Try to remove curly braces at ${index}
{{if $index == 0}}
Related
I am trying to loop through an div element containing "data-sly-resource" to be able to include that component as a child.
I have a table element where each cell has an individual authoring interface using a child component. I get two counts that is rowCount as array of "x" and columnCount as array of "y". I'm able to iterate through the class="table-cell" and am able to add "y" number of columns with their respective child components using data-sly-resource . But when I'm trying to iterate through class="table-row" using rowcount it only iterates the content and adds "y" number of rows but doesn't add child components in the rows
thank you
<div class="table">
<sly data-sly-list.card="${rowCount.array}">
<div class="table-row">
<sly data-sly-list.card="${columnCount.array}">
<div class="table-cell" data-sly-test.resourceNode="${['cell', card.intValue] #join='-'}">
<div data-sly-resource="${ #path=resourceNode,
resourceType='example/components/content/tableLongForm/rte'}"
data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
</div>
</sly>
</div>
</sly>
</div>
Authoring Interface Image
You are using the same identifier card for the list items in the nested loops, perhaps you meant it as:
<div class="table">
<sly data-sly-list.row="${rowCount.array}">
<div class="table-row">
<sly data-sly-list.card="${columnCount.array}">
<div class="table-cell" data-sly-test.resourceNode="${['cell', row.intValue, card.intValue] # join='-'}">
<div data-sly-resource="${ #path=resourceNode,
resourceType='example/components/content/tableLongForm/rte'}"
data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
</div>
</sly>
</div>
</sly>
</div>
I use this loop
<form action="/" method="POST">
<template x-for="(deck, index) in $store.cart.decks">
<div x-show="$store.cart.total(index) > 0">
<div><span x-text="$store.cart.total(index)"></span> Karten</div>
<div x-text="deck.price"></div> €
<input :name="'deck[' + index + '][name]'" :value="$store.cart.decks[index].name">
</div>
</template>
</form>
Which works fine and displays all items in my cart and hides those that have a total of 0.
But this will only set the item with 0 on display:none, which will still transfer the data in the POST request.
I tried to use x-if instead of x-show but that is only allowed on a tempate tag.
I tried to add the x-if on the template tag:
<template x-show="$store.cart.total(index) > 0" ...
this results in an error, because index is not set at that point
I tried to add another <template> tag inside the existing template, but then the variables index and deck are not available inside the second any more
How do I prevent the zero cart items being computed in my POST request?
I think something like the following would work, note the div inside both template elements.
<template x-for="(deck, index) in $store.cart.decks">
<div>
<template x-if="$store.cart.total(index)">
<div>
<!-- rest of the content -->
</div>
</template>
</div>
</template>
I'm having this situation where I need to call a method from the dom-repeat. Below is my code
<template is='dom-repeat' items="[[_dataArray]]" as="rowItem">
<template is='dom-repeat' items="[[_objectArray]]" as="columnItem">
<template>
<span>[[_getColumnItemValue(rowItem, columnItem)]]</span>
</template>
</template>
</template>
and in my _getColumnItemValue method, I want to get the value for an object with key specified by the columnData attribute.
Like rowData[columnData]
_getColumnItemValue: function(rowData, columnData) {
return rowData[columnData];
}
My problem is the method _getColumnItemValue is not being called. Is there any better way to do achieve this?
If your code is exactly as you pasted, then you have one too many <template> tags.
<template is='dom-repeat'>
<template is='dom-repeat'>
<span></span>
</template>
</template>
The innermost template must be removed. You are rendering that instead of the <span>.
Finally i was able to make this thing working. Not exactly in this case, but in another project, with exact same logic. The only change was my _objectArray was not an array of strings, it was an array of objects. So the code will look like this:
<template is="dom-repeat" items="{{tableData}}" as="rowData">
<tr>
<template is="dom-repeat" items="{{headers}}" as="columnData">
<td>
<template is="dom-if" if="{{checkType(columnData, 'check')}}">
<paper-checkbox disabled="{{getAttributeValue(columnData, 'disabled')}}" checked="{{getRowData(rowData, columnData)}}" on-change="checkBoxSelected"></paper-checkbox>
</template>
<template is="dom-if" if="{{checkType(columnData, 'led')}}">
<led-indicator on="{{!getRowData(rowData, columnData)}}"></led-indicator>
<span style="display: none;">{{getRowData(rowData, columnData)}}</span>
</template>
<template is="dom-if" if="{{checkType(columnData, 'link')}}">
{{getRowData(rowData, columnData)}}
</template>
<template is="dom-if" if="{{checkType(columnData, 'text')}}">
<span>{{getRowData(rowData, columnData)}}</span>
</template>
</td>
</template>
</tr>
</template>
See the method getRowData
getRowData: function (row, column) {
return row[column.key];
},
and
checkType: function (columnData, type) {
var isType = false;
isType = columnData.type.toLowerCase() == type.toLowerCase();
return isType;
},
This is for a table, which can dynamically add or remove rows and columns and show different type of elements like, a text, link, checkbox some of my custom controls like led-indicator etc.
The logic behind is, the headers array will be used to generate the table columns, this array contains objects of structure
{
name: 'Popular Name',
key: 'PopularName',
type: 'text'
}
and table data contains array of object, which contains the key specified in the headers array.
Hope this may be useful for some one.
{{each HAName }}
{{if HAName.Conatins('Bar')}}
Yes
{{/if}}
{{/each}}
</div>
I am using Jquery template.
HAName is of type var/string.
My requirement :
If HAName contains the word 'Bar' then Yes should be printed.
e.g. HAName=Bar ,HAName=Bar/Lounge , HAName=He goes to Bar
In all the 3 cases Yes should be printed.
As I am new to Jquery template , a quick help would be appreciated.
{{if HAName.toLowerCase().indexOf("bar") >= 0}}
I´m working on a meteor example. I get the value of one tag on click event on the link. That value is the same that is present on one collection inside doc "pet" or "zoo". I want to use this value to filter the content present on the template.
A minimal example:
{{#each Animal}}
<div>
<span> {{pet}} </span>
</div>
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
After click:
{{#each Animal}}
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
On this case when I get the value present in "zoo" I just want to update the template with all the the spans that contains elements on doc zoo, and that all related to pet dissappear.
The query to mongodb is working perfectly, my problem is that I´m a little bit confused.
Should I use helpers?
Thank you so much.
Let's see if I understood correctly your problem.
You should use a Session variable where you store the action you are doing. Then add a template if and print inside of this tag whatever you want to show at that time.
Let's do a minimal example:
<template name="showAnimalsTemplate">
{{if showAnimals}}
{{#each Animal}}
<div>
<span> {{pet}} </span>
</div>
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
{{/if}}
{{if showZoo}}
{{#each Animal}}
<div>
<span> {{zoo}} </span>
</div>
{{/each}}
{{/if}}
Following this example, you add in the client javascript something like this:
Template.showAnimalsTemplate.showAnimals = function(){
if( Session.get('action') == 'showingTheZoo')
return true;
return false;
}
Template.showAnimalsTemplate.showZoo = function(){
if( Session.get('action') == 'showingTheZoo')
return true;
return false;
}
Don't forget to set the session value inside the click event.
Session.set('action', 'showingTheZoo');