Svelte: {{#each ...}}...{{else}}...{{/each}}

[Rich-Harris]

Suggestion via Twitter – an else block for the special case when your array is empty:

{{#each todos as todo}}
  <Todo description='{{todo.description}}' done='{{todo.done}}'/>
{{else}}
  <p>Nothing left to do! Congratulations, turn off your laptop and go outside</p>
{{/each}}

[alexcorvi]

An else block that is related to iteration? I think that's kind of confusing!

I don't see anything wrong with this:

{{#each todos as todo}}
  <Todo description='{{todo.description}}' done='{{todo.done}}'/>
{{/each}}
{{#if todos.length === 0}}
  <p>Nothing left to do! Congratulations, turn off your laptop and go outside</p>
{{/if}}

Or this:

{{#if todos.length}}
  {{#each todos as todo}}
    <Todo description='{{todo.description}}' done='{{todo.done}}'/>
  {{/each}}
{{else}}
  <p>Nothing left to do! Congratulations, turn off your laptop and go outside</p>
{{/if}}

After all, this is the JavaScript way of doing it.

[Swatinem]

There is a lot of precedent in other template languages for having an else branch for iteration.

[euvl]

Sounds very convenient and the use-case is quite common, 1+ for each-else

[Ryuno-Ki]

In django, that cased is triggered in the empty clause of a for loop.

[jadedevin13]

Why not this?

{{#each todos as todo}}
  <Todo description='{{todo.description}}' done='{{todo.done}}'/>
{{empty}}
  <p>Nothing left to do! Congratulations, turn off your laptop and go outside</p>
{{/each}}

Laravel uses that syntax, https://laravel.com/docs/5.3/blade#loops.

[kyleshevlin]

Each/else is a built in helper for Handlebars. http://handlebarsjs.com/builtin_helpers.html

[dux]

needs documentation update in the example?

https://svelte.dev/examples#keyed-each-blocks