0

サーバー API 呼び出しで ajax フォームを実行しています。サーバーは、特定のフィールドに対してエラー メッセージを返すことができます (例: url => 'この url は正しくありません')。

だから私は私のフォーム 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",
});

そして、私のフォームビューテンプレートには次のものがあります:

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

ユーザーが送信ボタンをクリックすると、すべてのフォーム データがサーバーに送信され、エラー メッセージが取得されます。

私の質問は、「サブビュー」 App.TextField を更新してエラーメッセージを設定するにはどうすればよいですか?

4

2 に答える 2

4

エラーメッセージを保持するカスタムApp.Errorオブジェクトを使用できます。また、ember-dataの使用を計画している場合は、検証についての説明がありますhttps://github.com/emberjs/data/pull/130。また、優れたEmber.jsアドオンには検証拡張機能があります：https ：//github.com/capitainetrain/ember-addons/tree/master/packages/ember-validators/lib 。

これが私が念頭に置いていることです。http ：//jsfiddle.net/pangratz666/kQJ2t/を参照してください。

ハンドルバー：

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

次に、エラーオブジェクトは次のように作成されます。

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();​
于 2012-04-09T07:46:53.927 に答える
1

form.handlebars で id を手動で設定します (ember が自動的に生成するものを上書きします):

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

その後：

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
    });
}
于 2012-04-08T23:27:10.250 に答える