index.js

var observe = require('array-observer');

module.exports = function(View) {
  View.directive('each', {
    bind: function(el){
      this.View = View.create(el.innerHTML);
      el.innerHTML = '';
      this.previous = {};
    },
    update: function(items, el, view){
      var Child = this.View;
      var self = this;
      var replacing = false;
      el.innerHTML = '';

      // The new value isn't an array.
      if(Array.isArray(items) === false) {
        throw new Error(items + ' should be an array');
      }

      // remove the previous emitter so that we don't
      // keep watching the old array for changes
      if(this.previous.emitter) {
        this.previous.emitter.off();
      }

      // Destroy any old views
      if(this.previous.items) {
        this.previous.items.forEach(function(view){
          view.destroy();
        });
      }

      function reposition() {
        items.forEach(function(view, i){
          view.set('$index', i).appendTo(self.node);
        });
      }

      function createViewFromValue(item, i) {
        var data = {};
        if(typeof item === 'object') data = item;
        data.$index = i;
        data.$value = item;
        var child = new Child({
          owner: view,
          scope: view,
          data: data
        });
        return child;
      }

      // Replace all objects in the array with views
      items.forEach(function(obj, index){
        var view = createViewFromValue(obj, index);
        items.splice(index, 1, view);
      });

      // Watch the array for changes
      var emitter = observe(items);

      // Items are added to the array
      emitter.on('add', function(item, index){
        if(replacing) return;
        var view = createViewFromValue(item, index);
        replacing = true;
        items.splice(index, 1, view);
        replacing = false;
        reposition();
      });

      // Items are removed from the array
      emitter.on('remove', function(view){
        if(view instanceof Child) {
          view.destroy();
          reposition();
        }
      });

      // Re-render everything on a sort
      emitter.on('sort', function(){
        reposition();
      });

      // Add all of the views to the DOM immediately
      reposition();

      // Store it so that we can destroy all of the views
      // if the array is changed
      this.previous.items = items;
      this.previous.emitter = emitter;
    },
    unbind: function(){
      if(this.previous.emitter) {
        this.previous.emitter.off();
      }
      if(this.previous.items) {
        this.previous.items.forEach(function(view){
          view.destroy();
        });
      }
      this.previous = {};
    }
  });
}