How to add the number with `index` in `hbs` template - ember.js

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}}

Related

ember JS : iterating over a json list and displaying in handlebars

I have a JSON object consisiting of an array of json objects.
I want to display the provider group List for every application as a dataList in my JSON object .
The JSON object is :
{"Application1":[{"pg_id":"test00020","pg_name":"test20","sealID":"Application1"},{"pg_id":"test00030","pg_name":"test30","sealID":"Application1"}],"Application2":[{"pg_id":"test00040","pg_name":"test40","sealID":"Application2"},{"pg_id":"test00050","pg_name":"test50","sealID":"Application2"}]}
I have named this JSON object as AppPgMap and in my hbs file I am trying to access it as follows:
**<input class="typeahead" type="text" id={{concat "pg_id_input" index index_new}} list="pg_data" onchange= {{action "getProviderGroups" }} placeholder="search here">
<datalist id="pg_data">
<select class="form-control " id= "new_pg_id" oninput={{action (mut el.value) value="target.value" }} required=true>
{{#each AppPgMap as |application| }}
{{#each application as |providerGroup|}}
<option value={{ providerGroup.pg_id }}> {{providerGroup.pg_name}}</option>
{{/each}}
{{/each}}
</select>
</datalist>**
This doesn't work for me and instead of getting the data list i get an empty input field .
Is there a solution to this? Or do I have to restructure my data and try displaying it another way?
For iterating over an object you can use each-in helper
{{#each-in PgMap as |appName appDetails| }}
{{#each appDetails as |providerGroup|}}
<option value={{ providerGroup.pg_id }}> {{providerGroup.pg_name}}</option>
{{/each}}
{{/each-in}}

How to generate a number of ember-power-select using each loop?

I am suing code below to generate a list of ember-power-select component.
{{#each query_params as |param|}}
<div>
<label for="">{{param.param}}</label>
{{#power-select
options=param.options
selected=option
onchange=(action (mut selectedName))
allowClear=true
class="bar-query--inputs-auto"
as |name|
}}
{{name}}
{{/power-select}}
</div>
{{/each}}
However, selected=option makes all the generated power-select component share the same selected property option. The effect is whenever anyone select's value changes all others selects value will get updated as well.
How should I solve this issue?
{{#each query_params as |param|}}
<div>
<label for="">{{param.param}}</label>
{{#power-select
options=param.options
selected=param.selected
onchange=(action (mut param.selected))
allowClear=true
class="bar-query--inputs-auto"
as |name|
}}
{{name}}
{{/power-select}}
</div>
{{/each}}
I solved issue by changing select=option to select=param.selected.

Ember.js: conditional input attribute

In Ember's input helper, how can I show/hide attributes based on a condition? For example, let's say I want to show required="required" if isEditable is true and disabled="disabled" otherwise. Currently I have something like this:
{{#if isEditable}}
{{input value=model.name required="required"}}
{{else}}
{{input value=model.name disabled="disabled"}}
{{/if}}
...but it would be nice if I bind the attributes somehow instead.
{{ input type='text' required=required disabled=disabled }} works just fine
Working example here
There are a whole bunch of attributes that you can bind directly and required and disabled are among the pack. See here
Note #blackmind is correct that if you were to do this from scratch, you would need to do some work. Fortunately though, TextSupport already does the work for you... :) See here
From the EmberJS site
By default, view helpers do not accept data attributes. For example
{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}
renders the following HTML:
<a id="ember239" class="ember-view" href="#/photos">Photos</a>
<input id="ember257" class="ember-view ember-text-field" type="text" title="Name">
There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. Ember.LinkView or Ember.TextField for the specific attribute:
Ember.LinkView.reopen({
attributeBindings: ['data-toggle']
});
Ember.TextField.reopen({
attributeBindings: ['data-toggle', 'data-placement']
});
Now the same handlebars code above renders the following HTML:
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>
<input id="ember259" class="ember-view ember-text-field"
type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
Or you can reopen the view
Ember.View.reopen({
init: function() {
this._super();
var self = this;
// bind attributes beginning with 'data-'
Em.keys(this).forEach(function(key) {
if (key.substr(0, 5) === 'data-') {
self.get('attributeBindings').pushObject(key);
}
});
}
});
I typically do the following
<input type="checkbox" {{bind-attr disabled=isAdministrator}}>

adding / removing a class from an ember input

Using ember 1.0 and handlebars 1.0
I want to present an ember input as disabled until the user presses the edit button. I have managed to get the functionality working at the expense of code duplication.
{{#if isEditing}}
{{input type="text" value=firstName class="form-control" placeholder="First name" }}
{{else}}
{{input type="text" value=firstName class="form-control" placeholder="First name" disabled=""}}
{{/if}}
just wondering if there was a better way ..
thanks
Instead of disabled your input with classes, just add the disabled attribute for your input field
{{input type="text" value=firstName class="input-medium" disabledBinding="disabled"}}
Demo Fiddle

Using Ember.js with Handlebars.js View in Jade

I am trying to add an ember view using handlebars.js in jade. When I use this code
script(type='text/x-handlebars')
{{view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
it renders it as:
<div id="ember194" class="ember-view"></div>
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
I can't seem to get the textfield to be wrapped within the view. I am wondering if there is a trick to be able to use handlebars correctly within a jade template.
The desired result that I want is:
<div id="ember194" class="ember-view">
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
</div>
Try:
script(type='text/x-handlebars')
{{#view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
{{/view}}
Jade saves you from HTML closing tags but the handlebars block must be intact, and what you're asking for requires the Ember.TextField to be inside a {{#view}} block.
[Edit] FYI check out http://emblemjs.com/