Can I Use ListView with Plain JavaScript?

Problem description

I want to know if I can use ListView https://docs.tabris.com/3.3/api/ListView.html with plain JavaScript

Expected behavior

Be able to use ListView with plain JS.

Environment

• Tabris.js version: 3.5
• Device: Android emulator, iOS simulator
• OS: iOS 13.4, Android 5

Code snippet

new ListView({items:[]});

[tbuschto]

There are examples with updating arrays, but they are all using data binding and won’t work in plain JS.

Here is an example that adds items to a plain array on items selection that should work in plain JS:

const {contentView, TextView} = require('tabris');
const {Cell, ListView} = require('tabris-decorators');

class Item {
  /** @param {string} name */
  constructor(name) {
    this.text = name;
  }
}

const listView = new ListView({
  layoutData: 'stretch',
  cellHeight: 40,
  createCell: () =>
    new Cell({highlightOnTouch: true, padding: 8, height: 52})
      .append(new TextView({centerY: 0, font: {size: 24}, id: 'myTextView'}))
      .onTap(ListView.select)
      .onItemChanged(ev => {
        ev.target._find(TextView).only('#myTextView').text = ev.value.text;
      }),
  items: [
    new Item('Hello'),
    new Item('World'),
    new Item('Foo'),
    new Item('Bar')
  ]
}).onSelect(handleSelection);

contentView.append(listView);

/** @param {import('tabris-decorators').ListViewSelectEvent<Item>} ev */
function handleSelection(ev) {
  console.log('Tapped ' + JSON.stringify(ev.item));
  listView.items = listView.items.concat([new Item('New Item')]);
}

And the same example using List instead of array, because that’s actually more convinient.

const {contentView, TextView} = require('tabris');
const {Cell, ListView, List} = require('tabris-decorators');

class Item {
  /** @param {string} name */
  constructor(name) {
    this.text = name;
  }
}

const items = List.from([
  new Item('Hello'),
  new Item('World'),
  new Item('Foo'),
  new Item('Bar')
]);

const listView = new ListView({
  layoutData: 'stretch',
  cellHeight: 40,
  items,
  createCell: () =>
    new Cell({highlightOnTouch: true, padding: 8, height: 52})
      .append(new TextView({centerY: 0, font: {size: 24}, id: 'myTextView'}))
      .onTap(ListView.select)
      .onItemChanged(ev => {
        ev.target._find(TextView).only('#myTextView').text = ev.value.text;
      })
}).onSelect(handleSelection);

contentView.append(listView);

/** @param {import('tabris-decorators').ListViewSelectEvent<Item>} ev */
function handleSelection(ev) {
  console.log('Tapped ' + JSON.stringify(ev.item));
  items.push(new Item('New Item'));
}

I’ll add these to the official examples eventually.

[cookieguru]

Yes, but note that you’ll need to set items to a new array in order to see any changes