[docs] Update 02-template-syntax.md

[rodshtein]

Removed: > Note that we can't do {cart.empty} since cart is undefined when the button is first rendered and throws an error.

It fixed in 3.16.7
Issue: #4090

[bluwy]

Duplicate of #6852. I still don't think this is a good idea according to #6852 (comment)

[rodshtein]

@bluwy

Ok, it still confused.

Why we can't just use: on:click={cart && cart.empty} if is work. ( see #4090)
And why can't use: {foo.bar} no matter where on the page, before or after bind, but can use {foo.?bar}

Is there any way to describe it in the documentation?

[bluwy]

Why we can't just use: on:click={cart && cart.empty} if is work.

You can use on:click={cart && cart.empty}, but for on:click={cart.empty} which also works, I don't recommend that as this exploits a compiler behaviour -- in cases where the event handler is a dynamic variable, Svelte will wrap it with an anonymous function, and indirectly guards again the potential error.

I think it's important to have the mindset that whatever event handler for on:click, the {...} will always be evaluated on the initial render. This prevents bugs in the long run.

And why can't use: {foo.bar} no matter where on the page, before or after bind, but can use {foo.?bar}

Going back to "{...} will always be evaluated on the initial render.", if you use {foo.bar}, it will error if foo is undefined. ?. syntax guards against it, it's basically sugar for {foo && foo.bar}.

I think the documentation has already described well with the blockquotes that this PR removes. As long as the blockquote recommendation is respected, I don't think we need to explain the internals given it's an implementation detail, and doesn't fit well in the docs.