Question about bindings about overture HOT 4 CLOSED

You can bind from/to properties on any O.Object instance (most other objects, including O.View, inherit from O.Object so these are all valid targets). You can also bind to (but not from) properties on DOM nodes. For example, el('p', { text: O.bind(person, 'name') }); is creating a <p> dom node and then binding the text content to the name property on person. The trouble here is that person is not an instance of O.Object; it's just a plain object. So if you replace { id: 1, name: 'John'} with new O.Object({ id: 1, name: 'John'}), then it will work.

However, I don't think that's quite everything you were intending, as it still won't update if you change the contents of the people array; it will just update the text of the appropriate <p> if the name property changes on one of the items in the array.

An ObservableArray means you can observe when you add/remove elements to it. (It says nothing about whether each item in it is observable; they may be, but don't have to be.) The O.ListView class automatically hooks into this to very efficiently render a list of such objects and keep this updated as the list changes (you could also replace the O.ObservableArray with an O.LiveQuery or O.RemoteQuery if you want to start hooking into the powerful datastore; they all have the same interface).

You need to give O.ListView a O.View class (a class that extends O.View) to render each object. Since all we're doing is setting the text property, this is pretty common and there's already a class that handles this called O.LabelView. The ListView will automatically set the "content" property on each ItemView instance it creates, and O.LabelView automatically keeps the text value of its DOM node in sync with its value property. So if we just extend O.LabelView with the layer tag you wanted (<p>) and bind the value property to content.name, then I think it should do what you're looking for:

var MainView = new O.View({
  people : new O.ObservableArray([
    new O.Obejct({ id: 1, name: 'John'}),
    new O.Object({ id: 2, name: 'Claude'})
  ]),

  draw: function ( layer, Element, el ) {
    return el( 'div', [
      new O.ListView({
        content: this.get( 'people' ),
        ItemView: O.Class({
          Extends: O.LabelView,
          layerTag: 'p',
          value: O.bind( 'content.name' )
        })
      })
    ])
  }
})

new O.RootView(document).insertView(MainView)

from overture.

Thanks for the incredibly detailed explanation, how binding works is now very clear to me. Just one question that's tangentially related, do we have to always use a O.Object instance's set method to update an object's property or can we just use normal assignment. I'm asking this because, it seems like a bound html element sometimes updates correctly with normal assignment and sometimes it does not(but using set seems to always work).

from overture.

You should always use the get/set methods when dealing with O.Object (and anything inheriting from O.Object). Bindings, computed properties and observes will not work if you just do normal assignment.

from overture.

Okay, thanks again.

from overture.