CODEWITHSUNDEEP
knockout.js
lostdorje
lostdorje

Reputation: 6460

why is setting observable in knockout.js not working

I'm trying to explicitly set a default value on some observables, but after setting them and checking their values they return undefined. What am I doing wrong?

Interestingly the selectedCustomerType is set as expected, however the other 2 variables, selectedPlatform and selectedPricing are null. What is my silly mistake?

HTML:

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <script src='static/javascript/jquery-1.9.1.js'></script>
  <script src='static/javascript/knockout-3.0.0.js'></script>
  <script src='static/javascript/merchant.js'></script>
</head>

<body>
  <div>
    <span id='customer_types' data-bind='foreach: availableCustomerTypes()'>
      <input data-bind='value: value, checked: $root.selectedCustomerType'>
      <span data-bind='text: label'></span>
    </span>
  </div>
  <div>
    <select id='merchant_platforms'
            data-bind='options: availablePlatforms(),
                       optionsText: "label",
                       optionsValue: "value",
                       value: selectedPlatform'>
    </select>
  </div>
  <div>
    <select id='merchant_pricings'
            data-bind='options: availablePricings(),
                       optionsText: "label",
                       optionsValue: "value",
                       value: selectedPricing'>
    </select>
  </div>
</body>
</html>

JS:

var MerchantModel = function() {
  var self = this;

  self.merchant = ko.observable();

  self.availableCustomerTypes = ko.observableArray([]);
  //    {'label': 'Red', 'value': 'R'},
  //    {'label': 'Blue', 'value': 'B'}
  //]);
  self.availablePlatforms = ko.observableArray([]);
  self.availablePricings = ko.observableArray([]);

  // was originally setting default values here, but this gets blown away after
  // ko.applyBindings() gets called in the $(document).ready() function below
  self.selectedCustomerType = ko.observable();
  self.selectedPlatform = ko.observable();
  self.selectedPricing = ko.observable();

  // load data
  self.load = function() {
    self.setDefaults();

    // load UI lookup lists asynchronously, etc...
  };

  self.setDefaults = function() {
    self.selectedCustomerType('R');   
    self.selectedPlatform('Tango');
    self.selectedPricing('Credit Plus');

    // calling self.selectedCustomerType() returns 'A' as expected
    // calling self.selectedPlatform() returns undefined?? Why?
    // calling self.selectedPricing() returns undefined?? Why?    
  };
}

// activate knockout.js
$(document).ready(function() {
  var merchantModel = new MerchantModel();
  ko.applyBindings(merchantModel);

  // load initial data via ajax (in this case just UI lookup lists, etc...)
  merchantModel.load();
});

Upvotes: 0

Views: 2057

Answers (1)

Dominictus
Dominictus

Reputation: 721

Dropdowns are empty. Value is set to something.

That is invalid and value will be adjusted automatically because it is not in the dropdown list. First item from dropdown list is being assigned to provided value variable. First item is undefined therefore your value becomes undefined.

Upvotes: 2

Related Questions