Knockoutjs 订阅事件，ko.computed 执行时间问题

Question

当 self.selectedQueryId 发生变化时，我想在 knockoutjs 中为 self.selectedTitleId() 设置不同的值，因此我添加了对 selectedQueryId 的订阅。 我有另一个计算变量 self.text 用其他变量格式化 self.selectedTitleId。

我的问题是，当我从 UI 更改 selectedQueryId 值时，首先调用计算函数，然后调用订阅。因此，我尝试显示的文本始终包含先前的选择值。

我想保持 self.text 计算函数的执行，直到 selectedTitleId.subscribe 函数完成，以便 self.selectedTitleId 具有当前值。

有人可以帮助我吗？感谢您的宝贵时间！

以下是用于将 selectedTitleId 值与 UI 绑定的 html 组件。后端 js 始终将“后端名称”显示为值，即使我尝试使用 self.selectedTitleId("newValue") 设置不同的值。 html:

      var sformat = (function() {
       var pattern = /\{\{|\}\}|\{(\d+)\}/g;
         return function () {
         var parameters = arguments;
         if(parameters[0]) {
           console.log(parameters[0])
           return parameters[0].replace(pattern, function (match, group) {
             var value;
              if (match === "{{")
                return "{";
              if (match === "}}")
                return "}";
             value = parameters[parseInt(group, 10) + 1];
             return value ? value.toString() : "";
            });
         }
       };
     });

       function test() {
         return sformat.apply(this, arguments);
       }

       self.selectedTitleId = ko.observable('');

       self.text = ko.computed(function () {
        console.log("inside text function")

        if (self.selectedTitleId && self.selectedQueryId()) {
          console.log(self.selectedTitleId)
          self.displayField = test(self.selectedTitleId, self.selectedQueryId(),self.queryValue());
        }else if(self.selectedTitleId && self.selectedQueryId() && self.queryGreaterValue() &&   self.queryLesserValue()){
          self.displayField = test(self.selectedTitleId, self.selectedQueryId(),self.queryValue(),self.queryGreaterValue(),self.queryLesserValue());
        }
     return self.displayField;
    });

    self.selectedQueryId.subscribe(function (newValue) {

        $.getJSON("json/queries.json", function (allData) {
            var mappedData = $.map(allData, function (item) {
                if(item.DisplayName == "Price"){
                    if(newValue == "range") {
                        self.selectedTitleId(item.RangeBackEndFieldName);
                        console.log("range");
                        console.log(item.RangeBackEndFieldName); //Prints new string
                        console.log(self.selectedTitleId()); //Print old value- 
                    }else if(newValue == "$gt:" || newValue == "$lt:"){
                        self.selectedTitleId(item.BackendFieldName);
                        });
                    }
                }
            });
        });
});

Answer 1

除非您没有告诉我们其他事情，否则selectedTitleId 成为ko.computed 是没有意义的。只需使用常规的 observable：

self.selectedTitleId = ko.observable();

self.selectedQueryId.subscribe(function (newValue) {

    $.getJSON("json/queries.json", function (allData) {
        var mappedData = $.map(allData, function (item) {
            if(item.DisplayName == "Price"){
                if(newValue == "range") {
                    self.selectedTitleId(item.RangeBackEndFieldName);
                    });
                }else if(newValue == "$gt:" || newValue == "$lt:"){
                    self.selectedTitleId(item.BackendFieldName);
                    });
                }
            }
        });
    });
});

现在当selectedTitleId 在您的回调中更改时，它应该会触发text 重新评估。

你原来的问题不在于它首先更新text，而是当你更改selectedTitleId时它没有重新评估。见这里：

if (self.selectedTitleId() && self.selectedQueryId()) {

这意味着您的computed 属性同时依赖于selectedTitleId 和selectedQueryId，更新其中任何一个都会导致函数再次运行。但是在您的原始代码中，您将 self.selectedTitleId 完全替换为一个全新的函数，但您的 computed 仍然依赖于旧函数（未更改）。