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
Related
I am trying to create sign up and log in forms for my Ember app. I am using the input helpers, but when I set the field for email and password the placeholder text comes in the format of the respective types and also shows the "value" as the placeholder text instead of the defined "placeholder" text. The first name and last name fields show the correct placeholder text and in the correct format.
Here is the code from my sign up template:
{{input type="text" value=firstname id="firstname" placeholder="first name" autofocus="autofocus"}}
{{input type="text" value=lastName placeholder="last name"}}
{{input type="email" placeholder="email" value="emailAddress"}}
{{input type="password" placeholder="password" value="password"}}
{{input type="password" placeholder="confirm password" value="confirmPassword"}}
Here is what the form looks like as a result:
Any ideas how to fix this?
It is because the value passing to the input helper in case of password is a string
{{input type="password" placeholder="password" value="password"}}
it should be
{{input type="password" placeholder="password" value=password}}
see this Twiddle
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}}>
given this code
<div class="form-group">
<label class="control-label" for="stateCode">StateID</label>
{{view Ember.Select
contentBinding="controllers.state.content"
optionValuePath="content.state"
optionLabelPath="content.stateName"
valueBinding="stateCode"
class="form-control"
disabled=isNotEditing
}}
<div class="form-group">
<label class="control-label" for="country">Country</label>
{{input type="text" value=country class="form-control" placeholder="Country" disabled=isNotEditing}}
</div>
the fields all show as disabled. However, when I toggle the isNotEditing property then only the {{input fields are enabled. The {{view Ember.Select field is still disabled.
Is there something else that I need to do to toggle a {{view Ember.Select disabled state ?
thanks
Instead of using disabled, you should used disabledBinding. When you set disabled directly it's the same as statically assigning a single value that does not change (the value of isNotEditing and view instantiation). I'm not sure why using disabled works for inputs but not for selects. It might be a bug with the inputs...
Here's a jsbin : http://jsbin.com/ucanam/968/edit
I need to make a bootstrap form with 10 textfield elements.
From the bootstrap doc, I need to have this code for each textfield element:
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
Em.TextField object only manage the
<input type="text...
and I would like to minimize my handlebar form.
What is the best solution to have the expected result with the minimum of code ?
Is there a sample code for this ?
You can create a new view that includes all of the required bootstrap markup and incorporates the built in Ember.TextField input element. The custom TextField has an added label property that sets the text for the form label.
JSBin Example
Custom TextField:
JS:
App.BootstrapTextFieldView = Ember.View.extend({
templateName: 'bootstrapTextField',
inputElement: null
});
Handlebars:
<script type="text/x-handlebars" data-template-name='bootstrapTextField'>
<div class='control-group'>
<label class="control-label" {{bindAttr for='view.inputElement.elementId'}}>{{view.label}}</label>
<div class="controls">
{{view Ember.TextField valueBinding='view.value' viewName="inputElement"}}
</div>
</div>
</script>
Using the new view
You would use it similar to using the normal Ember.TextField:
<form class="form-horizontal">
{{view App.BootstrapTextFieldView valueBinding='textFieldValue' labelBinding='textFieldLabel'}}
</form>
The only tricky part was correctly setting the for='..." property on the <label> since we need to get the auto-generated id of the {{view Ember.TextField ...}}. This can be done by using the viewName property of the {{view ...}} helper. Setting {{view App.theViewHere viewName='desiredViewName' lets us access the instance of Ember.TextField we created and set the for property of the label to the view's id using the {{bindAttr...}} helper.
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/