javascript - inline with binding with an observable array -

i have model property defined follows:

function field(name, size, type){     this.name = ko.observable(name);     this.size = ko.observable(size);     this.type = ko.observable(type);     this.map = ko.observable(); } 

i have observable array (fields) defined array of above object. on ui interaction map property of field object associated object. header object properties headername , index.

i trying bind fields follows:

<ul data-bind="foreach: fields">     <li class="form-inline">         <span data-bind="text:name"></span> ->          <span data-bind="text: map.headername"></span>     </li> </ul> 

but unsuccessful: http://jsfiddle.net/deostroll/sena8/2/

tried follows:

<ul data-bind="foreach: fields">     <li class="form-inline">         <span data-bind="text:name"></span> ->          <span data-bind="with: map"><span data-bind="headername"></span></span>     </li> </ul> 

still doesn't work. http://jsfiddle.net/deostroll/sena8/3/

you can solve without using with binding

<span data-bind="text: map() && map().headername"></span> 

note need () after map value , using map() && make sure expression won't evaluated unless map set value.

demo jsfiddle.

of course using with binding more elegant , proper solution handling these use cases, , you've made it, you've forgotten text in inner binding expression:

<span data-bind="with: map"><span data-bind="text: headername"></span></span> 

demo jsfiddle.