Question

我遵循了Scott Allen的Aurelia Pluralsight课程，该课程使用了Aurelia-Validation插件。

这会导致视图模型edit.js：

import {inject} from "aurelia-framework";
import {MovieService} from "./movieService";
import {Router} from "aurelia-router";
import {Validation} from "aurelia-validation";

@inject(MovieService, Router, Validation)
export class Edit {

    constructor(movieService, router, validation) {
        this.service = movieService;
        this.router = router;
        this.validation = validation.on(this)
        .ensure("movie.title").isNotEmpty().hasLengthBetween(3, 50)
        .ensure("movie.releaseYear").isNotEmpty().isNumber().isBetween(1900, 2100)
        .ensure("movie.starRating").isNotEmpty().isNumber().isBetween(0, 5);
    }

    activate(params) {
        this.service.getById(params.id)
            .then(movie => {
                this.movie = movie;
           });
    }

    save() {
        this.validation.validate()
            .then(() => {
                this.service.save(this.movie)
                    .then(movie => {
                        let url = this.router.generate("home");
                        this.router.navigate(url);
                    });
            })
            .catch(() => {
            });
    }

}

查看edit.html

                <form class="form-horizontal"
                      validate.bind="validation"
                      submit.trigger="save()">

                    <div class="form-group">
                        <label class="col-sm-2" for="title">Title</label>
                        <div class="col-sm-10">
                            <input type="text" id="title" placeholder="Title" value.bind="movie.title" class="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2" for="rating">Rating</label>
                        <div class="col-sm-10">
                            <input type="text" id="rating" placeholder="Rating" value.bind="movie.starRating" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2" for="releaseYear">Release Year</label>
                        <div class="col-sm-10">
                            <input type="text" id="releaseYear" placeholder="Release Year" value.bind="movie.releaseYear" class="form-control" />
                        </div>
                    </div>

                    <div class="pull-right">
                        <a route-href="route:home" class="btn btn-default" role="button">Cancel</a>
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>

                </form>

这可以正常工作，验证可以防止提交无效数据。

接下来我要做的是将验证规则从视图模型中抽象出来并引入模型类。我创建了一个模型movieModel.js

import {inject} from "aurelia-framework";
import {Validation} from 'aurelia-validation';
import {ensure} from 'aurelia-validation';

@inject(Validation)
export class MovieModel {

    @ensure(function(it){ it.isNotEmpty().hasLengthBetween(3, 50) })
    title = "";

    @ensure(function(it){ it.isNotEmpty().isNumber().isBetween(1900, 2100) })
    releaseYear = "";

    @ensure(function(it){ it.isNotEmpty().isNumber().isBetween(0, 5) })
    starRating = "";

    constructor(validation) {
        this.title = "";
        this.releaseYear = "";
        this.starRating = "";
    }
}

并在视图模型中使用它：

import {inject} from "aurelia-framework";
import {MovieService} from "./movieService";
import {Router} from "aurelia-router";
import {Validation} from "aurelia-validation";
import {MovieModel} from "./movieModel";

@inject(MovieService, Router, Validation, MovieModel)
export class Edit {

    constructor(movieService, router, validation, movieModel) {
        this.service = movieService;
        this.router = router;
        this.movie = movieModel;
        this.validation = validation.on(this.movie);
    }

    activate(params) {
        this.service.getById(params.id)
            .then(movie => {
                this.movie = movie;
           });
    }

    save() {
        this.validation.validate()
            .then(() => {
                this.service.save(this.movie)
                    .then(movie => {
                        let url = this.router.generate("home");
                        this.router.navigate(url);
                    });
            })
            .catch(() => {
            });
    }

}

对视图edit.html的更改只是将validate属性添加到输入字段，例如

<input type="text" id="title" placeholder="Title" value.bind="movie.title" class="form-control"/>

变为

<input type="text" id="title" placeholder="Title" value.bind="movie.title" validate="title" class="form-control"/>

但是，当我通过activate（）函数编辑从服务中检索到的影片，然后尝试保存它时，验证会将所有属性标记为“是必需的”。

我假设视图模型的构造函数中的语句this.validation = validation.on（this.movie）将验证绑定到模型的非填充实例，但我不知道如何克服这个问题。 / p>

Answer 1

每次更改模型时都需要创建验证

activate(params) {
    this.service.getById(params.id)
        .then(movie => {
            this.movie = movie;
            this.validation = this.Validation.on(this.movie);
       });
}

UPDATE：和构造函数

this.Validation = validation;

Aurelia验证抽象为模型

1 个答案:

Aurelia验证抽​​象为模型

1 个答案:

Aurelia验证抽象为模型