How to show error messages in a template after the isInvalid method

Question

I use Ember.js to display a list of clients. Inside this template, I have a modal way to create new customers. Now when creating invalid clients (for example, a duplicate name), errors should be indicated in the template. How can I make this work?

model

Docket.Customer = DS.Model.extend({
  name:        DS.attr('string'),
  initial:     DS.attr('string'),
  description: DS.attr('string'),
  errors: {},
  becameInvalid: function(errors) {
    this.set('errors', errors.get('errors'));
    console.log(this.get('errors'));
  }
});

console output

template

<h1>Customers<button data-uk-modal="{target:'#customer-modal'}" class="icon-plus">New customer</button></h1>

    <div id="customer-modal" class="uk-modal">
        <div class="uk-modal-dialog uk-modal-dialog-slide">
            <a class="uk-modal-close uk-close"></a>
            <form class="uk-form" {{action "save" on="submit"}}>
                <fieldset>
                    <legend>New customer</legend>
                    <div class="uk-form-row">
                        {{view Ember.TextField valueBinding="name" name="name" class="uk-width-1-1" placeholder="Name" required="" }}
                        {{#if errors}}foo{{/if}}
                        {{#if errors.name}}{{errors.name}}{{/if}}
                    </div>
                    <div class="uk-form-row">
                        {{view Ember.TextField valueBinding="initial" name="initial" class="uk-width-1-1" placeholder="Initial" required="" }}
                    </div>
                    <div class="uk-form-row">
                        {{view Ember.TextArea valueBinding="description" name="description" class="uk-width-1-1" placeholder="Description"}}
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="icon-check">Save</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

    <ul class="entries">
    {{#each}}
       <li>
           <div class="actions">
               <button {{action "remove" id}} class="icon-close"></button>
           </div>
           <div class="link" {{action "edit" id}} data-uk-modal="{target:'#customer-modal'}">
                <span class="initial">{{initial}}</span>{{name}}
            </div>
       </li>
    {{else}}
        <li>No customers</li>
    {{/each}}
    </ul>

Answer 1

I understood:

Customization

• Ember 1.2.0
• Ember Data 1.0.0-beta.4 + canary.7af6fcb0
• Handlebars 1.1.2 runtime

model

Docket.Customer = DS.Model.extend({
  name:        DS.attr('string'),
  initial:     DS.attr('string'),
  description: DS.attr('string'),
  number:      DS.attr('string'),
  archived:    DS.attr('boolean')
});

controller

var _this = this;

// Create new record
var customer = this.store.createRecord('customer', data);

// Check for server errors (422) when saving
customer.save().then(function(){
  _this.resetAndCloseForm(form);
}, function(response){
  _this.set('errors',response.errors);
});

way

model: function() {
  this.store.find('customer');
  return this.store.filter('customer', function(customer) {

    // prevent Ember to insert new elements to the DOM if they are invalid
    // .get('isValid') returns always true, I think this is a bug, so I'm checking the ID
    return customer.get('id')
  })
}

template

{{#if errors}}{{errors.name}}{{/if}}

Answer 2

controller. . Customer , .

controller, , / .

. ( ), .

App.CustomerController = Ember.ObjectController.extend({
  errors: [],
  runNameValidation: function() {
    // run validations for 'name'
    // if validations fail, push error to 'errors' array
    // on the controller
  }.observes('model.name')
});

, ( mixin ), , , easyForm.

Update:

, , , :

{{model.errors}}

ED , model errors, . , errors errors .

Answer 3

handlebars, :

Ember.Handlebars.helper('show-errors', function(errors) {
    var html = '';
    if (errors) {        
        html += '<ul>';
        $.each(errors, function(key, values) {
            html += '<li>' + key + ' - ' + values.join(',') + '</li>'
        });
        html += '</ul>'
    }    
    return html.htmlSafe();
})

{{show-errors recordInstance.errors}} - , .

At the first moment, there are no errors, so nothing will be displayed. When your record has an error, a hash will be displayed errorsand the template will be updated.

Take a look at this script http://jsfiddle.net/marciojunior/vh6aL/