Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event handlers in each block don't work. #290

Closed
dxlbnl opened this issue Feb 20, 2017 · 5 comments
Closed

Event handlers in each block don't work. #290

dxlbnl opened this issue Feb 20, 2017 · 5 comments
Labels

Comments

@dxlbnl
Copy link
Contributor

dxlbnl commented Feb 20, 2017

{{#each items as item}}
    <Component on:change="method(item, event)" />
{{/each}}

Turns in to this code:

function renderEachBlock ( root, eachBlock_value, slider, slider__index, component ) {
// ...
component1.on( 'change', function ( event ) {
    var eachBlock_value = this.__svelte.eachBlock_value, component__index =  this.__svelte.component__index, slider = eachBlock_value[component__index];
    component.method(item, event);
});

But this.__svelte doesn't exist. So the handler can't be called.

@Rich-Harris
Copy link
Member

Ah, yeah — it's treating the component the same as it would treat a DOM node, which is incorrect. Thanks for flagging it.

@cristinecula
Copy link
Contributor

A simple workaround I use is omitting the iterated value from the event handler and sending it as the event:

{{#each items as item}}
    <Component item={{item}} on:change="method(event)" />
{{/each}}

<span on:click="fire( 'change', item )">{{ item.name }}</span>

@dxlbnl
Copy link
Contributor Author

dxlbnl commented Feb 22, 2017

@Rich-Harris Ah, so that's going on, I was thinking __svelte might be some legacy or something. But it was used too often in the codebase :).

Another question, it isn't possible to make dynamic value:binds right? as in, take a propertypath, and bind that path to the component.

i.e.:

{{#each boundProps as prop}}
  <Component bind:value="{{prop}}" />
{{/each}}

The reason I stumbled onto this bug was because I want to dynamically generate the components, based on a simple data structure.
Now, mapping the values back up the component hierarchy would require a event chain (i think)

@cristinecula Thanks for the advice, I might look into this, although it would leak a bit too much to Component for my taste ;)

@Rich-Harris
Copy link
Member

Svelte does map values back up the data hierarchy (gist, demo), but it doesn't work with components — you've discovered another bug!

Rich-Harris added a commit that referenced this issue Feb 24, 2017
Rich-Harris added a commit that referenced this issue Feb 25, 2017
[WIP] failing test for first bug in #290
Rich-Harris added a commit that referenced this issue Feb 27, 2017
Rich-Harris added a commit that referenced this issue Feb 27, 2017
[WIP] failing tests for second bug in #290
@Rich-Harris
Copy link
Member

Both these bugs are now fixed — closing this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants