有条件地绑定只读[重复]答案

【问题标题】：Conditionally bind readonly [duplicate]有条件地绑定只读[重复]
【发布时间】：2014-05-20 16:31:06
【问题描述】：

这段代码几乎是正确的。我必须单击“设置服务器”按钮，然后进入 textarea > 进行更改 > 选项卡。然后只读生效。如何修复此代码，以便在单击按钮后只读立即生效？ Fiddle

HTML

<textarea readOnly="true" data-bind="value: text, readOnly: viewModel.text.isServerSet"  rows="5"  cols="20"></textarea> 

<input id="makeServerSet" type="button" value="Make server set" id="makeServerSet" />

JavaScript

  ko.bindingHandlers.readOnly = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            console.log('element: ' + element);
            console.log('made readonly: ' + value);
            element.setAttribute("readOnly", true); 
        }  else {
            console.log('removed readonly');
            element.removeAttribute("readOnly");
        }  
    }  
}

ko.extenders.isServerSet = function (target, value) {
            console.log('is server set...' + value);
            target.isServerSet = ko.observable(value);
            return target;
        };

var viewModel = {
    text: ko.observable("test").extend({
                isServerSet: false
            }),
    isServerSet: ko.observable('')
}; 

ko.applyBindings(viewModel);

$('#makeServerSet').click(function() {
    viewModel.text.isServerSet = true;
    console.log('made server set');
});

【问题讨论】：

viewModel.text.isServerSet = true; 应该是 viewModel.text.isServerSet(true); jsfiddle.net/94hYr

标签： javascript knockout.js

【解决方案1】：

在您的点击处理程序中，使用此设置您的 isServerSet

viewModel.text.isServerSet(true);（因为它是可观察的）

见updated fiddle

【讨论】：