ember-modifier-manager-polyfill
This addon provides a polyfill for implementing element modifier managers as
described in emberjs/rfcs#373 .
Compatibility
Completely inert when running ember-source
3.8 or higher
Tested against ember-source
v2.12, v2.16, v2.18, v3.4, v3.5, v3.6, v3.7 in CI
Installation
ember install ember-modifier-manager-polyfill
Usage
At this point the best documentation is likely still the the RFC
itself ,
but here are a few simple examples (shamelessly stolen from another modifier
RFC emberjs/rfcs#353 ):
Performance Marking
<section id="about-us" {{performance 'mark' 'about-page'}}>
<h1>About Us</h1>
{{!-- snip --}}
</section>
import Ember from ' ember ' ;
export default Ember . _setModifierManager (
( ) => ( {
createModifier ( ) { } ,
installModifier ( _instance , _element , args ) {
let [ type , name ] = args . positional ;
performance [ type ] ( name ) ;
} ,
updateModifier ( ) { } ,
destroyModifier ( ) { } ,
} ) ,
class PerformanceModifier { }
) ;
jQuery Widget
<input type="date" {{datepicker changeMonth=true changeYear=true}} />
import Ember from ' ember ' ;
import $ from ' jquery ' ;
export default Ember . _setModifierManager (
( ) => ( {
createModifier ( ) {
return { element : null } ;
} ,
installModifier ( state , element , args ) {
let options = Object . assign ( { minDate : 20 , maxDate : ' +1M +10D ' } , args . named ) ;
state . element = element ;
state . options = options ;
$ ( this . element ) . datepicker ( options ) ;
} ,
updateModifier ( ) { } ,
destroyModifier ( state ) {
$ ( state . element ) . datepicker ( state . options ) ;
} ,
} ) ,
class DatepickerModifier { }
) ;
Page View Tracking
<section {{track-impression eventCategory="Post"}}>
<header>Chad liked a post</header>
<img src="cat.jpg">
{{!-- Snip --}}
<section>
import Ember from ' ember ' ;
export default Ember . _setModifierManager (
owner => ( {
createModifier ( ) {
return { element : null , observer : null } ;
} ,
installModifier ( state , element , args ) {
let ga = owner . lookup ( ' service:ga ' ) ;
let { eventCategory } = args . named ;
let interSectionObserver = new IntersectionObserver ( entries => {
entries . forEach ( entry => ga . send ( ' event ' , ' impression ' , eventCategory ) ) ;
} ) ;
state . element = element ;
state . observer = interSectionObserver ;
} ,
updateModifier ( ) { } ,
destroyModifier ( state ) {
state . observer . unobserve ( state . element ) ;
} ,
} ) ,
class TrackImpressionModifier { }
) ;
License
This project is licensed under the MIT License .