render() - function is not updating the DOM - lit-html

Question

I have question regarding the lit-html render function. Currently I have the problem that sometimes the render function does not update the DOM.

My render function looks like this:

public renderLootbag = (_characterItems: Object): void => {
  //some other code
  const lootbagInventoryTemplate: TemplateResult[] = [];

  for (let i: number = 0; i < numberOfInventorySpaces; i++) {
    lootbagInventoryTemplate.push(html` 
      
      //some other code 
      
    `)
  };

  const lootbagTemplate: TemplateResult = html`
    //some other code
    ${lootbagInventoryTemplate} 
    
  `;

  console.log(lootbagInventoryTemplate);
  render(lootbagTemplate, getLootbagContainer);
}

This function gets triggerd everytime I click on a button called "open Lootbag"

Now the problem is: if the value of the parameter in the renderLootbag() function changes, the DOM doesn´t get updated, eventhough the console.log(lootbagInventoryTemplate) shows me the new values ... :/.

img of the console.log

img of the dom

Note: in this case the Element with the class "lootbag__itemData" shouldn´t be filled with content.

Is there a way to completly force a new render?, I have already tried to empty my container with innerHTML and then call the render function but that didn´t work.

Thanks in advance

user_6145873 · Answer

I had a similar problem with an Input that didnt update all the time. The undelying problem was that i converted all inputs from the user to number and if the user typed some letters it would fall back to zero. Since the values didn't change always (zero changed to zero), lit html wouldn't rerender.

The Solution was using a directive.

import { html, render, directive } from "lit-html";

const value = store.savedValueFromInput;

const forceWrite = directive((someValue) => (part) => {
        part.setValue(someValue);
    });

That should force a re-render.

Best regards, Tristan

render() - function is not updating the DOM - lit-html

1 Answers