javascript - 禁用 knockout 中无法正常工作的功能

Question

如果字段已被删除，我需要禁用它们，但它无法正常工作。

我创建了一个 JSFiddle:https://jsfiddle.net/mdawood1991/fs1exz6q/

x马克应该删除该项目(禁用文本框)，但事实并非如此:

这是我的 View 模型:

var viewModel = {};

function QuoteViewModel() {
    var self = this;
    self.Quantity = ko.observable();
    self.Price = ko.observable();
    self.Total = ko.computed(function () {
        return this.Price() * this.Quantity();
    }, this);
    self.isDeleted = ko.observable(false);


    self.remove = function (item) {
        console.log('A');
        item.isDeleted = ko.observable(true);
        console.log(item.isDeleted());
    }
};

viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);

这是相关的 HTML:

<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price Type</label>
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Quantity</label>
        <input type="text" class="form-control" data-bind="numeric: Quantity, value: Quantity, valueUpdate: 'afterkeydown', disable: !isDeleted()" />
        <!--numeric: number, value: number, valueUpdate: 'afterkeydown'-->
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="numeric: Price, value: Price, valueUpdate: 'afterkeydown'" />
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="control-label">Total</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="textInput: Total" />
        </div>
    </div>
</div>
<div class="col-md-1"> <span class="glyphicon glyphicon-remove" data-bind="click: remove"></span>

</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

当我单击“x”时，它会将 isDeleted 属性更新为 TRUE ，但它没有在我的 HTML ( <pre> <p> ) 标签中更新。

它应该如何工作:

 1. When isDeleted == true (Disable fields) 
 2. When isDeleted == false (Enable)

Answer 1

Setting an observable goes by invoking it as a function 。而不是:

item.isDeleted = ko.observable(true);

用途:

item.isDeleted(true);

参见this fiddle进行演示。