Introduce sprite.model about ember-animated HOT 8 OPEN

(If I had to take a stab, my best guess is so transitions are pure and thus can be reused.)

My use case at the moment (for which I'm trying to think through a better solution) is clicking an item in a list. Doing that reshuffles the list, so all sprites are keptSprites, but I want the clickedItem to be animated in a slightly different way from the others. I'm having trouble figuring out how to do that.

from ember-animated.

Right, they are functions, not methods. You can manually bind them if you want to, like any function.

export default Component.extend({
  init() {
    this._super.init();
    this.transition = this.transition.bind(this);
  },

  foo: 'bar',

  * transition({ keptSprites }) {
    console.log(this);
    keptSprites.forEach(sprite => {

from ember-animated.

I see... is that considered a bad practice?

from ember-animated.

I might still be "thinking in D3" but I think my higher-level question is how to "link" Sprites with the objects/data that's driving them.

Simple demo I'm hacking on:

Clicking an item changes its position property and the list resorts. What if I want to do something "special" to the clicked item? Basically if I bound my transition function in init, maybe I could use some data-item-id attr on the dom element to look up the correct item from the this.items array, and use that to affect the animation. But it almost feels like there should be a direct way to "bind" some data to a Sprite.

from ember-animated.

I don't think it's bad.

We could choose to introduce sprite.model. There is a user-provided model backing every sprite, it's just not exposed in the API today.

from ember-animated.

There is a user-provided model backing every sprite

Could you elaborate?

from ember-animated.

Is it the predicate, the thing that is changing that is triggering a Sprite to animate?

from ember-animated.

Yes, it's the value that's yielded into the block. For animated-if it's just the value of the predicate, but for a-value or a-each it's the value of the actual item.

from ember-animated.