Aurelia Oribella Sortable Gist Table Rows

app.html

<template>
  <table oa-sortable="scroll.bind: 'document'; items.bind: items;">
    <tbody>
      <tr
        oa-sortable-item="item.bind: item;"
        repeat.for="item of items"
        draggable="false">
        <td>
          ${item.text}
        </td>
      </tr>
    </tbody>
  </table>
</template>

app.js

export class App {
  items = [
      { text: '1' },
      { text: '2' },
      { text: '3' },
      { text: '4' },
      { text: '5' },
      { text: '6' },
      { text: '7' },
      { text: '8' },
      { text: '9' },
      { text: '10' }
    ];
}

config.js

require.config({
  baseUrl: ".",
  paths: {
    "aurelia-binding": "node_modules/aurelia-binding/dist/amd/aurelia-binding",
    "aurelia-bootstrapper": "node_modules/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper",
    "aurelia-dependency-injection": "node_modules/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection",
    "aurelia-event-aggregator": "node_modules/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator",
    "aurelia-fetch-client": "node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client",
    "aurelia-framework": "node_modules/aurelia-framework/dist/amd/aurelia-framework",
    "aurelia-http-client": "node_modules/aurelia-http-client/dist/amd/aurelia-http-client",
    "aurelia-history": "node_modules/aurelia-history/dist/amd/aurelia-history",
    "aurelia-history-browser": "node_modules/aurelia-history-browser/dist/amd/aurelia-history-browser",
    "aurelia-loader": "node_modules/aurelia-loader/dist/amd/aurelia-loader",
    "aurelia-loader-default": "node_modules/aurelia-loader-default/dist/amd/aurelia-loader-default",
    "aurelia-logging": "node_modules/aurelia-logging/dist/amd/aurelia-logging",
    "aurelia-logging-console": "node_modules/aurelia-logging-console/dist/amd/aurelia-logging-console",
    "aurelia-metadata": "node_modules/aurelia-metadata/dist/amd/aurelia-metadata",
    "aurelia-pal": "node_modules/aurelia-pal/dist/amd/aurelia-pal",
    "aurelia-pal-browser": "node_modules/aurelia-pal-browser/dist/amd/aurelia-pal-browser",
    "aurelia-path": "node_modules/aurelia-path/dist/amd/aurelia-path",
    "aurelia-polyfills": "node_modules/aurelia-polyfills/dist/amd/aurelia-polyfills",
    "aurelia-router": "node_modules/aurelia-router/dist/amd/aurelia-router",
    "aurelia-route-recognizer": "node_modules/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer",
    "aurelia-task-queue": "node_modules/aurelia-task-queue/dist/amd/aurelia-task-queue",
    "aurelia-templating": "node_modules/aurelia-templating/dist/amd/aurelia-templating",
    "aurelia-templating-binding": "node_modules/aurelia-templating-binding/dist/amd/aurelia-templating-binding",
    "text": "node_modules/text/text",
    "es6": "node_modules/requirejs-babel/es6",
    "babel": "node_modules/requirejs-babel/babel-5.8.34.min"
  },
  packages: [
    {
      name: 'aurelia-templating-router',
      location: 'node_modules/aurelia-templating-router/dist/amd',
      main : 'aurelia-templating-router'
    },
    {
      name: 'aurelia-templating-resources',
      location: 'node_modules/aurelia-templating-resources/dist/amd',
      main : 'aurelia-templating-resources'
    },
    {
      name: 'aurelia-validation',
      location: 'node_modules/aurelia-validation/dist/amd',
      main : 'aurelia-validation'
    },
    {
      name: 'oribella-framework',
      location: 'https://unpkg.com/oribella-framework/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-aurelia-sortable',
      location: 'https://unpkg.com/oribella-aurelia-sortable/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-tap',
      location: 'https://unpkg.com/oribella-tap/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-doubletap',
      location: 'https://unpkg.com/oribella-doubletap/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-longtap',
      location: 'https://unpkg.com/oribella-longtap/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-swipe',
      location: 'https://unpkg.com/oribella-swipe/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-longtap-swipe',
      location: 'https://unpkg.com/oribella-longtap-swipe/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-pinch',
      location: 'https://unpkg.com/oribella-pinch/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-rotate',
      location: 'https://unpkg.com/oribella-rotate/dist/amd',
      main: 'index'
    },
    {
      name: 'oribella-default-gestures',
      location: 'https://unpkg.com/oribella-default-gestures/dist/amd',
      main: 'index'
    }
  ],
  config: {
    es6: { stage: 0 }
  }
});

require.standardLoad = require.load;
require.load = function(context, moduleName, url) {
  var config = requirejs.s.contexts._.config;
  if (moduleName in config.paths) {
    return require.standardLoad(context, moduleName, url);
  }
  if(moduleName.indexOf('oribella') !== -1) {
    return require.standardLoad(context, moduleName, url);
  }
  require(['es6'], function(es6) {
    es6.load(
      moduleName,
      require,
      {
        fromText: function(text) {
          require.exec(text);
          context.completeLoad(moduleName);
        }
      },
      {});
  });
};

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }
      table {
        width: 100%;
      }
      tbody tr:nth-child(odd) {
        background-color: #ccc;
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script src="config.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('oribella-aurelia-sortable');

  aurelia.start().then(() => aurelia.setRoot());
}