如何解决UI 不会通过从自定义绑定方法更新中更新 observable 来更新
我正在开发一个淘汰赛应用程序,其中有一个用于选择一个月中某一天的下拉菜单,其值会根据月份选择而变化(例如:5 月 1 日至 31 日、11 月 1 日至 30 日) ,我成功呈现了 UI,但我的问题是当我尝试从敲除绑定处理程序的更新进行更新时,所选值 (this.dayValue
) 未在 UI 上显示为已更新。我已经给出了下面的示例代码,请告诉我。我想这是重新绑定的问题,即使我不确定。请帮忙。提前致谢。
HTML:
<script type="text/html" id="person-template">
<select data-bind="options: months,value: monthValue,event:{change: $data.noOfDays}></select>
**<select data-bind="options: days,value: dayValue,event:{change: $data.dateModifiy}></select>**
<select data-bind="options: years,value: yearValue,event:{change: $data.dateModifiy}></select>
</script>
打字稿:
export class MyView{
private dayValue: Observable<string>;
constructor(opt: Iclass){
this.dayValue = opt.current().getDate().toString();
}
private noOfDays(): void {
let temp: string[] = [];
let month: number = this.months().indexOf(this.monthValue());
let noOfDays: number = new Date(this.yearValue(),month + 1,0).getDate();
for (let i: number = 1; i <= noOfDays; i++) {
temp.push(i.toString());
}
this.days(temp);
}
}
ko.bindingHandlers.MyDate = {
init(element: HTMLElement,valueAccessor: any,allBindingsAccessor: any,viewmodel: any,bindingContext: any): any {
let options: Iclass = ko.utils.unwrapObservable(valueAccessor()) || {};
let myView: Myview = new MyView(options);
ko.cleanNode(element);
ko.applyBindingsToNode(element,{
template: {
name: "person-template",data: myView
}
});
return { controlsDescendantBindings: true };
},update(element: HTMLElement,bindingContext: any): any {
let options: Iclass = ko.utils.unwrapObservable(valueAccessor()) || {};
let myView: Myview = new MyView(options);
}
示例代码:
<div data-bind="MyDate:{ name: 'sample',current: newDate}"></div>
解决方法
你的问题有点不清楚。但是,我猜您是在尝试实现这一点,每当所选月份发生变化时,可选择日期的数组就会更新。
虽然我没有完全看到您的具体问题,但我看到了一种设计问题,这可能是出现问题的根本原因。
在我看来,这样的逻辑应该在视图模型级别(在您的情况下是您的 MyView
类)实现,因为它与视图无关,而纯粹与模型。换句话说,要处理 observable 数据的更改,您不应该使用 change
事件之类的东西通过 view 连接它,而是直接处理 observable 的通知。
我会在 MyView
构造函数中实现类似的东西。
export class MyView{
private dayValue: Observable<string>;
constructor(opt: Iclass) {
this.dayValue = opt.current().getDate().toString();
// this will create an on-the-fly computed,which will gather all the observables you read inside,and run whenever each changes (like the selected month)
ko.computed(() => {
// something like updateSelectableDays() would be a better name
this.noOfDays();
});
}
}
通过这种方式,您可以省略所有 change
事件,并将状态维护责任传递给 viewmodel。请注意,这基本上是所谓的 MVVM 模式的关键点。
希望这对您有所帮助,并解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。