Results 1 to 4 of 4
  1. DrewPre's Avatar
    Posts
    818 Posts
    Global Posts
    829 Global Posts
       #1  
    I am trying to figure out the onItemRendered attribute property but could use some help

    I have instantiated the list widget and the list renderes fine ...I am now trying to use...

    onItemRendered: this.blue(),

    ....in the list Model.
    The this.blue function is below...

    Code:
    MainAssistant.prototype.blue = function(item){
        $('itemDivID').className = "blue";
    };
    itemDivID is the div ID of the DIV tag wrapping the items in the itemtemplate.

    Trying to set the classname with the color blue, like in the above code, is returning, "Cannot set property 'className' of null".

    Am I barking up the wrong tree? Is there an easier way?

    Palm Pre Backup Utility...done!
    Locate Pre....done!
  2. #2  
    Ah. I see the problem. Try this:
    Code:
     ... onItemRendered: this.blue.bind(this) ...
    
    MainAssistant.prototype.blue = function(listWidget, itemModel, itemNode) {
        itemNode.className = "blue";
    }
    FWIW, this is why I always use Ares for text debugging. In debug mode, you can just type ANY string, and get a response -- which helps to avoid those pesky "x is not an object" errors that you get sometimes with as loose a language as javascript.
    Doug Meerschaert
    NoInsultSoftware.com

    Apps: Scratch, GasMath, CheckMath
  3. DrewPre's Avatar
    Posts
    818 Posts
    Global Posts
    829 Global Posts
       #3  
    Thanks for the response.

    I think it's working.

    I see activity in the log for each item in the list...

    I think my problem is addressing the correct DIV ID. itemNode.className = "blue";

    The Main scene has a class name. The list has an ID. The container has a classname and then the item.html has a classname. Not sure what I should put instead of itemNode

    The CSS file has...

    Code:
    .blue {
         color: #9AC9F2;
    }

    Palm Pre Backup Utility...done!
    Locate Pre....done!
  4. DrewPre's Avatar
    Posts
    818 Posts
    Global Posts
    829 Global Posts
       #4  
    UPDATED:
    Code:
    onItemRendered: this.blue,
    I took the 'bind(this)' off the onItemRendered and the following started working


    Code:
    	if (listModel.key3 == value3) {
    		itemNode.className = "blue";
    	}
    The code looks like this....

    itemTemplate.html
    Code:
    <div id="obJSON">
        <table>
            <tr><td>#{key1}</td><td>#{key2}</td><td>#{key3}</td></tr>
        </table>
    </div>

    ...and the main-assistant....


    main-assistant.jsjsjs
    Code:
    MainAsistant.prototype.setup = function () {
    this.listModel = {items: [
                     {key1:value1, key2:value2, key3:value3},
                     {key1:value1, key2:value2, key3:value3},
                     {key1:value1, key2:value2, key3:value3} ]}
    
    this.listAtts = {
    		itemTemplate: 'list/itemTemplate',
    		listTemplate: 'list/itemContainer',
    		onItemRendered: this.blue,
    		swipeToDelete: true };
    
    this.controller.setupWidget("objJSON_List", this.listAtts, this.listModel);
    };
    
    MainAssistant.prototype.blue = function(listWidget, listModel, itemNode)  {
       if (listModel.key3 == value3) {
           $('obJSON').className = "blue"; // <- produces first item in list, blue.
       }
    };
    So removing the "bind(this)" seemed to work in this instance... as with most things in Javascript[or any other language]...I'm just going with it and I'll understand it later.

    PS-using Mojo.Log.info(Object.Inspect(itemNode)) helped figure some of it out.
    Last edited by DrewPre; 06/27/2010 at 10:45 PM.

    Palm Pre Backup Utility...done!
    Locate Pre....done!

Posting Permissions