diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js index 46ba6d4aa1..a6d63cfc94 100644 --- a/src/generators/dom/visitors/Component.js +++ b/src/generators/dom/visitors/Component.js @@ -96,9 +96,7 @@ export default { if ( local.bindings.length ) { const bindings = local.bindings.map( binding => { - const parts = binding.value.split( '.' ); - const tail = parts.pop(); - return `if ( '${tail}' in ${parts.join( '.' )} ) ${name}_initialData.${binding.name} = ${binding.value};`; + return `if ( ${binding.prop} in ${binding.obj} ) ${name}_initialData.${binding.name} = ${binding.value};`; }); statements.push( bindings.join( '\n' ) ); diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js index b6adbde630..9e04ee3479 100644 --- a/src/generators/dom/visitors/attributes/binding/index.js +++ b/src/generators/dom/visitors/attributes/binding/index.js @@ -11,10 +11,21 @@ export default function createBinding ( generator, node, attribute, current, loc if ( contextual ) local.allUsedContexts.add( parts[0] ); if ( local.isComponent ) { - local.bindings.push({ - name: attribute.name, - value: contextual ? attribute.value : `root.${attribute.value}` - }); + let obj; + let prop; + let value; + + if ( contextual ) { + obj = current.listNames[ parts[0] ]; + prop = current.indexNames[ parts[0] ]; + value = attribute.value; + } else { + prop = `'${parts.slice( -1 )}'`; + obj = parts.length > 1 ? `root.${parts.slice( 0, -1 ).join( '.' )}` : `root`; + value = `root.${attribute.value}`; + } + + local.bindings.push({ name: attribute.name, value, obj, prop }); } const handler = current.getUniqueName( `${local.name}ChangeHandler` ); @@ -59,9 +70,11 @@ export default function createBinding ( generator, node, attribute, current, loc const listName = current.listNames[ parts[0] ]; const indexName = current.indexNames[ parts[0] ]; + const context = local.isComponent ? `_context` : `__svelte`; + setter = deindent` - var list = this.__svelte.${listName}; - var index = this.__svelte.${indexName}; + var list = this.${context}.${listName}; + var index = this.${context}.${indexName}; list[index]${parts.slice( 1 ).map( part => `.${part}` ).join( '' )} = ${value}; component._set({ ${prop}: component.get( '${prop}' ) }); diff --git a/test/generator/component-binding-each-nested/Widget.html b/test/generator/component-binding-each-nested/Widget.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/generator/component-binding-each-nested/Widget.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/generator/component-binding-each-nested/_config.js b/test/generator/component-binding-each-nested/_config.js new file mode 100644 index 0000000000..ab5cbef585 --- /dev/null +++ b/test/generator/component-binding-each-nested/_config.js @@ -0,0 +1,22 @@ +export default { + html: ` + +

foo, bar, baz

+ `, + + test ( assert, component, target, window ) { + const event = new window.MouseEvent( 'input' ); + const inputs = target.querySelectorAll( 'input' ); + + inputs[0].value = 'blah'; + inputs[0].dispatchEvent( event ); + + assert.deepEqual( component.get( 'a' ), [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] ); + assert.htmlEqual( target.innerHTML, ` + +

blah, bar, baz

+ ` ); + + component.teardown(); + } +}; diff --git a/test/generator/component-binding-each-nested/main.html b/test/generator/component-binding-each-nested/main.html new file mode 100644 index 0000000000..bdda96fe75 --- /dev/null +++ b/test/generator/component-binding-each-nested/main.html @@ -0,0 +1,22 @@ +{{#each a as x}} + +{{/each}} + +

{{a.map(getName).join(', ')}}

+ + diff --git a/test/generator/component-binding-each/Widget.html b/test/generator/component-binding-each/Widget.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/generator/component-binding-each/Widget.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/generator/component-binding-each/_config.js b/test/generator/component-binding-each/_config.js new file mode 100644 index 0000000000..3cb8d05bc9 --- /dev/null +++ b/test/generator/component-binding-each/_config.js @@ -0,0 +1,22 @@ +export default { + html: ` + +

foo, bar, baz

+ `, + + test ( assert, component, target, window ) { + const event = new window.MouseEvent( 'input' ); + const inputs = target.querySelectorAll( 'input' ); + + inputs[0].value = 'blah'; + inputs[0].dispatchEvent( event ); + + assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); + assert.htmlEqual( target.innerHTML, ` + +

blah, bar, baz

+ ` ); + + component.teardown(); + } +}; diff --git a/test/generator/component-binding-each/main.html b/test/generator/component-binding-each/main.html new file mode 100644 index 0000000000..6dbae7e403 --- /dev/null +++ b/test/generator/component-binding-each/main.html @@ -0,0 +1,21 @@ +{{#each a as x}} + +{{/each}} + +

{{a.join(', ')}}

+ +