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

Its not elegant, but one way to do this is to use the onItemRendered property of the lists assistant.

The function assigned is passed the list widget, item model and the item node. In this handler, you can then find your toggle widget inside the item node, and attach your functionality.

Something like this :

onItemRendered: function(listWidget, itemModel, itemNode){
    var item = itemNode.select('div.mywidget').first();
    Mojo.Event.listen(item, Mojo.Event.tap, this.handleTap.bind(this));
}.bind(this)

There are some examples of how to use onItemRendered in the source code for the built in applications. The Tasks app for example, does this to cancel the ability to delete "special" items.

Answer 2

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;
}