How to create toggle buttons within a dynamically rendered list

Question

For my palm pre app I have a dynamically generated list (pulling in data from SQLite, loading into the model, binding). This works fine, but now I need to add an on/off toggle to each of the dynamically generated items. Including the toggle switch in the template works, but I can't assign the widget functionality properly. I'm trying to bind the widget in the scene, but no luck so far.

So does anyone know of any webOS tutorials (or have an example) of how to bind widgets within a dynamic list?

Answer 1

Got an answer from the Palm Dev's themselves:

If you use the .value property of a toggle button to set it's state, you don't to call setupWidget on the toggle button at all. Instead, bind a .value property to each list item model. Here's the steps:

1. In the list-item.html template:

<div class='palm-row'>
    <div class='palm-row-wrapper'>
        <div x-mojo-element="ToggleButton"></div>
        #{title}
    </div>
</div>

2. In the list-assistant.js setup function (note, I'm using jQuery)

Mojo.Event.listen(jQuery("#my-list").get(0), Mojo.Event.propertyChange, this.listPropertyChangeHandler.bind(this));

3. In the listPropertyChangeHandler

ListAssistant.prototype.listPropertyChangeHandler = function(event){
    var newValue = event.model.value;
}