选择框的页面加载时的淘汰订阅触发器

Question

我使用 subscribe 创建了一个扩展器，目的是拦截用户对输入字段的更改并强制设置一个值。

例如，我在 observable 上设置了“Bar”的强制值。如果用户将其更改为“Foo”，我将强制它为“Bar”并通知用户。 （用于原型/示例解决方案）。

它适用于文本框和单选按钮但不适用于选择框。它似乎在页面加载时触发，而不仅仅是在更改时触发。

小提琴：https://jsfiddle.net/4gus57pd/7/

ko.extenders.forcedValue = function(target, newValue) {
    target.subscribe(function(writtenValue) {
        console.log(target()+" - "+newValue);
        if(newValue != writtenValue){
            alert("In this example we will use the value "+newValue+" instead.");
        }           
        target(newValue);
    });     
    return target;
};
this.textbox = ko.observable("Foo").extend({ forcedValue: "Bar" });
this.selectbox = ko.observable(1).extend({ forcedValue: 2 });

当您运行它时，尽管值未更改，但仍会触发选择框扩展器？

Answer 1

value 属性是一个string，因此 Knockout 将尝试将值 ["1", "2", "3"] 匹配到您的 observable，其中包含数字 1 或 2。它没有看到选定的值，因此它将您的 observable 更新为第一个 <option>。

如需快速解决方案，请将您的 selectbox 更改为 ko.observable("1")，并将强制值更改为 "2"。

其他建议，与问题无关：

您当前的扩展程序将始终触发两次订阅更改。一个用于第一次更改，一个用于实际重置。如果你将 observable 包装在一个读/写计算中，你会反驳这个：

ko.extenders.forcedValue = function(target, forcedValue) {
  return ko.computed({
    read: target.extend({ notify: "always" }),
    write: function(newValue) {
      console.log("Attempt:", target(), "->", newValue);

      if (newValue !== forcedValue) {
        console.log("Using " + forcedValue + " instead."); 
        target(forcedValue);
      } else {
        target(newValue);
      }

    }
  }).extend({ notify: "always" });
};