KnockoutJS json object/observable "visible" binding not working

Question

I am trying to configure a rather complex model to bind a view to using KnockoutJS.

Here is a problem markup section:

<input type="text" data-bind="visible: dialogSelectedCode.HasValue, value: dialogSelectedCodeValue"/>
<span data-bind="text: ko.toJSON(dialogSelectedCode)"></span>

input element is never shown, but my "debug" span shows the contents

{"Code":"{intInc_G}","HasValue":true}

What is the correct way to bind a visible of my input in case the "decision"-data is hidden inside JSON object?

UPDATE: Here is a rather complex fiddle of the problem. To get to the problem dialog, run the fiddle, click "Add block" and try choosing several items in the drop down input (especially first and the second one - since they clearly show that dialogSelectedCode variable is indeed being updated.

Could you please supply some more code (i.e. ViewModel definition) — mreyeros
– mreyeros, Commented Jul 31, 2012 at 19:58
It is enormous by now. I will figure out a fiddle to showcase the problem in a few minutes =) — Maxim V. Pavlov
– Maxim V. Pavlov, Commented Jul 31, 2012 at 20:00
@MaximV.Pavlov It needs to be observable for the visisble property to update when it changes. Putting it in JSON will not work. — Kyeotic
– Kyeotic, Commented Jul 31, 2012 at 20:02
I've updated the question body to include the fiddle that can showcase the problem. Thanks in advance for looking at it. — Maxim V. Pavlov
– Maxim V. Pavlov, Commented Jul 31, 2012 at 20:19
@MaximV.Pavlov That fiddle is insane. My previous comment stands, it won't update because HasValue is not observable. — Kyeotic
– Kyeotic, Commented Jul 31, 2012 at 20:50

Jason Goemaat · Accepted Answer · 2012-07-31 22:25:47Z

2

I think you need to create a computed for the HasValue property. Your binding dialogSelectedCode.HasValue does not follow the observable, it checks for the HasValue on the observable function. The property way dialogSelectedCode().HasValue throws an error. Creating a computable and letting it do the tests works:

self.dialogSelectedCodeHasValue = ko.computed(function() {
    var selectedCode  = ko.utils.unwrapObservable(self.dialogSelectedCode);
    return selectedCode && selectedCode.HasValue;
});

answered Jul 31, 2012 at 22:25

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maxim V. Pavlov Over a year ago

Thanks Jason. My understanding was that it would work the way I set it up, since even though .HasValue wasn't an observable, dialogSelectedCode was indeed, and that entire value was actually changing every time drop box item is selected. Now I know it doesn't work that way.

Collectives™ on Stack Overflow

KnockoutJS json object/observable "visible" binding not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related