Can binding with nested object: dom element attributes

#1

Hi everybody,

Similar to the topic I have posted here, I got some problem when I try to bind objects from the component to its viewModel.

Here is the example: JSBIN

When working with nested object and I try to bind it to a DOM element attribute (for instance the value of an input tag), I find I cannot bind it’s attributes directly but only using a computed prop declared in the viewModel. It is correct ?

So,

Having this:

var HomeViewModel = can.DefineMap.extend({
  "mainItem":{
    value:{
      "objList":[ {"listed": "item 1"}, 
                {"listed": "item 2"} ]
    }
  },
  "index":{
     value:0
  }
});

This will not work:
<input type="text" value="{{mainItem.objList[index].listed}}" />

I cannot figure out why, instead, using this strange “static notation” will work.
<input type="text" value="{{mainItem.objList.0.listed}}" />

Thank for helping!

#2

No help? :slight_frown:

#3

Use %index when iterating through a list.

#4

Thank you, I tried but in my example it doesn’t works.
I’m not iterating inside an {{#each}} block or something like that. I want to use as index the value of a property that that i store in the viewModel.
And as pointed out in the example, the syntax as use work in for the innerHTML but not inside the tags and components. Why? Do I miss something?

Thank a lot.

#5

value: should not be an object. The object would be shared by everything. Use a function that returns an object instead.

#6

Do you mean the value of the component (for instance the <input> ), or the default value assigned to the map property?
I did something like that using a compute (getter) for “filling” the value of the <input> and it works, but is it necessary to do this way every time I need to bind to a component attribute instead of showing the result in the HTML?