Knockout计算在页面加载时执行

Question

Basically i have a drop down on selecting which there will be another drop down loaded. I have a computed variable depending on first drop down selected value(I know it can be subscribed,but still). But the computed is executed on page load which i dont want due to an AJAX call inside. 'What is the reason for the execution on page load and how to avoid that?

HTML:

<div>
  <select id="selectmenu1" data-bind="options: departments, 
             optionsValue: 'id', 
             optionsText: 'name', 
             optionsCaption: 'Choose...',value: selectedDept">
  </select>
  <select id="selectmenu1" data-bind="options: contacts, 
             optionsValue: 'id', 
             optionsText: 'name', 
             optionsCaption: 'Choose...'">
  </select>
</div>

And JS

// Here's my data model
var ViewModel = function(first, last) {
  var self = this;
  var deptArray = [];
  var deptObj = {
    id: "8888",
    name: "Electrical"
  };
  deptArray[0] = deptObj;
  deptObj = {
    id: "9999",
    name: "Admin"
  };
  deptArray[1] = deptObj;
  self.departments = ko.observableArray(deptArray);
  self.selectedDept = ko.observable();
  self.contacts = ko.observableArray();
  self.contactsRetrieve = ko.computed(function() {
    var deptId = self.selectedDept();
    console.log("entered");
    $.ajax({
      url: '/echo/js',
      complete: function(response) {
        console.log("success");
        var contactArray = [];
        var contactObj = {};
        if (deptId == '8888') {
          contactObj.id = '1234';
          contactObj.name = 'Vivek';
        } else if (deptId == '9999') {
          contactObj.id = '5678';
          contactObj.name = 'Sree';
        }
        contactArray[0] = contactObj;
        self.contacts(contactArray);
      }
    });
    console.log("exited");
  });
};

ko.applyBindings(new ViewModel());

https://jsfiddle.net/jtjozkax/37/

Answer 1

As far as I know, it is not the page load itself that causes this behavior, but the fact that computed observables rely on other observables, in your case, self.selectedDept . Knockout discovers which other observables the computed relies on, and it is actually the change of value of selectedDept what causes the computed to be recomputed.

You cannot avoid this behavior, but you can avoid the execution of the AJAX call by adding a guarding condition (read: if statement). I assume your goal is to prevent the AJAX-call if nothing is selected in the dropdown, and, afterall, this is the most straightforward way to accomplish just that.

There is no other way around it, simply because if you think about it, the whole purpose of a computed is to reevalue itself whenever any other observable it depends on changes, without manual intervention.

Answer 2

if(!self.selectedDept()){return}

Using this if statement to cancel functionality within the computed if there is no selected option.

https://jsfiddle.net/jtjozkax/38/