2

私は aurelia-validate を使用しており、変数を使用すると検証は正常に機能しますが、変数ではなくオブジェクトのプロパティを検証する必要があります。

機能するものは次のとおりです。

  import {Validation} from 'aurelia-validation';
  import {ensure} from 'aurelia-validation';
  import {ItemService} from './service';

  export class EditItem {
    static inject() {
      return [Validation, ItemService];
    }

    @ensure(function(it){
      it.isNotEmpty()
        .hasLengthBetween(3,10);
    })
      name = '';

    @ensure(function(it){
      it.isNotEmpty()
        .hasMinLength(10)
        .matches(/^https?:\/\/.{3,}$/) //looks like a url
        .matches(/^\S*$/); //no spaces
    })
      url = '';

    constructor(validation, service) {
      this.validation = validation.on(this);
      this.service = service;
    }

    activate(params){
      return this.service.getItem(params.id).then(res => {
        console.log(res);
        this.name = res.content.name; //populate
        this.url = res.content.url;
      });
    }

    update() {
      this.validation.validate().then(
        () => {
          var data = {
            name: this.name,
            url: this.url
          };

          this.service.updateItem(data).then(res => {
            this.message = "Thank you!";
          })
        }
      );
    }
  }

これが私がやろうとしていることです（しかしうまくいきません）...また、クラスにプロパティを保持する方が良いのか、プロパティthis.itemを含むプロパティを呼び出す方が良いのかわかりません（これは典型的な角度の方法です):

  import {Validation} from 'aurelia-validation';
  import {ensure} from 'aurelia-validation';
  import {ItemService} from './service';

  export class EditItem {
    static inject() {
      return [Validation, ItemService];
    }

    @ensure(function(it){
      it.isNotEmpty()
        .hasLengthBetween(3,10);
    })
      this.item.name; //no assignment here should happen 

    @ensure(function(it){
      it.isNotEmpty()
        .hasMinLength(10)
        .matches(/^https?:\/\/.{3,}$/) //looks like a url
        .matches(/^\S*$/); //no spaces
    })
      this.item.url; //no assignment?

    constructor(validation, service) {
      this.validation = validation.on(this);
      this.service = service;
      this.item = null;
    }

    activate(params){
      return this.service.getItem(params.id).then(res => {
        console.log(res);
        this.item = res.content; //populate with object from api call
      });
    }

    update() {
      this.validation.validate().then(
        () => {
          var data = {
            name: this.item.name,
            url: this.item.url
          };

          this.service.updateItem(data).then(res => {
            this.message = "Thank you!";
          })
        }
      );
    }
  }

(編集ページの)既存のオブジェクトに対してバリデーターを使用する方法について、誰かがここでいくつかのガイダンスを教えてもらえますか?

4

2 に答える 2

4

検証はあらゆる種類の状況で機能しますが、 @ensure デコレーターを使用すると、単純なプロパティでルールを宣言するためにのみ使用できます (ご存じのように)。

したがって...

オプション a: ensure デコレータを流暢な API の「ensure」メソッドに置き換えます。これは、次のような「ネストされた」または「複雑な」バインディング パスをサポートします。

import {Validation} from 'aurelia-validation';
import {ItemService} from './service';

export class EditItem {
static inject() {
  return [Validation, ItemService];
}

constructor(validation, service) {
  this.validation = validation.on(this)
    .ensure('item.url')
      .isNotEmpty()
      .hasMinLength(10)
      .matches(/^https?:\/\/.{3,}$/) //looks like a url
      .matches(/^\S*$/)
    .ensure('item.name')
      .isNotEmpty()
      .hasLengthBetween(3,10);
  this.service = service;
  this.item = null;
}

activate(params){
  return this.service.getItem(params.id).then(res => {
    console.log(res);
    this.item = res.content; //populate with object from api call
  });
}

update() {
  this.validation.validate().then(
    () => {
      var data = {
        name: this.item.name,
        url: this.item.url
      };

      this.service.updateItem(data).then(res => {
        this.message = "Thank you!";
      })
    }
  );
}

}

注: item が設定される前でも、検証を設定できます。カッコイイですよね？

オプション b: 検証ルールはアイテムに固有であるため、代わりにそのクラス内の @ensure デコレーターを使用して、検証ルールをアイテム クラス内に移動できます。アイテムを取得した後、VM で検証をセットアップできます。this.validation = validation.on(this.item);または、サービスがアイテムを VM に返すときに検証をセットアップし、それをモデルの本質的な部分にすることもできます。item.validation = validation.on(item);

オプション a が最も簡単で、あなたの経験に合っているようです。オプション b は、モデルの検証ルールがビューモデルではなくモデルに存在するため、保守性が高くなります。ただし、オプション b を使用する場合は、HTML を少し調整して、検証のヒントが確実に表示されるようにする必要があります。

于 2015-05-29T03:30:47.730 に答える