UI 不会通过从自定义绑定方法更新中更新 observable 来更新答案

【问题标题】：UI is not updated by updating observable from the custom binding method updateUI 不会通过从自定义绑定方法更新中更新 observable 来更新
【发布时间】：2021-08-20 05:28:44
【问题描述】：

我正在开发一个淘汰应用程序，其中有一个用于选择一个月中某一天的下拉菜单，它的值会根据月份选择而变化（例如：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>

【问题讨论】：

也许这个问题对你有帮助：stackoverflow.com/questions/22503064/…

标签： html knockout.js typescript2.0 knockout-2.0 knockout-3.0

【解决方案1】：

你的问题有点不清楚。但是，我想您正在尝试实现这一点，只要所选月份发生变化，可选日期数组就会更新。

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

在我看来，这样的逻辑应该在视图模型级别（在您的情况下是您的 MyView 类）实现，因为它与 view 无关，而纯粹与型号。换句话说，要处理 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 模式的一个关键点。

希望这有助于并解决您的问题。

【讨论】：