UI不是通过从自定义绑定方法更新中更新observable来更新的

Question

我正在开发一个淘汰应用程序，其中有一个下拉列表用于选择一个月中的某一天，它的值会随着月份的选择而变化(例如：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, valueAccessor: any, allBindingsAccessor: any, viewModel: any, 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>

Answer 1

您的问题有点不清楚。然而，我想您正试图实现这一点，无论何时选定的月份发生变化，可选择的日期数组都会更新。

虽然我没有看到你的具体问题，但我看到了一种设计问题，这可能是出现问题的根本原因。

在我看来，这样的逻辑应该在视图模型级别(在您的情况下是MyView类(实现，因为它与视图无关，而纯粹与模型有关。换句话说，要处理可观察数据的更改，您不应该使用change事件之类的东西通过视图连接它，而是直接处理可观察的通知。

我会在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事件，并将状态维护责任传递给视图模型。请注意，基本上这是所谓MVVM模式的一个关键点。

希望这能帮助你，并解决你的问题。