javascript - Knockout.js - 不更新 div 标签的显示样式

Question

我有一个 div，需要在按下外部按钮时弹出。

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

显示是在订阅者函数更新和可观察时更新的脚本中计算的可观察。

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

从外部 View 模型调用时，Screen5shouter 成功变为 true。我到达“here2”并据说返回带有可计算的“ block ”。然而，绑定(bind)似乎不是这样工作的。

常规 JavaScript 可以与 getElementId 一起使用。此外，隐藏函数(在 div 中的图像上进行数据绑定(bind))成功更新了 Display() 绑定(bind)，div 确实收到了“无”值。

感谢您的帮助。

Answer 1

所以我为您提供了一个使用可见绑定(bind)的工作示例。希望这将帮助您实现最初的预期。

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>