Skip to content

Instantly share code, notes, and snippets.

@ef4
Forked from runspired/components.each-chunk.js
Last active July 13, 2018 20:13
Show Gist options
  • Save ef4/c7c2fc91095b6375ef9b92a146a07561 to your computer and use it in GitHub Desktop.
Save ef4/c7c2fc91095b6375ef9b92a146a07561 to your computer and use it in GitHub Desktop.
EachChunk
import Ember from 'ember';
const { Component } = Ember;
export default class EachChunk extends Component {};
EachChunk.tagName = '';
EachChunk.reopenClass({
positionalParams: ['items', 'chunkSize']
});
import Ember from 'ember';
const { Component } = Ember;
export default class SimpleElement extends Component {};
SimpleElement.reopenClass({
positionalParams: ['tagName']
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
items: [
'Chris', '@runspired', 'James', 'Wesley', 'Zach', 'Jill', 'Tanya', 'Renee', 'Rosemary', 'Thomas', 'John'
]
});
import Ember from 'ember';
export function chunk(params/*, hash*/) {
let [items, chunkSize] = params;
let chunks = [];
for (let i = 0; i < items.length; i++) {
let chunk = [];
chunks.push(chunk);
for (let j = 0; j < chunkSize && i < items.length; j++, i++) {
chunk.push({
item: items[i],
index: i
});
}
}
return chunks;
}
export default Ember.Helper.helper(chunk);
<h1>Chunking Lists (for grids)</h1>
<br>
<table>
<tbody>
{{#each (chunk items 3) as |row rowIndex|}}
<tr>
{{#each row as |item colIndex|}}
<td>{{rowIndex}}:{{colIndex}} <b>{{item}}</b> <i>item {{index}}</i></td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
{{#each (chunk items chunkSize) as |chunk chunkIndex|}}
{{yield to="inverse"}}
{{#each chunk as |chunkItem chunkPosition|}}
{{yield chunkItem.item chunkItem.index chunkIndex chunkPosition}}
{{/each}}
{{/each}}
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-data": "3.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment