Knockout Mapping Observable not being "observed"?

Question

Here's my fiddle:

I'm trying to make the side editable if I click on the text. I'm following this example from the knockout site:

view:

<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasfocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>

script:

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function() { this.editing(true) }
}

ko.applyBindings(new PersonViewModel("Bert Bertington"));

http://knockoutjs.com/documentation/hasfocus-binding.html

When I click on the text of a "side", I hit the "edit" function, but the visibility of the divs doesn't change. I think this is a scoping issue but I don't know how to troubleshoot it.

Jacob Jacob · Accepted Answer · 2013-03-24T22:14:54

The issue is that the hasfocus binding is also tied to the editable observable. Removing this binding causes the visibility to update just fine. I'm guessing this means that Knockout is trying to set focus and failing, thus setting editable back to false.

Perhaps instead of using that binding, you could attach a blur event handler to the inputs instead, in which handler you would set editable to false.

Knockout Mapping Observable not being "observed"?

1 Answers