fix a few corner cases on automatic instance data linking

ractivejs · Jan 25, 2019 · 8455933 · 8455933
1 parent 44f27ce
commit 8455933
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 5 deletions.
diff --git a/src/model/Model.js b/src/model/Model.js
@@ -146,7 +146,9 @@ export default class Model extends ModelBase {
       this.adapt();
     }
 
-    if (this.dataModel) checkDataLink(this, value);
+    if (this.dataModel || (value && value.viewmodel && value.viewmodel.isRoot)) {
+      checkDataLink(this, value);
+    }
 
     // keep track of array stuff
     if (isArray(value)) {
@@ -259,7 +261,9 @@ export default class Model extends ModelBase {
     const old = this.value;
     const value = this.retrieve();
 
-    if (this.dataModel) checkDataLink(this, value);
+    if (this.dataModel || (value && value.viewmodel && value.viewmodel.isRoot)) {
+      checkDataLink(this, value);
+    }
 
     if (force || !isEqual(value, old)) {
       this.value = value;

diff --git a/src/model/ModelBase.js b/src/model/ModelBase.js
@@ -363,12 +363,13 @@ export function shuffle(model, newIndices, link, unsafe) {
 }
 
 export function checkDataLink(model, value) {
-  if (model.dataModel && value !== model.dataModel) {
-    if (value && value.viewmodel && value.viewmodel.isRoot) {
+  if (value !== model.dataModel) {
+    if (value && value.viewmodel && value.viewmodel.isRoot && model.childByKey.data) {
       model.childByKey.data.link(value.viewmodel, 'data');
       model.dataModel = value;
-    } else {
+    } else if (model.dataModel) {
       model.childByKey.data.unlink();
+      model.dataModel = true;
     }
   }
 }
diff --git a/tests/browser/references.js b/tests/browser/references.js
@@ -794,6 +794,23 @@ export default function() {
 
     r.set('child', c2);
     t.equal(fixture.innerHTML, '99');
+
+    c2.set('what', 33);
+    t.equal(fixture.innerHTML, '33');
+
+    r.set('child', null);
+    t.equal(fixture.innerHTML, '');
+
+    r.set('child', c2);
+    t.equal(fixture.innerHTML, '33');
+
+    r.set('child', null);
+    t.equal(fixture.innerHTML, '');
+
+    r.set('child', c1);
+    t.equal(fixture.innerHTML, '42');
+    r.set('child', c2);
+    t.equal(fixture.innerHTML, '33');
   });
 
   test(`automatic linking of instance data in an each`, t => {
@@ -818,4 +835,35 @@ export default function() {
     r.unshift('children', c3);
     t.equal(fixture.innerHTML, '2|99|42|');
   });
+
+  test(`automatic linking with child component and data function`, t => {
+    const cmp = Ractive.extend({
+      data() {
+        return { what: 42 };
+      }
+    });
+
+    new Ractive({
+      target: fixture,
+      template: `<cmp on-init="@.set('@.cmp', $1)" />{{@.cmp.data.what}}`,
+      components: { cmp }
+    });
+
+    t.htmlEqual(fixture.innerHTML, '42');
+  });
+
+  test(`automatic instance linking with oustide updates`, t => {
+    const c1 = new Ractive({ data: { what: 42 } });
+
+    const r = new Ractive({
+      target: fixture,
+      template: '{{@.child.data.what}}'
+    });
+
+    t.htmlEqual(fixture.innerHTML, '');
+
+    r.child = c1;
+    r.update('@.child');
+    t.htmlEqual(fixture.innerHTML, '42');
+  });
 }