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

Refs inside each blocks #368

Closed
Rich-Harris opened this issue Mar 13, 2017 · 9 comments

Comments

@Rich-Harris
Copy link
Member

commented Mar 13, 2017

Currently they're not allowed, but maybe this...

{{#each things as thing}}
  <div ref:things/>
{{/each}}

...could result in component.refs.things being an array. The array need not correspond to the each block expression, since you might have things like this:

{{#each things as thing, i}}
  {{#if i % 2}}
    <div ref:things/>
  {{/if}}
{{/each}}

{{#each rows as y}}
  {{#each columns as x}}
    <div ref:cells/>
  {{/each}}
{{/each}}

Or is it confusing having two subtly different meanings for ref?

@IBwWG

This comment has been minimized.

Copy link

commented Mar 13, 2017

You could call it arrayref, maybe...

I suppose if it's documented well enough, anything would work OK here :)

@nsaunders

This comment has been minimized.

Copy link

commented Mar 16, 2017

IMHO sticking with ref is going to be the most predictable. There is a good chance I would try that before even looking at the docs.

@elidoran

This comment has been minimized.

Copy link

commented Mar 28, 2017

I agree. I thought it would be like that until I checked the docs and saw it isn't available yet. Makes sense to me.

@saibotsivad

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2017

In this example:

{{#each rows as y}}
  {{#each columns as x}}
    <div ref:cells/>
  {{/each}}
{{/each}}

Supposing that component.ref.cells were an array, what would the index be? Without some sort of indexing, if you ever wanted to do anything with ref:cells you'd always end up looping over the array doing a find.

A contrived example:

{{#each rows as y, yIndex}}
  {{#each columns as x, xIndex}}
    <Cell ref:cells isOddRow="{{yIndex % 2 > 0}}" />
  {{/each}}
{{/each}}
<button on:click="color()">color odd rows</button>
<script>
export default {
  methods: {
    color() {
      (this.ref.cells || []).forEach(cell => {
        if (cell.get('isOddRow')) {
          cell.set({ hoverColor: 'green' })
        }
      })
    }
  }
}
</script>
@TehShrike

This comment has been minimized.

Copy link
Member

commented Aug 26, 2017

I just ran into a use case where I wanted an array of refs to elements inside an each loop. 👍

@tomcon

This comment has been minimized.

Copy link

commented Jan 8, 2018

@Rich-Harris pointed me to this issue when I raised this in the chat room (although note my need was simply to loop within a method, rather than an #each block):

"Wish this.refs was an array of refs rather than an object - or we had a this.children array of any child components. I've a page with 6 graphs and other stuff and wanted to simply loop through and refresh any graphs, doesn't look like it is possible and for now I have to hard-code it"

I'd suspect this will be a more common need the more users start using svelte.

@nsaunders

This comment has been minimized.

Copy link

commented Jan 8, 2018

const children = Object.keys(this.refs).map(k => this.refs[k]);
@PikadudeNo1 PikadudeNo1 referenced this issue Feb 26, 2018
5 of 12 tasks complete
@zzolo

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2018

How about something like:

{#each things as thing}
  <Child refname:thing.name />
{/each}

<script>
export default {
  methods: {
    something(thing) {
      this.refs[thing.name].childMethod();
    }
  }
};
</script>
@Rich-Harris

This comment has been minimized.

Copy link
Member Author

commented Jan 17, 2019

Closing as this will be fixed in v3 (with bind:this={things[i]} etc)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.