<template name="mytemplate">
{{#each work}}
<div name="adiv">
<input type='hidden' value={{_id}} id="testid"> <br/>
</div>
{{/each}}
</template>
If I use document.getElementById('testid'),It just get the lasted value.But I want to get the every value.
It's because id value is meant to be unique,
change id to class and document.getElementByClassName('testid') will return an array
Related
I am trying to add a number to an existing index value but I am getting an error. How to solve this?
Here is my try: both tabindex="{{index+1}}", and class="digit{{index+1}}" throw an error.
{{#each cardDigitField as |field index|}}
<input type="number" tabindex="{{index+1}}" min="0" max="9" maxlength="1" value=''
onKeyUp={{action "numberEntered" index}}
onKeyPress={{action "numberInit" }} class="digit{{index+1}}">
{{/each}}
You might learn about template expressions from Angular, but template expressions are not supported in Ember by default.
What you can do is using an Ember template helper.
Either you create your own or use an addon (for example ember-composable-helpers).
{{#each cardDigitField as |field index| }}
<input type="number" tabindex="{{inc index}}" min="0" max="9" maxlength="1" value=''
onKeyUp={{action "numberEntered" index}}
onKeyPress={{action "numberInit" }} class="digit{{inc index}}">
{{/each}}
I'm wondering how I'd go about dynamically editing a component property from within the component. Code might help you get a bit more clarity on what I'm trying to do.
Templates/boards.hbs
<div>
{{board-component title='Title that wants to be dynamic'}}
</div>
Components/board-component.hbs
{{#if isEditing}}
<div>
<input type="text" value={{title}}>
</div>
{{else}}
<div>
{{title}}
</div>
{{/if}}
Am I right in saying that standard behaviour would have the value I specify in the input reflect as the title, but due to the fact that I've declared the value in the template it reverts back to this declared value?
How can I get around this?
<input type="text" value={{title}}>
It means, board-component title property will get values from boards.hbs. and initially, this will be displayed in the input. but changing input value will not reflect it in title property of the components.
But if you used input helper like below,
{{input type="text" value=title}}
It is two way binding between input value and title property. so whenever you change value from input that will reflect in components.
So answer to your question, use input helper.
{{input type="text" value=title}}
Here is my template snippet.
{{#if is_multiple_choice _id}}
<div class="row" style="margin-bottom: 20px;">
<div class="input-field col s11">
<select id="ans_{{_id}}" name="answer" class="multiple_choice_answer">
<option value="">No Answer Given for Multiple Choice</option>
{{#each allowed_values}}
{{#if matched value _id}}
<option value="{{value}}" selected>{{value}}</option>
{{else}}
<option value="{{value}}">{{value}}</option>
{{/if}}
{{/each}}
</select>
<label>{{text}}</label>
</div>
</div>
{{/if}}
So I aimed to use _id in "matched" helper, but it seems the _id in matched value _id line gets nothing.
How can I get _id and use it in "matched" helper?
Please help me!!!
Within the {{#each}} {{/each}} loop, you are in a child context
To access the parent context, you need to use the .. notation, like this: ../_id.
You can also use this within a Template.helper to get this._id:
Template.example.helper({
"id": return this._id;
});
You can then use id anywhere in the Template.
Note:
1) this._id is equivalent to Template.instance().data._id within a helper.
Use Template.instance().data to access the template data context within an event, onCreated or onRendered.
2) The .. notation can be used to access the grand-parent template as well, with ../../_id for example.
This .. pattern is acceptable to access parent context from a {{#each}} loop within the same Template for example, but it is not recommended to use with child templates (to access parent template) because your child template is not reusable without the parent template context.
Is there a way to do grouping in a polymer repeat template? I have a list of items with doc.name and doc.manualType, but I want to group a list of items so the manualType only displays once per group instead of for each item.
Or how do I update my binding to have a previousManualType so I can only display the manualType if it's different than the previous manualType.
<template id="docListTemplate" bind="{{searchResults}}">
<div class="vGroup">
<core-selector id="selector" class="list" multi selected="{{multiSelected}}">
<template repeat="{{doc, i in data}}" {previousManualType:''}>
<template if="{{doc.manualType!=previousManualType}}">
<h1>{{doc.manualType}}</h1>
</template>
<div class="cb item">
{{doc.name}}
</div>
</template>
</core-selector>
</div>
</template>
What about
<template id="docListTemplate" bind="{{searchResults}}">
<div class="vGroup">
<core-selector id="selector" class="list" multi selected="{{multiSelected}}">
<template repeat="{{manualType in ManualTypes}}">
<template repeat="{{doc, i in manualType.data}}">
<h1>{{doc.manualType}}</h1>
<div class="cb item">
{{doc.name}}
</div>
</template>
</core-selector>
</div>
</template>
You need to prepare the data structures accordingly.
As Gunter pointed out the data structure seems to be the keypoint.
If you have no control over the input, then you will need to transform it.
You could user underscore / lodash to groupBy
http://underscorejs.org/#groupBy
https://lodash.com/docs#groupBy
Uncaught Error: Assertion Failed: The metamorph tags, metamorph-28-start and metamorph-28-end, have different parents. The browser has fixed your template to output valid HTML (for example, check that you have properly closed all tags and have used a TBODY tag when creating a table with '{{#each}}')
Code Snippet:
<div class="panel-body">
<div class="row">
{{#each}}
<div class="col-xs-3">
<label class="control-label">{{fieldname}}</label>
</div>
{{#if fullcolumn}}
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="full">
</div>
{{else}}
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="half">
</div>
{{/if}}
{{#if newrow}}
</div>
<div class="row">
{{/if}}
{{/each}}
</div>
</div>
Guide me what i am wrong in this code?
My Requirement is:
Hi, i have the requirement to display fields details in two column table. For example
Field1 Elt1 Field2 Elt2
Field3 Elt3
Field4 Elt4 Field5 Elt5
I have array of fields,
[
{
"fieldname":"Field1",
.
.
},
{
.
.
},
.
.
.
]
How could achieve this?
{{#if newrow}}
</div>
<div class="row">
{{/if}}
This is the problematic code. The div outside each is closed inside it.
This check was brought by this MR: https://github.com/emberjs/ember.js/pull/4404
You should not close the tag opened outside an each inside it.
I believe the issue is from the {{#if newrow}} block. You appear to be building out the columns dynamically and trying to insert a new row. The logic on the model is not working as expected and leaving you DOM manged. Try moving to a doubly-nested {{#each}} and avoiding this switching logic.