I'm doing an ajax form with a server API calls. The server can returns errors messages for specific fields (example: url => 'This url is incorrect').
So I've created a specific view for my form Textfield:
(textfield.handlebars)
{{view Ember.TextField valueBinding="value"}}
{{#if hasError}}
<div class="error">{{errorMessage}}</div>
{{/if}}
(textfield.js)
App.TextField = Ember.View.extend({
hasError: false,
errorMessage: "",
templateName: "textfield",
});
And In my form view template I have:
(form.handlebars)
<div class="form-row">
<div class="form-element"><div class="input-wrapper">{{view App.TextField valueBinding="skill.job"}}</div></div>
</div>
(new.js)
submit: function() {
var skill = this.get("skill");
skill.saveResource()
.fail( function(e) {
//how could I set the errorMessage in my App.TextField
});
}
When the user click on the submit button, I'm sending all form datas to the server and retrieving errors messages.
My question is how can I do to update the "subview" App.TextField to set the error messages?
You could use a custom App.Error
object which holds the error messages. Also, if you are planning to use ember-data there is a discussion about validation https://github.com/emberjs/data/pull/130 . And there's a validation extension in the excellent Ember.js addons: https://github.com/capita.netrain/ember-addons/tree/master/packages/ember-validators/lib .
Here's what I have in mind, see http://jsfiddle.net/pangratz666/kQJ2t/ :
Handlebars :
<script type="text/x-handlebars" data-template-name="edit" >
name: {{view App.TextField valueBinding="content.name" propertyName="name" }}</br>
age: {{view App.TextField valueBinding="content.age" propertyName="age" }}</br>
<button {{action "save"}}>save</button>
</script>
JavaScript :
App.Error = Ember.Object.extend({
isError: function(propertyName) {
return !Ember.empty(this.getErrorMessage(propertyName));
},
getErrorMessage: function(propertyName) {
return this.get(propertyName);
}
});
App.ErrorMixin = Ember.Mixin.create({
classNameBindings: ['isError:error'],
errorBinding: 'parentView.error',
template: Ember.Handlebars.compile('{{#if isError}}{{errorMessage}}{{/if}}'),
isError: function() {
var error = this.get('error');
return error && error.isError(this.get('propertyName'));
}.property('error', 'propertyName'),
errorMessage: function() {
var error = this.get('error');
if (error) {
var propertyName = this.get('propertyName');
return error.getErrorMessage(propertyName);
}
}.property('error', 'propertyName')
});
App.TextField = Ember.TextField.extend(App.ErrorMixin);
The error object is then constructed like this:
Ember.View.create({
templateName: 'edit',
contentBinding: 'App.obj',
save: function() {
var content = this.get('content');
var error = this.get('error');
if (error) {
error.destroy();
}
error = App.Error.create();
if (content.get('age') <= 100) {
error.set('age', 'sorry, you are not wise enough');
}
if ('Chuck Norris' === content.get('name')) {
error.set('name', 'yeah, and i am the queen of england');
}
this.set('error', error);
}
}).append();
On form.handlebars set an id for it manually (so it will override the one that ember generates automatically):
<div class="form-row">
<div class="form-element"><div class="input-wrapper">{{view App.TextField id="skill_job" valueBinding="skill.job"}}</div></div>
</div>
And then:
submit: function() {
var skill = this.get("skill");
skill.saveResource()
.fail( function(e) {
Ember.View.views["skill_job"].set('errorMessage', 'blah');
Ember.View.views["skill_job"].set('hasError', true);
// of course you will probably want to handle this message from the request or whatever, hope you get the idea
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.