Svelteの各論理

前に、私はカバーhow if-else logic works in Svelte . 今日、私はSvelteでそれぞれのロジックを使用して、オブジェクトをその内容を表示するために反復させます.
あなたがsvelteに新しいならば、私を読んでくださいguide on how to create your first Svelte project here .

Svelteにおける各論理の動機づけ

私たちがSvelteでコンポーネントを作っていると言いましょうmy guide on Svelte components . 私たちはデータのセットといくつかの基本的なCSSを持っています.Svelteでは、通常のHTML/CSS/JavaScriptファイルのように見えます.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">

</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelteなしで、そのデータをすべて表示したいなら、それを通してループを行い、JavaScriptでHTMLを生成しなければなりません.Svelteでは、それははるかに簡単にループを介してデータを-私たちは、単に{#each} ロジック.

Svelte Worksにおける論理

それぞれで、我々はそれの範囲内の私達の場所のオブジェクトを介して私達のチェックインデータdivと反復を取ることができます.
Svelteの各ループには次の構文があります.

{#each locations as { country, city }, i}
|-----|--------|    |---------------|  ^
   |      |                 |          └ - - - the index of the current item
   |      |                 └ - - - all the properties we want to access from "locations"
   |      └ - - - the variable in our Javascript to iterate over
   └ - - - the start of the each block

本質的に、私たちは私たちの場所機能を我々が表示したいけれども、多くの特性に分解することができます.我々が国だけを示したかったならば、我々は書くことができました{#each locations as { country }, i} .
私たちも完全に私を残して、ちょうど書くことができます{#each locations as { country, city }} .

Svelteでの各論理の使用

例を見てみましょう.以下に、それぞれのロジックを使って場所リストをHTMLに変えました.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as { country, city }, i}
        <div class="county-city">
            {i + 1}: {country}, {city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

上記のコードは次の出力を生成します.
1:英国、ロンドン
2:インド、ムンバイ
3:フランス、パリ
Svelteは、この超簡単に、私たちにデータを残して柔軟性を与える.たとえば、国のみを表示する例を示します.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as { country }}
        <div class="county-city">
            {country}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

上記のコードは次の出力を生成します.
英国
インド
フランス

Svelteで各ブロックをキー付け

オブジェクト全体にアクセスする場合は、Svelteもそのオプションを与えます.例えば、書く代わりに{#each locations as {country, city}, i} , 単に書くことができます.

{#each locations as location, i}

例を見てみましょう.以下のコードは前の例と全く同じように動作しますが、直接参照する国の代わりに、場所を書きます.国.両方の方法は同じですので、使用することを好むあなた次第です.一部の人々は、オブジェクトから使用する要素を常に再定義する必要がないので、そのシンプルさのため、このバージョンを好みます.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as location, i}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelteで各々の声明をキーにしました

既に定義済みの識別子を持っている場合は、インデックスとともにsvelteに渡すことができます.この利点は、データを更新したり変更したりする場合、元のデータセット間に強いリンクを保持していることであり、svelteはデータを変更した場合にはリストをdiffするために使用します.
これについて考える良い方法は、あなたがキーを提供するならば、あなたはSlelteにHTML要素をそのキーに写像するように伝えているということです.キーを持つ項目が削除されると、DOM要素が削除されます.プロパティがそのキーのために変わるならば、svelteはDOM要素を更新します.
代わりにキーを提供しない場合は、sLelteは配列インデックスをオフにします.これはいくつかの問題を引き起こす可能性があります.たとえば、最初から要素を削除する場合、最初のDOM要素は単に配列の“new”最初の項目からプロパティを更新するだけです.このようにユニークなキーを使用するのに便利です.
Svelteで各々の声明をキーにする方法

let locations = [ 
    {
        id: "123-123-123",
        country: "UK",
        city: "London",
    },
    {
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    },
    {
        id: "125-125-125",
        country: "France",
        city: "Paris"
    }
];

その後、各項目の一意のキーとしてIDを定義できます.もしそうしたいなら、次のようになります.

{#each locations as location, i (location.id)}

あるいは、私たちが脱構築しているなら、このように書くこともできます.

{#each locations as {id, country, city}, i (id)}

または最後に、私たちは完全に削除することができます-そして、単にIDを参照してください.これは私たちのコードでIDを使用し、またDOM要素をIDプロパティにリンクさせます.

{#each locations as {id, country, city} (id)}

コードでこれを使用して、我々はまだ同じ結果を達成することができます、しかし、我々は我々のDOM要素を特定の配列要素に固く結びつけました.

<script>
let locations = [ 
    {
        id: "123-123-123",
        country: "UK",
        city: "London",
    },
    {
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    },
    {
        id: "125-125-125",
        country: "France",
        city: "Paris"
    }
];
</script>

<div id="data">
    {#each locations as location, i (location.id)}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelteの各々の他の声明

を使用して空リストのデフォルト動作を定義できます{:else} 文.単にあなたの{#each} ステートメントを通常通り、追加します.リストが空の場合のみ表示されます.
以下に例を示します.

<div id="data">
    {#each locations as location, i (location.id)}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {:else}
        <div class="empty-list">No items to show!</div>
    {/each}
</div>