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

我想在self.selectedQueryId更改时在knockoutjs中将不同的值设置为self.selectedTitleId（），因此我添加了对selectedQueryId的订阅。 我有另一个计算变量self.text，它将self.selectedTitleId与其他变量一起格式化

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

我的问题是，当我从UI更改selectedQueryId值时，首先调用computed函数，然后调用subscribe函数。因此，我试图显示的文本始终保持先前的选择值

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

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

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

有人能帮我吗？谢谢你的时间

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

下面是用于将selectedTitleId值与UI绑定的html组件。backend js始终将“backendName”显示为值，即使我尝试使用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);
                        });
                    }
                }
            });
        });
});

---

除非您没有告诉我们其他信息，否则将

selectedTitleId

作为

ko.computed

是没有意义的。只需使用一个常规的可观察：

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

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

重新计算

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

原始版本的问题不在于它首先更新了

文本

，而在于当您更改

selectedTitleId

时它没有重新评估。请看这里：

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

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

---

这意味着您的

computed

属性同时依赖于

selectedTitleId

和

selectedQueryId

，更新这两个属性都会导致函数再次运行。但是，在原始代码中，您使用了一个全新的函数完全替换了

self.selectedTitleId

，但是您的

computed

仍然依赖于旧函数（未更改）。

感谢您的解释。是的，你是对的。我试着让它成为一个函数，让sformat函数工作。sformat函数用于模拟java中的String.format函数，该函数用传递的参数替换给定字符串中的{0}{1}…。我尝试通过测试方法将self.selectedTitleId传递给此sformat，但我始终得到TypeError:parameters[0]。replace不是函数。当我尝试调试what is parameters[0]时，它给了我d（）。我想把字符串传递给test方法。如果我将self.selectedTitleId设置为函数，我就能够将self.selectedTitleId（）传递到测试方法中，并且格式工作正常..这就是我的问题..为了得到这个问题，我将selectedTitleId更改为导致计算函数问题的函数..@user3773712:您的可观察对象是一个函数（从功能上讲，它与

计算的

中的值几乎完全相同），因此要在可观察对象中传递值，只需调用该函数即可。因此

myfunction（self.selectedTitleId（））

将把你的可观测值传递给

myfunction

。就我所知，你应该能够像使用计算值一样使用可观测值。我刚刚编辑了我的问题。在制作self.selectedTitleId（“newValue”）后第行我尝试了几个console.log以查看self.selectedTitleId值是否发生了更改。但它根本没有更改。当我尝试ko.computed时，值发生了更改。仅用部分代码很难判断，但是您对

self.selectedTitleId

的定义在哪里？我还注意到您在

t中更改了
if
语句ext

computed。它仍然应该是

self.selectedTitleId（）

，因为

self.selectedTitleId

总是会返回一个函数（如果您这样做了，确实会使它成为一个可观察的函数），而且这总是真实的。

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