riconegri/app.html

## app.html
<template>
  <require from="./list"></require>
  <require from="./stopper"></require>

  <stopper></stopper>

  <list items.bind="items"></list>
</template>

## app.js
export class App {
  items = ["Item 1", "Item 2", "Item 3"];
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css">
  </head>
  <body aurelia-app>
    <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/config.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>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## list.html
<template>
<div class="input-group" repeat.for="item of items">
    ${$index}
     <input value.bind="item" class="input"  type="text" placeholder="Item" autofocus> |
     <a click.delegate="deleteItem($index)"><i class="fa fa-close"></i></a> |
     <a click.delegate="moveItemUp($index, item)"><i class="fa fa-arrow-up"></i></a> |
     <a click.delegate="moveItemDown($index, item)"><i class="fa fa-arrow-down"></i></a>
</div>
<a click.delegate="addItem()">Add Item</a>

## list.js
import { bindable, bindingMode, BindingEngine, inject } from 'aurelia-framework';

@inject(BindingEngine)
export class List {

  @bindable({defaultBindingMode: bindingMode.twoWay}) items = [];

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  attached() {
    this.subscription = this.bindingEngine
                        .collectionObserver(this.items)
                        .subscribe(this.listChanged);
  }

  detached() {
    this.subscription.dispose();
  }

  addItem() {
    this.items.push(`New Item ${this.items.length + 1}`);
  }

  deleteItem(i) {
    this.items.splice(i, 1);
  }

  moveItemUp(i, item) {
    if (i === 0)
      return;

    this.moveItem(i, i - 1, item);
  }

  moveItemDown(i, item) {
    if (i === this.items.length - 1)
      return;

    this.moveItem(i, i + 1, item);
  }

  moveItem(oldIndex, newIndex, item) {
      this.items.splice(oldIndex, 1);
      this.items.splice(newIndex, 0, item);
  }

  listChanged(slice) {
    console.log("list order changed", slice);
  }

}

## stopper.html
<template>
  Para ${fator}
</template>

## stopper.js
//import Dragula from 'aurelia-framework';

export class stopper {
  constructor () {
    this.fator = 'A';


  }
}

## styles.css
/* todo: add styles */
	<template>
	<require from="./list"></require>
	<require from="./stopper"></require>

	<stopper></stopper>

	<list items.bind="items"></list>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css">
	</head>
	<body aurelia-app>
	<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/config.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>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div class="input-group" repeat.for="item of items">
	${$index}
	<input value.bind="item" class="input" type="text" placeholder="Item" autofocus> \|
	<a click.delegate="deleteItem($index)"><i class="fa fa-close"></i></a> \|
	<a click.delegate="moveItemUp($index, item)"><i class="fa fa-arrow-up"></i></a> \|
	<a click.delegate="moveItemDown($index, item)"><i class="fa fa-arrow-down"></i></a>
	</div>
	<a click.delegate="addItem()">Add Item</a>
	import { bindable, bindingMode, BindingEngine, inject } from 'aurelia-framework';

	@inject(BindingEngine)
	export class List {

	@bindable({defaultBindingMode: bindingMode.twoWay}) items = [];

	constructor(bindingEngine) {
	this.bindingEngine = bindingEngine;
	}

	attached() {
	this.subscription = this.bindingEngine
	.collectionObserver(this.items)
	.subscribe(this.listChanged);
	}

	detached() {
	this.subscription.dispose();
	}

	addItem() {
	this.items.push(`New Item ${this.items.length + 1}`);
	}

	deleteItem(i) {
	this.items.splice(i, 1);
	}

	moveItemUp(i, item) {
	if (i === 0)
	return;

	this.moveItem(i, i - 1, item);
	}

	moveItemDown(i, item) {
	if (i === this.items.length - 1)
	return;

	this.moveItem(i, i + 1, item);
	}

	moveItem(oldIndex, newIndex, item) {
	this.items.splice(oldIndex, 1);
	this.items.splice(newIndex, 0, item);
	}

	listChanged(slice) {
	console.log("list order changed", slice);
	}

	}
	//import Dragula from 'aurelia-framework';

	export class stopper {
	constructor () {
	this.fator = 'A';


	}
	}