Instantly share code, notes, and snippets.

Embed
What would you like to do?
Limit with init
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
const showOnly = this.get('showOnly');
console.log('showOnly', showOnly);
if (showOnly && Number.isInteger( parseInt(showOnly))) {
this.set('people', this.get('people').slice(0, parseInt(showOnly)));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
model: [
{ body: 'A' },
{ body: 'B' },
{ body: 'C' },
{ body: 'D' },
{ body: 'E' },
{ body: 'F' },
],
limit: 2,
actions: {
incLimit() {
this.incrementProperty('limit');
}
}
});
<h1>Welcome to {{appName}}</h1>
<h4><a href="http://www.falsepositives.com/index.php/2016/07/20/limiting-the-number-of-elements-displayed-in-a-ember-component/">Limiting the number of elements displayed in a Ember Component</a></h4>
<br>
<br>
{{outlet}}
{{limit-each showOnly=2 people=model}}
<br>
<br>
{{yield}}
<ul>
{{#each people as |person|}}
<li>{{person.body}}</li>
{{/each}}
</ul>
{
"version": "0.10.1",
"description": "Limiting the number of elements displayed in a Ember Component",
"homepage": "http://www.falsepositives.com/index.php/2016/07/20/limiting-the-number-of-elements-displayed-in-a-ember-component/",
"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.6.0",
"ember-data": "2.6.1",
"ember-template-compiler": "2.6.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment