redom / redom

Tiny (2 KB) turboboosted JavaScript library for creating user interfaces.

Home Page:https://redom.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: Is it possible to only update 1x element of a list ?

lowi opened this issue · comments

commented

I am able to do this:

const elementToUpdate = redom.el('div', 'b');
const list = redom.el('div', 'list',
  [
    elementToUpdate,
    redom.el('div', 'c')
  ]);


redom.mount(document.body, list);

setTimeout(() => {
  elementToUpdate.textContent = 'b++';
}, 1000);

Is there a way to do the same thing on redom list?
For example a method updateItem?

class Li {
  constructor () {
    this.el = redom.el('li');
  }
  update (i) {
    this.el.textContent = `Item ${i}`;
  }
}

// create list
const ul = redom.list('ul', Li);

// update with data
ul.update(['b', 'c']);
redom.mount(document.body, ul);

setTimeout(() => {
  // Ideally I would like something like this to only update the child
  ul.updateItem({index: 0, data: 'item b++'})
}, 1000);

You have to try it out but I think you can do:

ul.views[yourIdx].update(updateArgs....)

… and, just in case anyone else needs this, if you're using a keyed list that's:

ul.lookup[key].update()