ionic-views Tile Views

[danisaiz14]

Hi, I'm doing an app with the ionic-views scheme. I wanted to add a tile list on a screen but in this example everything is defined inside the class and uses jQuery. Does anyone know how to include this in the class. Maybe in onMount or onRender. I used the example provided in the fitbit webpage. It's very important cause I need it for a university project. Thank you!!

<svg>
  <defs>
    <symbol id="my-tile-item" href="#tile-list-item" focusable="false"
            pointer-events="none" system-events="all">
      <text id="text" />
      <rect id="tile-divider-bottom" class="tile-divider-bottom" />
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%"
            height="100%-2" opacity="0" />
    </symbol>
  </defs>
  <use id="my-list" href="#tile-list">
    <var id="separator-height-bottom" value="2" />
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 1" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 2" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 3" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 4" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 5" />
    </use>
  </use>
</svg>

import document from "document";

let list = document.getElementById("my-list");
let items = list.getElementsByClassName("tile-list-item");

items.forEach((element, index) => {
  let touch = element.getElementById("touch-me");
  touch.onclick = (evt) => {
    console.log(`touched: ${index}`);
  }
});

[JonFitbit]

It should be possible.

You'll need the imports in your resources/widgets.gui, as mentioned in the tile list guide.

You can put the gui code you pasted into the gui file of your "view".

Then you can perform your javascript in the /app code for your "view".

Take a look at Alpine Snow as an example. it doesn't use tile-list specifically, but the combo button usage in the "exercise" view should give you a good idea. https://github.com/orviwan/alpine-snow/