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
Related
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.
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
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'm just wondering what the general pattern for validating forms in EmberJS? For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the fields with errors but not really sure how to do it. Should the IndexView validate the form or should I create a view for each field that validates its self on blur? Below is what I have in my IndexView.
App.IndexView = Ember.View.extend
create: (model) ->
valid = #_validate model
if valid is true
#get('controller').send 'createUser'
else
# HANDLE THE FIELDS WITH ERRORS
_validate: (model) ->
invalid = []
validations = {
firstName: #_validateString model.get 'firstName'
lastName: #_validateString model.get 'lastName'
email: #_validateEmail model.get 'email'
password: #_validatePassword model.get 'password'
accountType: #_validateString model.get 'accountType'
}
# This will get all of the values then runs uniq to see if the
# form is valid
validForm = _.chain(validations).values().uniq().value()
if validForm.length is 1 and validForm[0]
true
else
# other wise build up an array of the fields with issues
for field, val of validations
if val is false
invalid.push field
invalid
_validateString: (str) ->
return false unless str
if str isnt '' then true else false
_validateEmail: (str) ->
pattern = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
pattern.test str
_validatePassword: (str) ->
return false unless str
if str.length >= 6 then true else false
and the template
<div class="row">
<div class="span12">
<div class="signup">
<form class="form-horizontal offset3">
<div class="control-group">
<label class="control-label" for="first_name">First Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="last_name">Last Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
{{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Account Type</label>
<div class="controls">
{{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}}
<label class="radio">
{{view RadioButton checked='false' value="landlord"}}
Landlord
</label>
<label class="radio">
{{view RadioButton checked='false' required="true" value="tenant"}}
Tenant
</label>
{{/view}}
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
I'm just wondering what the general pattern for validating forms in EmberJS?
There seem to be several patterns in use. It depends quite a bit on what is being validated, with the general strategy being to keep business logic far from the view layer as possible. Here are some links that may prove useful:
validations-in-emberjs-application.html recommends performing validation at the controller level, with views are used to trigger validation when focus changes. This screencast demonstrates how this pattern can be used to validate a few simple form-fields.
Asynchronous-Form-Field-Validation-With-Ember provides a few reusable components that can be used to perform simple validations at the view layer.
ember-validations is a library that can be used to add active-record style validation capabilities to any ember-object
For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the field of erro but not really sure how to do it.
since you're looking to validate a number of fields at once it might make more sense to move this validation logic into the controller. Either way, typically you would bind class attributes for a given field to a property as follows:
<div class="controls" {{bindAttr class=firstNameError:error:success}}>
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
So with this in place add a firstNameError property that returns true/false depending on results of your validation. Given your implementation it would probably make sense to set this property when _validate is run, but it could also be a computed property that performs validation in real-time.
Should the IndexView validate the form or should I create a view for each field that validates its self on blur?
That really depends on what you want the user experience to be like. FWIW my vote is to go with on-blur.
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/