List Widget With Checkbox Example

From WebOS101

my-scene.html:

<div class="palm-group">
		<div class="palm-group-title" x-mojo-loc='' id='listTitle'>List with Checkboxes</div>
		<div class="palm-list">
			<div class="palm-row last">
				<div class="palm-row-wrapper">
					<div x-mojo-element="List" id="mylist"></div>
				</div>
			</div>
		</div>
	</div>

listRowTemplate.html:

<div class='palm-row' x-mojo-touch-feedback='momentary'>
	<div class='palm-row-wrapper'>
		<div name='mycheckbox' x-mojo-element='CheckBox' class='right'></div>
		<div class='title truncating-text'>#{other} </div>	
	</div>
</div>

my-assistant.js:

MyAssistant.prototype.setup = function() {
 
   this.myCheckboxAttribs = {
        modelProperty: 'checked',
        // more attribs here...
   }
 
   this.myListAttribs = {
        // list attribs here...
   }
 
   this.myListModel = {
        items: [{checked: true, other: 'whatever'}, {checked: false, other: 'whatever2'},
           ..., {checked: true, other: 'whatever3'}]         //may need to use loop to set values
        //more model values here...
   }
 
    this.controller.setupWidget('mylist', this.myListAttribs, this.myListModel);
    this.controller.setupWidget('mycheckbox', this.myCheckboxAttribs);
}
 
MyAssistant.prototype.activate = function() {
 
    this.handleListSubWidgetChanges = this.handleListWidgetChanges.bindAsEventListener(this);
 
    // In order to hear the checkbox event changes, this must be listened to
    this.controller.listen(this.controller.get("mylist"), Mojo.Event.listChange, this.handleListSubWidgetChanges);
    // This is the event that the checkbox sends when it changes state, but we listen on the list
    this.controller.listen(this.controller.get("mylist"), Mojo.Event.propertyChange, this.handleListSubWidgetChanges);\
}
 
MyAssistant.prototype.handleListWidgetChanges = function(event){
    // Handle the property change of the checkbox
    // event.model is the item that the checkbox is using as its model
}