Does bidirectional binding of <input> to nested observable work?

[sfran...@gmail.com]

Hi.  New to KO, but love it so far.  You've all probably solved this and answered this question a million times, but I can't find the answer nonetheless...

I have a "criteria" observable object within which there is a "search" observable string.  And, I have an <input data-bind="value: crit.search"> element in my view.  The input field does not populate with the observable's defaulted value, but it is accurately handled upon data entry and form submit.  However, if I do <input data-bind="value: crit().search">, the situation is opposite in that the default value is rendered but field value manipulation does not get applied to the observable model.

Working example:

http://jsfiddle.net/KMnMX/

Thanks!

SF

[Patrick Steele]

You bind to the observable (and "crit" is an observable so you need to call it using parens):

<input data-bind="value: crit().search" /><button type="submit">Go!</button>

but when you want the *value* of the observable, you need to call it (since it is a function):

alert("Would fetch with search value = "+ self.crit().search());

---
Patrick Steele
http://weblogs.asp.net/psteele

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[sfran...@gmail.com]

Great, that works!

Why do I need the perens on the handler side pathing with your value fix?  Seems unconnected from the view-side code and non-peren pathing worked with my orig approach.  

[Michael Best]

That's because observables are functions, and in JavaScript, functions are just another kind of object. Thus they can also have properties. So when you access crit.search, you're accessing the search property of the crit observable itself. Initially there's nothing there, but once you enter something in the field, Knockout writes the value into crit.search.

-- Michael

[Steve Francolla]

Sure, I've got oodles of javascript experience and your explanation makes total sense for the value attribute in the view.  However, I'm asking why I need to have perens in the pathing of my behavior handler (the form submit handler function) when using Patrick's solution whereas my working handler function didn't require it with my original erroneous value bind (sans the perens).

[Michael Best]

They both have to match. If you have crit().search in one place, you need to have crit().search in the other. Because search is also an observable, you need crit().search() in your submit function. You don't need those in the value binding because it unwraps the observable within the binding.

When you had crit.search, it didn't actually involve any observables, and the value binding simply updated the value with crit.search = newvalue.

-- Michael

[Steve Francolla]

Hey Michael -- Logical explanation.  Thanks!  

What a great community you all have here -- one of the reasons we chose to use KO.