视图不更新 - 缺少 css 类

Posted 2023-03-27

【中文标题】视图不更新 - 缺少 css 类

【英文标题】：view does not update - css class missing

【发布时间】：2021-03-26 00:36:15

【问题描述】：

当我按下“更新”按钮时，我会看到具有正确值（真/假）的警报，但不会应用“完成”类。 为什么视图不更新？

<div data-bind="foreach: steps">
    <div data-bind="css: done: complete">
        <span data-bind="text: name"></span>
        <button data-bind="click: updateStatus">Update</button>
    </div>
</div>

var viewModel = function() 
    var self = this;
    self.steps = ko.observableArray();

    loadTestData(testDataSteps);
    function loadTestData(stepsArray) 
        $.each( stepsArray, function( index, value )
            self.steps.push(new Step(value.id, value.name, value.step))
        );
    


var Step = function (id, name, step)
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.step = ko.observable(step);
    self.complete = ko.observable(false);

    self.updateStatus = function () 
        if(self.complete === true) 
            alert("true")
            self.complete = false;
        else 
            alert("false")
            self.complete = true;
        
    ;
;

【参考方案1】：

更改 getter 和 setter 方法。

var Step = function (id, name, step)
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.step = ko.observable(step);
    self.complete = ko.observable(false);

    self.updateStatus = function () 
        if(self.complete() === true)  //getter
            alert("true")
            self.complete(false); //setter
        else 
            alert("false")
            self.complete(true); //setter
        
    ;


var viewModel = function() 
    var self = this;
    self.steps = ko.observableArray();
    self.steps.push(new Step('ID', 'TEST', 'TEST'));
    return self;

ko.applyBindings(new viewModel());

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

<div data-bind="foreach: steps">
    <div data-bind="css: done: complete">
        <span data-bind="text: name"></span>
        <button data-bind="click: updateStatus">Update</button>
    </div>
</div>