How to access the attached behavior element?

I am trying to write an attached aurelia behavior for https://github.com/RubaXa/Sortable that allows you to reorder items in a list using html 5 drag and drop to the one they have for AngularJS. So far, dragging and dropping html elements works fine with the following template code

<template>
  <require from="./sortable"></require>
  <section>
    <h2>${title}</h2>
    <ul sortable>
      <li repeat.for="item of items">${item.title}</li>
    </ul>
  </section>
</template>

and attached behavior

import {Behavior} from 'aurelia-framework';
import Sortable from 'rubaxa-sortable';

export class SortableAttachedBehavior {
  static metadata() {
    return Behavior
      .attachedBehavior('sortable');
  }

  static inject() {
    return [Element];
  }

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

  bind(viewModel) {
    this.sortable = Sortable.create(this.element);
  }

  unbind() {
    this.sortable.destroy();
    this.sortable = null;
  }
}

As a next step, in addition to reordering the html elements, I also want to reorder the data elements in the model. I can get the necessary dnd events from the sortable instance that I have. My problem is to get a link to the items.

, sub repeat.for, , Repeat . Repeat?

( , )?

,

+4

All Articles