Question

We have a simple template which switches between editable and not editable. Basically it just hides input field and shows a span, or the other way around.

<script type="text/html" id="inputTextTemplate">
    <input type="text" data-bind="value: field, visible: $data.isEdit" />
    <span data-bind="text: field, visible: !$data.isEdit"></span>
</script>

We also have some styles which we apply through JQuery, but the problem is that every time the template switches from editable and not editable it is re-rendered and those styles are gone.

Here is a jsFiddle of the problem.

http://jsfiddle.net/uCWx4/4/

Why is this happening? How can we fix this so the template is rendered only once?

Answer 1

It looks like the problem is that I was sending it a value, not an observable. If I make an observable or computed, then template is rendered only once.
So before the call to template was

isEdit: isEdit() == 'true'

if I create a computed

this.isEditable = ko.computed(function(){
    return self.isEdit() == 'true';
});

and call it with

isEdit: isEditable

it works as expected.

http://jsfiddle.net/uCWx4/8/