jnslxndr/jsbin.xeqag.css

## jsbin.xeqag.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

li {
  margin-bottom: 1em;
}

## jsbin.xeqag.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/release/ember.min.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Interconnected Sort</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <span {{action "add"}}>ADD 1 item</span><br>
    <span {{action "addMulti" 100}}>ADD Many</span><br>
    {{#collection App.SceneListView contentBinding="controller" tagName="ul"}}
      <span class="id" {{bind-attr data-id=id}}></span>
      [{{index}}] {{this}}
        <a href="" {{action "deleteScene" this}}>REMOVE</a>
        <a href="" {{action "add" "before" this}}>Add 1 before</a>
        <a href="" {{action "add" "after" this}}>Add 1 after</a>
        {{name}} ({{id}}): <br>
        Triggers({{triggers.length}}): <br>

        <ul>
        {{#each triggers}}
          <li>Trigger {{this}}: {{name}} <br>
          {{view Ember.Select
            content=controller.arrangedContent
            value=this.target
            optionLabelPath="content.selectName"
            prompt="Please select a scene"
          }}
          {{#if this.target}}
          Target: {{this.name}} ({{target}} - {{target.index}})
          {{else}}
            No Target set.
          {{/if}}
          </li>
        {{/each}}
        </ul>
    {{/collection}}
  </script>
</body>
</html>

## jsbin.xeqag.js
App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.SceneCounter = 0;

// Model definitions
App.Scene = Ember.Object.extend({
  name: null,
  triggers: null,
  setTriggers: function(){
    this.set('triggers',Ember.ArrayController.create({
      content: Ember.A([ App.Trigger.create({ name: "trigger 1" }) ])
    }));
    this.set('id', "SCENE-"+App.SceneCounter);
    App.SceneCounter += 1;
  }.on('init'),
  willDestroy: function() {
    this.get('triggers').invoke('destroy');
    this.get('triggers').destroy();
    // we need to use our own destroy flag, otherwise it will fail
    this.set('caution', true);
  },
  selectName: function(){
    return this.get('name') + " (" + this.get('index') + ")";
  }.property('index','name').readOnly()
});

App.Trigger = Ember.Object.extend({
  name: null,
  goto: null,
  test: function() {
    console.log("target caution changed",this.get('target'));
    // without this the related data will stay in memory....
    if(this.get('target.caution') === true) this.set('target',null);
  }.observes('target.caution')
});

var Scenes = [
  {
    name: "scene 1"
  },
  {
    name: "scene 2"
  }
];

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var scenes = Scenes.map(function(s,i){
      s.index = i;
      s.triggers = [];
      return App.Scene.create(s);
    });
    //scene_1 = scenes.get('firstObject');
    //scene_2 = scenes.get('lastObject');
    //scene_1.get('triggers.firstObject').set('target', scenes.get('lastObject'));
    return scenes;
  }
});

App.SceneController = Ember.ObjectController.extend({
});

App.IndexController = Ember.ArrayController.extend({
  sortProperties: ['index'],
  itemController: 'scene',
  actions: {
    deleteScene: function(scene) {
      // use arrangedContent to trigger update of rendering
      this.get('content').removeObject(scene);
      scene.destroy();
      this.updateIndex();
    },
    reorder: function(new_order) {
      this.beginPropertyChanges();
      this.get('arrangedContent').forEach(function(scene, index){
        if(scene.get('index') != index)
          scene.set('index',new_order[scene.get('id')]);
      });
      this.endPropertyChanges();
    },
    add: function(direction, scene){
      this.enumerableContentWillChange();
      var position;
      if (direction !== undefined && scene !== undefined) {
        position = direction == "before" ? scene.get('index') : scene.get('index')+1;
      } else {
        position = 0;
      }
      this.pushObject(App.Scene.create({name: "new scene", index: position}));
      this.enumerableContentDidChange(1);
      this.updateIndex();
    },
    addMulti: function(num){
      //this.arrayContentWillChange(0,0,num);
      for(var i = 0; i < num; i++){
        this.pushObject(App.Scene.create({name: "new scene", index: i}));
      }
      //this.arrayContentDidChange();
      this.updateIndex();
    }
  },
  // auto index:
  updateIndex: function() {
    this.beginPropertyChanges();
    this.get('arrangedContent').forEach(function(scene, index){
      scene.set('index',index);
    });
    this.endPropertyChanges();
  }
});


App.SceneListView = Ember.CollectionView.extend({
  didInsertElement: function(){
    var controller = this.get('controller');
    var view = this;
    this.$().disableSelection();
    this.$().sortable({
      update: function(e,ui) {
        var new_order = {};
        view.$('span.id').each(function(index){
          new_order[$(this).data('id')] = index;
        });
        view.$().sortable('cancel');
        Ember.run(function(){
          controller.send('reorder', new_order);
        });
      }
    });
  }
});
	/* Put your CSS here */
	html, body {
	margin: 20px;
	}

	li {
	margin-bottom: 1em;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="http://builds.emberjs.com/release/ember.min.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Interconnected Sort</h2>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	<span {{action "add"}}>ADD 1 item</span><br>
	<span {{action "addMulti" 100}}>ADD Many</span><br>
	{{#collection App.SceneListView contentBinding="controller" tagName="ul"}}
	<span class="id" {{bind-attr data-id=id}}></span>
	[{{index}}] {{this}}
	<a href="" {{action "deleteScene" this}}>REMOVE</a>
	<a href="" {{action "add" "before" this}}>Add 1 before</a>
	<a href="" {{action "add" "after" this}}>Add 1 after</a>
	{{name}} ({{id}}): <br>
	Triggers({{triggers.length}}): <br>

	<ul>
	{{#each triggers}}
	<li>Trigger {{this}}: {{name}} <br>
	{{view Ember.Select
	content=controller.arrangedContent
	value=this.target
	optionLabelPath="content.selectName"
	prompt="Please select a scene"
	}}
	{{#if this.target}}
	Target: {{this.name}} ({{target}} - {{target.index}})
	{{else}}
	No Target set.
	{{/if}}
	</li>
	{{/each}}
	</ul>
	{{/collection}}
	</script>
	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	// put your routes here
	});

	App.SceneCounter = 0;

	// Model definitions
	App.Scene = Ember.Object.extend({
	name: null,
	triggers: null,
	setTriggers: function(){
	this.set('triggers',Ember.ArrayController.create({
	content: Ember.A([ App.Trigger.create({ name: "trigger 1" }) ])
	}));
	this.set('id', "SCENE-"+App.SceneCounter);
	App.SceneCounter += 1;
	}.on('init'),
	willDestroy: function() {
	this.get('triggers').invoke('destroy');
	this.get('triggers').destroy();
	// we need to use our own destroy flag, otherwise it will fail
	this.set('caution', true);
	},
	selectName: function(){
	return this.get('name') + " (" + this.get('index') + ")";
	}.property('index','name').readOnly()
	});

	App.Trigger = Ember.Object.extend({
	name: null,
	goto: null,
	test: function() {
	console.log("target caution changed",this.get('target'));
	// without this the related data will stay in memory....
	if(this.get('target.caution') === true) this.set('target',null);
	}.observes('target.caution')
	});

	var Scenes = [
	{
	name: "scene 1"
	},
	{
	name: "scene 2"
	}
	];

	App.IndexRoute = Ember.Route.extend({
	model: function() {
	var scenes = Scenes.map(function(s,i){
	s.index = i;
	s.triggers = [];
	return App.Scene.create(s);
	});
	//scene_1 = scenes.get('firstObject');
	//scene_2 = scenes.get('lastObject');
	//scene_1.get('triggers.firstObject').set('target', scenes.get('lastObject'));
	return scenes;
	}
	});

	App.SceneController = Ember.ObjectController.extend({
	});

	App.IndexController = Ember.ArrayController.extend({
	sortProperties: ['index'],
	itemController: 'scene',
	actions: {
	deleteScene: function(scene) {
	// use arrangedContent to trigger update of rendering
	this.get('content').removeObject(scene);
	scene.destroy();
	this.updateIndex();
	},
	reorder: function(new_order) {
	this.beginPropertyChanges();
	this.get('arrangedContent').forEach(function(scene, index){
	if(scene.get('index') != index)
	scene.set('index',new_order[scene.get('id')]);
	});
	this.endPropertyChanges();
	},
	add: function(direction, scene){
	this.enumerableContentWillChange();
	var position;
	if (direction !== undefined && scene !== undefined) {
	position = direction == "before" ? scene.get('index') : scene.get('index')+1;
	} else {
	position = 0;
	}
	this.pushObject(App.Scene.create({name: "new scene", index: position}));
	this.enumerableContentDidChange(1);
	this.updateIndex();
	},
	addMulti: function(num){
	//this.arrayContentWillChange(0,0,num);
	for(var i = 0; i < num; i++){
	this.pushObject(App.Scene.create({name: "new scene", index: i}));
	}
	//this.arrayContentDidChange();
	this.updateIndex();
	}
	},
	// auto index:
	updateIndex: function() {
	this.beginPropertyChanges();
	this.get('arrangedContent').forEach(function(scene, index){
	scene.set('index',index);
	});
	this.endPropertyChanges();
	}
	});


	App.SceneListView = Ember.CollectionView.extend({
	didInsertElement: function(){
	var controller = this.get('controller');
	var view = this;
	this.$().disableSelection();
	this.$().sortable({
	update: function(e,ui) {
	var new_order = {};
	view.$('span.id').each(function(index){
	new_order[$(this).data('id')] = index;
	});
	view.$().sortable('cancel');
	Ember.run(function(){
	controller.send('reorder', new_order);
	});
	}
	});
	}
	});