block by Rich-Harris 115f8c1ae72c3e8b4eafedc0937439ff

Two-way binding inside {{#each}} blocks

Full Screen

index.html

<html>
<body>
	<main></main>
	<script src='bundle.js'></script>
</body>
</html>

twowaybinding.md

Two-way binding inside each blocks

Demo: https://rhetorical-able.surge.sh/

Component.html

<div class='component'>
	<input bind:value>
</div>

Main.html

<section>
	<h2>direct</h2>
	{{#each a as x}}
		<!--TODO this doesn't work with components!-->
		<!--<Component bind:value='prop'/>-->
		<input bind:value='x'>
	{{/each}}

	<p>{{a.join(', ')}}</p>
</section>

<section>
	<h2>nested</h2>
	{{#each b as x}}
		<!--TODO this doesn't work with components!-->
		<!--<Component bind:value='prop'/>-->
		<input bind:value='x.name'>
	{{/each}}

	<p>{{b.map(getName).join(', ')}}</p>
</section>

<script>
	import Component from './Component.html';

	export default {
		data: function () {
			return {
				a: [ 'foo', 'bar', 'baz' ],
				b: [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }],
				getName: function ( x ) {
					return x.name;
				}
			}
		},

		components: {
			Component
		}
	};
</script>

main.js

import Main from './Main.html';

new Main({
	target: document.querySelector( 'main' )
});

package.json

{
  "devDependencies": {
    "rollup": "^0.41.4",
    "rollup-plugin-svelte": "^1.6.0"
  },
  "scripts": {
    "build": "rollup -c"
  }
}

rollup.config.js

import svelte from 'rollup-plugin-svelte';

export default {
	entry: 'main.js',
	dest: 'bundle.js',
	format: 'iife',
	plugins: [ svelte() ]
};