Skip to content

Instantly share code, notes, and snippets.

@ykaragol

ykaragol/components.my-component.js

Last active November 17, 2018 16:41
Show Gist options
  • Save ykaragol/ff373bcda86beefe0ca1a857eb27abff to your computer and use it in GitHub Desktop.
Save ykaragol/ff373bcda86beefe0ca1a857eb27abff to your computer and use it in GitHub Desktop.
Download ZIP
Proxy Pattern - Ember Components
Raw
components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
});
Raw
components.my-proxy-component.js
import Ember from 'ember';
import InViewportMixin from 'ember-in-viewport';
export default Ember.Component.extend(InViewportMixin, {
});
Raw
components.very-heavy-component.js
import Ember from 'ember';
export default Ember.Component.extend({
});
Raw
routes.application.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
var arr = Ember.A();
for(var i =0; i<500; i++){
arr.pushObject({x:i});
}
return arr;
}
});
Raw
templates.application.hbs
<h2>Sample page for proxy component</h2>
{{#each model as |item|}}
<!-- Change the following component with "my-proxy-component" -->
{{my-component item=item}}
{{/each}}
Raw
templates.components.my-component.hbs
{{very-heavy-component item=item}}
Raw
templates.components.my-proxy-component.hbs
{{#if viewportEntered}}
{{very-heavy-component item=item}}
{{else}}
<div>&nbsp;</div>
{{/if}}
Raw
templates.components.very-heavy-component.hbs
<span>{{item.x}}</span>
<div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div><div><span><s><i></i></s></span></div>
Raw
twiddle.json
{
"version": "0.10.7",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.0",
"ember-data": "2.10.0",
"ember-template-compiler": "2.10.0",
"ember-testing": "2.10.0"
},
"addons": {
"ember-in-viewport":"2.1.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment