Ember.js – Helper `array-split`

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked numberItems = 1;

  get myItems() {
    return [ 1, 2, 3, 4 ]
  }

  @action
  increase(step) {
    const numToSee = this.numberItems + step
    this.numberItems = numToSee < 0 ? 0 : numToSee
  }
}

helpers.array-split\.js

import { helper } from '@ember/component/helper';

export function arraySplit(split = 0, items = []) {
  return [
    items.slice(0, split),
    items.slice(split),
  ];
}

export default helper((positional) => arraySplit(...positional));

templates.application\.hbs

Number of items displayed: {{this.numberItems}}

<br>

<button {{on "click" (fn this.increase 1)}}>Increase</button>
<button {{on "click" (fn this.increase -1)}}>Decrease</button>

<hr>

{{#let (array-split this.numberItems this.myItems) as |arr|}}
  {{#let (get arr 0) (get arr 1) as |regular rest|}}

    {{#if regular}}
      <div>Regular items:</div>
      {{#each regular as |item|}}
        <div>Item: {{item}}</div>
      {{/each}}
    {{/if}}

    {{#if rest}}
      <div>Rest of items:</div>
      {{#each rest as |item|}}
        <div>Item: {{item}}</div>
      {{/each}}
    {{/if}}

  {{/let}}
{{/let}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}