Subviews von Ember.View aktualisieren

Question

Ich mache eine Ajax-Form mit einem Server API-Aufrufe. Der Server kann Fehlermeldungen für bestimmte Felder zurückgeben (Beispiel: url => 'Diese URL ist falsch').

Also habe ich eine bestimmte Ansicht für meine Form Textfeld erstellt:

(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", 
}); 

und in meiner Form Ansicht Vorlage habe ich:

(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 
    }); 
} 

Wenn der Benutzer klicken Sie auf den Absenden-Button, I Ich sende alle Formulardaten an den Server und erhalte Fehlermeldungen.

Meine Frage ist, wie kann ich tun, um die "Subview" App.TextField zu aktualisieren, um die Fehlermeldungen einzustellen?

Answer 1

Sie eine benutzerdefinierte verwenden könnte App.Error Objekt, das die Fehlermeldungen enthält. Auch wenn Sie planen, Ember-Daten zu verwenden, gibt es eine Diskussion über die Validierung https://github.com/emberjs/data/pull/130. Und es gibt eine Validierungserweiterung in den ausgezeichneten Ember.js Addons: https://github.com/capitainetrain/ember-addons/tree/master/packages/ember-validators/lib.

Hier ist, was ich im Sinn habe, sehen http://jsfiddle.net/pangratz666/kQJ2t/:

Lenker:

<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); 

Der Fehler Objekt wird dann wie folgt aufgebaut:

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();​ 

Answer 2

Auf form.handlebars setzen eine ID für sie manuell (so es die eine außer Kraft gesetzt werden, die glut automatisch generiert):

<div class="form-row"> 
    <div class="form-element"><div class="input-wrapper">{{view App.TextField id="skill_job" valueBinding="skill.job"}}</div></div> 
</div> 

Und dann:

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