do a shuffle notification when a reference expression changes paths

src/model/LinkModel.js

@@ -156,6 +156,8 @@ export default class LinkModel extends ModelBase {
       c.relinking(target.joinKey(c.key), safe);
     });
 
+    if (!safe) this.keypath = undefined;
+
     if (this.rootLink)
       this.addShuffleTask(() => {
         this.relinked();

src/view/items/Element.js

@@ -6,7 +6,7 @@ import { escapeHtml, voidElements } from 'utils/html';
 import { createElement, detachNode, matches, safeAttributeString } from 'utils/dom';
 import runloop from 'src/global/runloop';
 import Context from 'shared/Context';
-import { destroyed } from 'shared/methodCallers';
+import { destroyed, shuffled } from 'shared/methodCallers';
 import { ContainerItem } from './shared/Item';
 import Fragment from '../Fragment';
 import ConditionalAttribute from './element/ConditionalAttribute';
@@ -380,6 +380,11 @@ export default class Element extends ContainerItem {
     this.rendered = true;
   }
 
+  shuffled() {
+    super.shuffled();
+    this.decorators.forEach(shuffled);
+  }
+
   toString() {
     const tagName = this.template.e;
 

src/view/items/element/Decorator.js

@@ -94,6 +94,10 @@ export default class Decorator {
     }, true);
   }
 
+  shuffled() {
+    if (this.handle && this.handle.shuffled) this.handle.shuffled();
+  }
+
   toString() {
     return '';
   }

src/view/resolvers/ReferenceExpressionProxy.js

@@ -98,6 +98,7 @@ export default class ReferenceExpressionProxy extends LinkModel {
         this.relinking(model);
         fireShuffleTasks();
         refreshPathDeps(this);
+        this.fragment.shuffled();
       }
     };
 

tests/browser/plugins/decorators.js

@@ -739,4 +739,40 @@ export default function() {
       target: fixture
     });
   });
+
+  test(`decorators are notified of shuffling due to reference expression changes`, t => {
+    t.expect(4);
+
+    let path, child;
+    const r = new Ractive({
+      target: fixture,
+      template: `{{#with foo[bar]}}<div as-check />{{/with}}`,
+      data: {
+        bar: 'baz',
+        foo: {
+          baz: {},
+          bat: {}
+        }
+      },
+      decorators: {
+        check(node) {
+          const ctx = this.getContext(node);
+          path = ctx.resolve();
+          child = ctx.resolve('.foo');
+          return {
+            teardown() {},
+            shuffled() {
+              path = ctx.resolve();
+              child = ctx.resolve('.foo');
+            }
+          };
+        }
+      }
+    });
+    t.equal(path, 'foo.baz');
+    t.equal(child, 'foo.baz.foo');
+    r.set('bar', 'bat');
+    t.equal(path, 'foo.bat');
+    t.equal(child, 'foo.bat.foo');
+  });
 }