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

Question

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

例如，我在可观察对象上设置了“ 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 ，因此淘汰赛将尝试将值["1", "2", "3"]与您的可观察值（包含数字1或2进行匹配。 它没有看到选定的值，因此将您的可观察值更新为第一个<option> 。

为了快速解决，请将您的选择selectbox更改为ko.observable("1")并将强制值更改为"2" 。

与问题无关的其他建议：

您当前的扩展程序将始终触发两个订阅更改。 一个用于第一次更改，一个用于实际重置。 如果将可观察对象包装在计算的读/写中，则需要对此进行反击：

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" });
};