Conditionally bind readonly

Question

This code is almost correct. I have to click the button "make server set" and then go into the textarea > make a change > tab out. Then the readonly takes effect. How can I fix this code so that readonly takes effect immediately after I click the button? 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;` should be `viewModel.text.isServerSet(true);` http://jsfiddle.net/94hYr/ — nemesv, May 20 '14 at 17:14

score 1 · Accepted Answer · answered May 20 '14 at 17:14

1

In your click handler, set your isServerSet with this

viewModel.text.isServerSet(true); (because it is an observable)

See updated fiddle

answered May 20 '14 at 17:14

rwisch45

3,692
2
25
36

Conditionally bind readonly

1 Answers1