Aurelia验证抽象为模型
Aurelia Validation abstracted to Model
我学习了Scott Allen的Aurelia Pluralsight课程,该课程使用了Aurelia验证插件。
这导致了一个视图模型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(() => {
});
}
}
和一个视图编辑.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)语句将验证绑定到模型的未填充实例,但我不知道如何克服这一点。
每次更改模型时,都需要创建验证
activate(params) {
this.service.getById(params.id)
.then(movie => {
this.movie = movie;
this.validation = this.Validation.on(this.movie);
});
}
UPDATE:在构造函数中
this.Validation = validation;
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 为集合分配大量的模型弹药
- 如何使用backbone.js从集合中获取模型名称
- 骨干模型默认值-todos.js示例中不必要的代码
- EmberJS中支持单字母单词模型
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- 将不在模型中的数据返回到mvc控制器
- 将jQuery.ech()方法转换为本地JavaScript抽象的最佳方法是什么
- 如何在视图模型contet更新更新上调用Jquery函数
- 如何使用Javascript客户端对象模型检索Sharepoint 2010列表项权限
- 我应该如何检查主干.主干.模型更改时查看
- Ext.js从json构建模型关系的问题
- 显示模块模式在Knockout中设置模型的新实例
- 使用导航属性创建Kendo UI网格模型的问题
- Angular,函数在(模型)工厂中返回值
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 如何将本地json数据加载到Extjs数据模型中
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- Aurelia验证抽象为模型
- 使用抽象模型实现客户端到服务器端的信号推送