knockout.js - does not update display style of div tag

Question

I have a div that would need to pop-up when an outside button is pressed.

div id="Screen5" class="grid-item modalBox" data-bind="style: { display: Display() }"

Display is a computed observable in the script updated when a subscriber function updates and observable.

    self.Screen5Visible = ko.observable(false);
    self.Display = ko.computed(function () {
        if (self.Screen5Visible() == false) {
            alert("here1");
            return 'none';
        } else {
            alert("here2");
            return 'block';
        }
    });
    Screen5shouter.subscribe(function (newValue) {
        alert("subscriber" + newValue);
        self.Screen5Visible(newValue);
    }, self, "change");
    self.Hide = function() {
        self.Screen5Visible(false);
    };

The Screen5shouter successfully gets true when called from outside viewmodel. I get to "here2" and supposedly return 'block' with computable. However the binding does not seem to work like this.

Regular javascript would work with getElementId. Also the hide function, which is data-bound on an image in div successfully updates the Display() binding, the div does recieve a 'none' value.

Thank you for help.

Have you considered using knockoutjs.com/documentation/visible-binding.html instead? This essentially uses the display styling attribute. — Koshux

Koshux Koshux · Accepted Answer · 2018-05-29T22:34:50

So I got a working example for you using the visible binding. Hopefully this will help you achieve what you initially intended.

function Screen5 () {
  this.Screen5Visible = ko.observable(false);

  var self = this
  this.show = function () {
    self.Screen5Visible(true)
  }
  
  this.hide = function() {
    self.Screen5Visible(false);
  }
}

ko.applyBindings(Screen5)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="Screen5" class="grid-item modalBox" data-bind="visible: Screen5Visible">
    screen 5
</div>
<div id="Screen6" class="grid-item modalBox">
  screen 6
</div>
<button data-bind="click: show">
  Show Screen 5
</button>

<button data-bind="click: hide">
  Hide Screen 5
</button>

knockout.js - does not update display style of div tag

div id="Screen5" class="grid-item modalBox" data-bind="style: { display: Display() }"

2 Answers