Knockout JS binding to an array element inside an observable object according to some condition

Question

I want to bind my text input value

<input type="text" id="2" data-bind="value :  ??whatToWriteHere??    ">

to the second object's name property in the following observable object ( where input.id == object.id )

myObject = {
    myArray : [ { id:1, name:'one' },{ id:2, name:'two' },{ id:3, name:'three' } ]
},
myObservableObject = ko.observable(myObject);

With what expression I should replace ??whatToWriteHere??

Edited: actually the array is not necesserily be inside another object

 myArray : [ { id:1, name:'one' },{ id:2, name:'two' },{ id:3, name:'three' } ]
 myObservableArray = ko.observableArray(myArray);

Ingro · Accepted Answer · 2012-07-05 09:07:59Z

2

I've a solution based on ko.mapping plugin and a custom binding created for your purpose.

You can see a working fiddle here:

http://jsfiddle.net/ingro/MhdZp/

The whole idea is to map your observableArray and then retrieve the one tied to your input id with the mappedIndexOf function of the mapping plugin.

answered Jul 5, 2012 at 9:07

Ingro

2,8415 gold badges29 silver badges42 bronze badges

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

Comments

Tom W Hall · Accepted Answer · 2012-07-05 08:38:55Z

0

It depends what the data context of the input is. If the objects within myObservableArray are being bound to templated input elements, then the binding would be "value: name". Are you using a foreach? Or is there only one input element here which you explicitly want to bind to that second array element, where myObservableArray is just declared somewhere in the page? If so, it'd be "value: myObservableArray()[1].name".

edited Jul 5, 2012 at 8:38

answered Jul 5, 2012 at 8:27

Tom W Hall

5,2834 gold badges32 silver badges35 bronze badges

3 Comments

nilgun Over a year ago

I have like 10(this number can change dynamically, independent of myArray) input elements, and myArray may have 0-10 items in it(this number is also dynamic). I am not using foreach, even if I have used it would not depend on my array. I want to match my input elements with the items in the array based on input elements id attribute and array items id property.

Tom W Hall Over a year ago

Are the inputs and their IDs being generated server side? If so can you not use whatever view logic you use to generate id="2" to plug that 2 (minus 1 to get the array index) into the binding? E.g. "value: myObservableArray()[2 - 1] where 2 is generated with whatever server side view syntax you're using. Do I understand it correctly?

nilgun Over a year ago

Actually the case is like this. Suppose I have a list all brands of cars available in a store(say 10), and there is an input element for each brand whose id s are equal to their matching brand id. And I have customer who has a few cars (say 3) and I am trying to write the payment of the customer inside these input elements. so the id s are brand ids. I use web services to fetch data and dynamically build page using JQUery.

Collectives™ on Stack Overflow

Knockout JS binding to an array element inside an observable object according to some condition

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related