Ember.js: sending actions to components? -

i have mixin ember components, named in-view, job of request that element brought in view. provided attribute value piece of content brought view, , if attribute matches component's content call scrollintoview or equivalent. code looks this:

// calling template {{#each items |item|}}    {{my-item content=item inviewitem=inviewitem}} }}  // mixins/in-view.js scrollintoview() {   if (this.get('content') === this.get('inviewitem'))     this.get('element').scrollintoview(); }.on('didinsertelement')  // components/my-item/component.js import inview 'mixins/in-view'; export default ember.component.extend(inview,  

this works fine. question have arises when want change item in view. can have in-view mixin observe inviewitem attribute:

}.on('didinsertelement').observes('inviewitem') 

and works, seems bit of code smell.

in addition, actual code structure there controller knows item supposed in view, , template calls my-item-list component displays scrollable div containing item list, , in turn calls my-item component. means have pass inviewitem attribute controller down through 2 levels, in

// resource/controller.js inviewitem:  // resource/template.js {{my-item-list items=item inviewitem=inviewitem}}  // components/my-item-list/template.js {{#each items |item|}}    {{my-item content=item inviewitem=inviewitem}} }} 

i avoid having my-item template hard-wired access inviewitem attribute on controller:

scrollintoview() {   if (this.get('content') === this.get('controller.inviewitem'))     this.get('element').scrollintoview(); }.on('didinsertelement') 

but that's code smell; don't want build kind of dependency on specific controller field mixin. instead possibly pass component name of controller attribute watch, seems unduly clumsy, , it's tricky observe attribute name variable. more importantly, don't think work when controllers go away in 2.0.

what want way "ping" or somehow send message template. know in principle violates ddau principle, in particular case need somehow send "action down"--an action telling component adjust bring view.

of course, give on entire idea of in-view mixin , have controller dig down generated html find item bring view , issue scrollintoview on directly. however, seems violate principle of separation of concerns; my-item template no longer in complete control of itself.

what recommended design pattern kind of case?

the solution here go opposite direction have. component here localized scope, , pain feeling localized scope needs access , mutate global state (the app's scroll position).

some people use scroll-service keeping track of , mutating state, i've used several variations on myself.

it sounds though you're dealing scrollable list, perhaps div, , item in view isn't merely function of page state, programmatically may change. instance, new item has been inserted , want scroll new item view.

a plugin jquery.scrollto or similar (collectively "scroller") better jumping new position preserves user's contextual awareness on page.

with scrollable div or list or similar, might choose have top level component control scroll state. scroll state still localized in case, instead of being localized each item it's been localized scrollable region whole, better belongs.

there number of patterns list items register parent list-component. in robust scenario, might so, quick , not dirty approach wherein on didinsertelement new child emits action parent containing it's context, parent uses check if it's active item , if triggers scrollto.