How dynamically fetch button event from scrollview

[Gulle]

hi, 

I wonder how you link an onclick event to a button which you dynamically add to a scrollview UI element.

I don't succeed in grabbing the handler of the original button or any value from the original list item.

Who can help me with that?

<!-- Define a reusable tile -->
 <symbol id="tile" focusable="false" pointer-events="visible" system-events="all">
 ...
 
 <!-- toggle button OFF -->
 <use id="btn-off" href="#square-button-toggle" y="170" value="0" font-size="0" fill="black" fill="fb-light-gray">
 <set href="#text" attributeName="text-buffer" to="" />
 <set href="#text" attributeName="font-size" to="0" />
 <set href="#text" attributeName="fill" to="fb-black" />
 </use>
 <!-- toggle button ON -->
 <use id="btn-on" href="#square-button-toggle" y="170" value="1" font-size="0" fill="black" x="50%" fill="fb-yellow">
 <set href="#text" attributeName="text-buffer" to="" />
 <set href="#text" attributeName="font-size" to="0" />
 <set href="#text" attributeName="fill" to="fb-black" />
 </use>
 </symbol>


<use id="list" href="#scrollview">
<use id="list-0" href="#scrollview-item">
<use href="#tile" />
</use>
<use id="list-1" href="#scrollview-item">
<use href="#tile" />
</use>
</use>

javascript

PeredreefUI.prototype.updateList = function(nikobus) {
  for (let i = 0; i < nikobus.length; i++) {
    const nbItem = nikobus[i];
    var tile = this.tiles[i];

    tile.getElementById("lamp").image = nbItem[3] ? "on.png" : "off.png";
    tile.getElementById("btn-off").value = nbItem[3] ? 0 : 1;
    
    tile.getElementById("btn-off").onclick = function(evt) {
      console.log("click " + JSON.stringify(evt));
    }
    tile.getElementById("btn-on").onclick = function(evt) {
      console.log("click " + JSON.stringify(evt));
    }
  }
}

thx

Gulle

[SunsetRunner]

We are still awaiting Fitbit to document the virtual tile list api that has been used in their applications........ 

[SunsetRunner]

@JonFitbit

Apologies for the tug: Can you find some code examples for @Gulle's request above and other threads, as you did yesterday for the panorama and tumbler views. This would give us all something to move forward with whilst the documentation follows.

TIA

[Gulle]

thx @SunsetRunner for the follow-up

Hope somebody can guide me in the right direction.

[Gulle]

hi,

Is there an update of the documentation in the meantime?

thx

Koen

[JonFitbit]

Here's an untested example:

let tiles = document.getElementById('tile');
let NUM_ELEMS = 200;

tiles.delegate = {
  getTileInfo : function(index) { 
    return { type : "page-pool", page : index, };
  },
  configureTile : function(tile, info) {
    tile.getElementById("btn-off").onclick = function(evt) {
      console.log("click " + JSON.stringify(evt));
    }
    tile.getElementById("btn-on").onclick = function(evt) {
      console.log("click " + JSON.stringify(evt));
    }
    tile.info = info;
  },
};
tiles.length = NUM_PAGES;