在MVVM模式中,从模型中发送验证消息的方法如下:
isValid
,用于存储验证状态。validate()
,用于执行验证逻辑。validate()
方法中,根据验证逻辑更新isValid
属性的值。isValid
属性,当属性值发生变化时,触发相应的操作。isValid
属性,以便在属性值发生变化时自动更新视图。以下是一个简单的示例:
// 模型(Model)
class User {
constructor(name, age) {
this.name = name;
this.age = age;
this.isValid = false;
}
validate() {
if (this.name && this.age >= 18) {
this.isValid = true;
} else {
this.isValid = false;
}
}
}
// 视图模型(ViewModel)
class UserViewModel {
constructor() {
this.user = new User("", 0);
this.user.validate();
this.user.on("isValid", (isValid) => {
if (isValid) {
// 执行相关操作,例如显示成功消息
} else {
// 执行相关操作,例如显示错误消息
}
});
}
}
// 视图(View)
const userViewModel = new UserViewModel();
const nameInput = document.getElementById("name");
const ageInput = document.getElementById("age");
nameInput.addEventListener("input", () => {
userViewModel.user.name = nameInput.value;
userViewModel.user.validate();
});
ageInput.addEventListener("input", () => {
userViewModel.user.age = parseInt(ageInput.value);
userViewModel.user.validate();
});
在这个示例中,我们定义了一个User
模型,其中包含name
、age
和isValid
属性。我们还定义了一个UserViewModel
视图模型,用于监听模型的isValid
属性。最后,我们在视图中绑定了模型的isValid
属性,以便在属性值发生变化时自动更新视图。
领取专属 10元无门槛券
手把手带您无忧上云