Merge pull request #1460 from evs-chris/gh-1457

Make sure shuffling doesn't cause index changes to propagate to levels referencing a deeper index

src/virtualdom/Fragment/prototype/rebind.js

@@ -2,7 +2,9 @@ import assignNewKeypath from 'virtualdom/items/shared/utils/assignNewKeypath';
 
 export default function Fragment$rebind ( indexRef, newIndex, oldKeypath, newKeypath ) {
 
-	this.index = newIndex;
+	if ( newIndex !== undefined ) {
+		this.index = newIndex;
+	}
 
 	// assign new context keypath if needed
 	assignNewKeypath( this, 'context', oldKeypath, newKeypath );

src/virtualdom/items/Section/_Section.js

@@ -10,6 +10,7 @@ import findComponent from 'virtualdom/items/Section/prototype/findComponent';
 import findNextNode from 'virtualdom/items/Section/prototype/findNextNode';
 import firstNode from 'virtualdom/items/Section/prototype/firstNode';
 import shuffle from 'virtualdom/items/Section/prototype/shuffle';
+import rebind from 'virtualdom/items/Section/prototype/rebind';
 import render from 'virtualdom/items/Section/prototype/render';
 import setValue from 'virtualdom/items/Section/prototype/setValue';
 import toString from 'virtualdom/items/Section/prototype/toString';
@@ -48,7 +49,7 @@ Section.prototype = {
 	firstNode: firstNode,
 	getValue: Mustache.getValue,
 	shuffle: shuffle,
-	rebind: Mustache.rebind,
+	rebind: rebind,
 	render: render,
 	resolve: Mustache.resolve,
 	setValue: setValue,

src/virtualdom/items/Section/prototype/rebind.js

@@ -0,0 +1,14 @@
+import Mustache from 'virtualdom/items/shared/Mustache/_Mustache';
+import types from 'config/types';
+
+export default function( indexRef, newIndex, oldKeypath, newKeypath ) {
+	var ref, idx;
+
+	if ( indexRef !== undefined || this.currentSubtype !== types.SECTION_EACH ) {
+		ref = indexRef;
+		idx = newIndex;
+	}
+
+	// If the new index belonged to us, we'd be shuffling instead
+	Mustache.rebind.call( this, ref, idx, oldKeypath, newKeypath );
+}

src/virtualdom/items/Section/prototype/setValue.js

@@ -78,6 +78,8 @@ function reevaluateSection ( section, value ) {
 	// TODO can this be optimised? i.e. pick an reevaluateSection function during init
 	// and avoid doing this each time?
 	if ( section.subtype ) {
+		section.currentSubtype = section.subtype;
+
 		switch ( section.subtype ) {
 			case types.SECTION_IF:
 			return reevaluateConditionalSection( section, value, false, fragmentOptions );
@@ -105,21 +107,25 @@ function reevaluateSection ( section, value ) {
 
 	// Ordered list section
 	if ( section.ordered ) {
+		section.currentSubtype = types.SECTION_EACH;
 		return reevaluateListSection( section, value, fragmentOptions );
 	}
 
 	// Unordered list, or context
 	if ( isObject( value ) || typeof value === 'function' ) {
 		// Index reference indicates section should be treated as a list
 		if ( section.template.i ) {
+			section.currentSubtype = types.SECTION_EACH;
 			return reevaluateListObjectSection( section, value, fragmentOptions );
 		}
 
 		// Otherwise, object provides context for contents
+		section.currentSubtype = types.SECTION_WITH;
 		return reevaluateContextSection( section, fragmentOptions );
 	}
 
 	// Conditional section
+	section.currentSubtype = types.SECTION_IF;
 	return reevaluateConditionalSection( section, value, false, fragmentOptions );
 }
 
@@ -257,7 +263,7 @@ function reevaluateConditionalSection ( section, value, inverted, fragmentOption
 	if ( doRender ) {
 		if ( !section.length ) {
 			// no change to context stack
-			fragmentOptions.index = 0;
+			fragmentOptions.index = undefined;
 
 			fragment = new Fragment( fragmentOptions );
 			section.fragmentsToRender.push( section.fragments[0] = fragment );

src/virtualdom/items/shared/Resolvers/SpecialResolver.js

@@ -6,34 +6,30 @@ var SpecialResolver = function ( owner, ref, callback ) {
 	this.rebind();
 };
 
+var props = {
+	'@keypath': 'context',
+	'@index': 'index',
+	'@key': 'index'
+};
+
 SpecialResolver.prototype = {
 	rebind: function () {
-		var ref = this.ref, fragment = this.parentFragment;
+		var ref = this.ref, fragment = this.parentFragment, prop = props[ref];
 
-		if ( ref === '@keypath' ) {
-			while ( fragment ) {
-				if ( !!fragment.context ) {
-					return this.callback( '@' + fragment.context );
-				}
-
-				fragment = fragment.parent;
-			}
+		if ( !prop ) {
+			throw new Error( 'Unknown special reference "' + ref + '" - valid references are @index, @key and @keypath' );
 		}
 
-		if ( ref === '@index' || ref === '@key' ) {
-			while ( fragment ) {
-				if ( fragment.index !== undefined ) {
-					return this.callback( '@' + fragment.index );
-				}
-
-				fragment = fragment.parent;
+		while ( fragment ) {
+			if ( fragment[prop] !== undefined ) {
+				return this.callback( '@' + fragment[prop] );
 			}
-		}
 
-		throw new Error( 'Unknown special reference "' + ref + '" - valid references are @index, @key and @keypath' );
+			fragment = fragment.parent;
+		}
 	},
 
 	unbind: function () {} // noop
 };
 
-export default SpecialResolver;
+export default SpecialResolver;

test/modules/rebind.js

@@ -402,6 +402,47 @@ define([
 			t.htmlEqual( fixture.innerHTML, '<p>0:a</p><p>1:b</p><p>2:c</p><p>3:d</p>' );
 		});
 
+		test( 'index rebinds do not go past new index providers (#1457)', function ( t ) {
+			var ractive = new Ractive({
+				el: fixture,
+				template: '{{#each foo}}{{@index}}{{#each .bar}}{{@index}}{{/each}}{{/each}}',
+				data: {
+					foo: [
+						{ bar: [ 1, 2 ] },
+						{ bar: [ 1 ] },
+						{ bar: [ 1, 2, 3, 4 ] }
+					]
+				}
+			});
+
+			t.htmlEqual( fixture.innerHTML, '0011020123' );
+
+			ractive.splice( 'foo', 1, 1 );
+
+			t.htmlEqual( fixture.innerHTML, '00110123' );
+		});
+
+		test( 'index rebinds get passed through conditional sections correctly', t => {
+			var ractive = new Ractive({
+				el: fixture,
+				template: '{{#each foo}}{{@index}}{{#.bar}}{{@index}}{{/}}{{/each}}',
+				data: {
+					foo: [
+						{ bar: true },
+						{ bar: true },
+						{ bar: false },
+						{ bar: true }
+					]
+				}
+			});
+
+			t.htmlEqual( fixture.innerHTML, '0011233' );
+
+			ractive.splice( 'foo', 1, 1 );
+
+			t.htmlEqual( fixture.innerHTML, '00122' );
+		});
+
 	};
 
 });