How assign undefined value in a knockout JS variable?

Question

I have 2 dropdownlists and one list of result with a binding using computed observable function something like this:

     self.Records = ko.computed(function() {
                    if (self.dropdown1 !== undefined) {
 ...
                        return Collection[0];
                    }

                    if (self.dropdown2() != undefined) {
                     ...
                        return Collection[0];
                    }
                });

But my problem is that I need to set in undefined the value on self.dropdown1 when I change the valie of the dropdownlist2, for my Collection of records can change.

I'm changing the value of the first dropdown with jquery like this:

  $('#reportTypeSelection').prop('selectedIndex', 0);

But the binding is not refreshing. Any advices please.

self.dropdown1 should be self.dropdown1().. also you should be setting your dropdown value with knockout observables.. not using jquery — Sherman, Jun 10 '16 at 18:27

score 2 · Accepted Answer · answered Jun 12 '16 at 17:39

I think you should not be using jQuery to code that logic. Here is an example of how this can be done in a view model with view not knowing anything about the logic.

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

  self.items = ko.observableArray(["Item1", "Item2", "Item3"]);

  self.dropdown1 = ko.observable();
  self.dropdown2 = ko.observable();

  self.dropdown1.subscribe(function(newValue) {
    if (newValue) {
      self.dropdown2(null);
    }
  });

  self.dropdown2.subscribe(function(newValue) {
    if (newValue) {
      self.dropdown1(null);
    }
  });
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options:items, optionsCaption:'Select first item',value: dropdown1"></select>

<select data-bind="options:items, optionsCaption:'Select second item',value: dropdown2"></select>

I think you should really be giving some credit to @luiz-augusto-volpi-nascimento here, your answer is really just a slightly performance-improved version of his. — awj, Jun 13 '16 at 08:28
Sure thing! @luiz-augusto-volpi-nascimento version works fine, but I don't agree my version is a perf improvement. The difference is that I don't use a DOM event to drive the logic. The view does not know anything about the code executed when the selection changes. This is the main idea behind MVVM. — Maciej Grzyb, Jun 13 '16 at 11:17

score 1 · Answer 2 · answered Jun 10 '16 at 19:56

You could put more code to help us to understand what are you doing. I'm assuming that you want to change the value of dropdown1 when you change the dropdown2. If I'm right, you could use change event to do that.

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

  self.data = ko.observableArray(["Dog", "Cat", "Bird"]);

  self.dropdown1 = ko.observable(undefined);
  self.dropdown2 = ko.observable(undefined);

  self.changeDropDownValue = function(index) {
    if (index == 1)
      self.dropdown2(undefined);
    else
      self.dropdown1(undefined);
  }
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options:data, optionsCaption:'Select a pet...',value: $root.dropdown1, event:{change:$root.changeDropDownValue(1)}" ></select>
<select data-bind="options:data, optionsCaption:'Select a pet...',value: $root.dropdown2, event:{change:$root.changeDropDownValue(2)}" ></select>

score 0 · Answer 3 · answered Jul 16 '19 at 22:04

The OP question was: "How to assign undefined value to a knockout JS variable?". The other answers I read here do not explicitly answer that question.

I think it might have been true in the past that someObservable(undefined) would do exactly the same as someObservable(), returning the observable value that is. However in recent Knockout versions (tested on 3.4.2) that syntax does work to reset on observable value.

See for yourself by running this script.

let x = ko.observable();
console.log(x());
x(1);
console.log(x());
x(undefined);
console.log(x());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

How assign undefined value in a knockout JS variable?

3 Answers3