Rich-Harris/ twowaybinding.md

## twowaybinding.md

      
    Raw
  

               twowaybinding.md
            
          
    Two-way binding inside each blocks
Demo: https://rhetorical-able.surge.sh/

  
## .gitignore
bundle.js
node_modules
.vscode
.DS_Store
cleanup.sh

## Component.html
<div class='component'>
	<input bind:value>
</div>

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

## 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() ]
};
	<html>
	<body>
	<main></main>
	<script src='bundle.js'></script>
	</body>
	</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>
	import Main from './Main.html';

	new Main({
	target: document.querySelector( 'main' )
	});
	{
	"devDependencies": {
	"rollup": "^0.41.4",
	"rollup-plugin-svelte": "^1.6.0"
	},
	"scripts": {
	"build": "rollup -c"
	}
	}
	import svelte from 'rollup-plugin-svelte';

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