Есть ли способ установить оператор после блока {#each} в Svelte? - PullRequest
Новая
       6

Есть ли способ установить оператор после блока {#each} в Svelte?

0 голосов
/ 05 мая 2020

Я новичок в Svelte и создаю этот компонент (https://reactjs.org/docs/thinking-in-react.html), чтобы понять его немного лучше, пройдя через руководство. На шаге 2 есть раздел в классе ProductTable, где после каждого l oop следует следующий оператор lastCategory = product.category;. Есть ли способ написать заявление после этого каждого блока? Ниже приведен мой код на данный момент. 

<script>
    import ProductCategoryRow from './ProductCategoryRow.svelte';
    import ProductRow from './ProductRow.svelte';

    export let products;

    let lastCategory = null;
</script>


<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        {#each products as product}
            {#if product.category !== lastCategory}
                <ProductCategoryRow category={product.category} />
            {/if}
            <ProductRow product={product} />
            <!-- lastCategory = product.category (?) -->
        {/each}
    </tbody>
</table>

Извините за мой плохой английский sh и заранее спасибо :)

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

В качестве альтернативной конструкции вы также можете использовать промежуточный компонент и настроить logi c там, используя <script context="module">.

Что-то вроде: 

<script>
  import { onDestroy } from 'svelte'
  import ProductRowWrapper, { resetLastCategory } from './ProductRowWrapper.svelte'

  export let products

  // make sure the last category is reset to an empty string when
  // the entire product list is unmounted, in order to have a clean
  // initialization when it is mounted again with a different set of products
  onDestroy(resetLastCategory)
</script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {#each products as product}
      <ProductRowWrapper {product} />
    {/each}
  </tbody>
</table>

ProductRowWrapper.svelte

<script context="module">
  let lastCategory = ''

  export function resetLastCategory() {
    lastCategory = ''
  }
</script>

<script>
  import ProductCategoryRow from './ProductCategoryRow.svelte'
  import ProductRow from './ProductRow.svelte'

  export let product

  let displayCategory = product.category !== lastCategory

  lastCategory = product.category
</script>

{#if displayCategory}
  <ProductCategoryRow category={product.category} />
{/if}
<ProductRow {product} />
0 голосов
/ 05 мая 2020

Вы не можете этого сделать в Svelte. Вместо этого вы можете выполнить простой обратный поиск: 

{#each products as product, i}
    {#if i !== 0 && product.category || products[i-1].lastCategory}
        <ProductCategoryRow category={product.category} />
    {/if}
        <ProductRow product={product} />
{/each}

(обратите внимание, что вы можете сделать это и в React)

...