Вызвать функцию javascript и визуализировать элемент в Svelte

Question

Как добавить вызов пользовательской функции в код svelte? Например. в DataTableTest.svelte я хочу добавить функцию cellFormatter, автоматически вызывать ее и визуализировать div внутри. Ниже приведен код:

ABC.svelte

import DataTableTest from "./DataTableTest.svelte";

let columns = [
    {
      label: "ABC",
      property: "abc"
    },
    {
      label: "Items",
      property: "items"
    },
    {
      label: "cellFormatter",
      formatter: function(rowIndex, rowData) {
          return "<div>" + rowData[rowIndex] + "</div>";
      }
    }
  ];


let data = [
  {
    "abc": "dsaaads",
    "items": "dsadsads",
  }

</script>


<DataTableTest title="Test" {data} {columns} />

DataTableTest.svelte

<script>
  export let title;
  export let data;
  export let columns = [];
</script>

{title}
<table>
  {#if columns}
    <tr>
      {#each columns as c}
        <td>{c.label}</td>
      {/each}
    </tr>
  {/if}
  {#if data}
    <tbody>
      {#each data as d, i}
        <tr>
          {#each columns as c}
            {#if c.formatter}
              <td on:load=c.formatter(i, d)></td>
            {:else}
              <td>
              {@html d[c.property] ? d[c.property] : ''}
              </td>
            {/if}
          {/each}
        </tr>
      {/each}
    </tbody>
  {/if}
</table>

Я попробовал с

<td on:load=c.formatter(i, d)></td>

Но это не работает? Может кто-нибудь сказать, как я могу сделать это здесь?

Answer 1

Вы можете использовать @html Синтаксис шаблона для достижения этого:

{#if c.formatter}
    <td>
    {@html c.formatter(i, d)}
    </td>
{:else}
    <td>
    {@html d[c.property] ? d[c.property] : ''}
    </td>
{/if}

Answer 2

Как уже упоминалось @morphyish, вы можете использовать @html Синтаксис шаблона для вставки произвольного HTML в DOM.

Это полезно, если html для ваших элементов таблицы динамически выбирается из API, например, во время выполнения - когда ваше веб-приложение не контролирует генерацию этого html.

Если это не так, и ваше веб-приложение контролирует создание html, то вместо создания html-строки я бы рекомендовал создавать отдельные компоненты и ссылаться на них, используя <svelte:component> специальный элемент для рендеринга компонентов. Таким образом, все в вашей таблице на самом деле является компонентом svelte, а не произвольным html, и вы получаете все вкусности, которые предлагает svelte.

Вот пример чего-то подобного: https://svelte.dev/repl/e38138607bc445ea95754de83e5e0b8d?version=3.8.0