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

从外部viewmodel调用时，Screen5shouter成功实现为true。 我到达“ here2”，并以可计算的方式返回“ block”。 但是，绑定似乎无法像这样工作。

常规javascript可以与getElementId一起使用。 同样，在div中的图像上进行数据绑定的hide函数成功更新了Display（）绑定，div确实收到了“无”值。

谢谢你的帮助。

Answer 1

因此，我为您提供了使用可见绑定的有效示例。 希望这将帮助您实现最初的目标。

 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> 

Answer 2

我认为您的问题出在display: Display() ，更具体地说是Display() 。 淘汰赛正在评估渲染上的功能，然后使用它来完成。 从那时起，它不再是可观察的。 我认为它需要display: Display剔除display: Display以订阅Display属性，以产生您想要的效果。

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

至
<div id="Screen5" class="grid-item modalBox" data-bind="style: { display: Display}"></div>