From 8c036b99e393a7169123c1be08cb446fc4d10781 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Mon, 2 Sep 2019 13:37:55 +0900
Subject: [PATCH 1/6] [CLEANUP] Refactor tests away from implicit `this`

Cleaned up a bunch of tests to use `{{this.model}}` explicitly, as opposed to
the implicit `{{model}}`.

Most of these tests just so happened to use a context variable named `model`,
but otherwise has nothing to do with controllers or routing. They probably can
be further refactored to use a different name altogether to avoid confusion.

Also took the opportunity to convert things into async functions in several
places.
---
 .../angle-bracket-invocation-test.js          |  4 +-
 .../components/attribute-bindings-test.js     |  2 +-
 .../components/class-bindings-test.js         |  2 +-
 .../components/contextual-components-test.js  | 57 ++++++++++---------
 .../components/curly-components-test.js       |  8 +--
 .../integration/components/life-cycle-test.js | 20 +++----
 .../components/textarea-angle-test.js         |  4 +-
 .../components/textarea-curly-test.js         |  4 +-
 .../glimmer/tests/integration/content-test.js | 35 ++++++------
 .../tests/integration/helpers/-class-test.js  |  2 +-
 .../tests/integration/helpers/array-test.js   | 15 ++---
 .../tests/integration/helpers/concat-test.js  |  6 +-
 .../integration/helpers/custom-helper-test.js | 12 ++--
 .../helpers/element-action-test.js            |  2 +-
 .../tests/integration/helpers/hash-test.js    | 12 ++--
 .../tests/integration/helpers/mut-test.js     | 15 +++--
 .../tests/integration/helpers/partial-test.js | 20 +++----
 .../tests/integration/helpers/tracked-test.js |  4 +-
 .../tests/integration/helpers/unbound-test.js | 22 +++----
 .../glimmer/tests/integration/input-test.js   |  2 +-
 .../glimmer/tests/integration/svg-test.js     |  8 +--
 .../tests/integration/syntax/each-test.js     | 14 ++---
 .../tests/routing/decoupled_basic_test.js     | 56 ++++++++----------
 23 files changed, 165 insertions(+), 161 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
index 037f54da93e..40cf897a6c8 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
@@ -418,7 +418,7 @@ moduleFor(
         template: '{{@foo}}',
       });
 
-      this.render('<FooBar @foo={{model.bar}} />', {
+      this.render('<FooBar @foo={{this.model.bar}} />', {
         model: {
           bar: 'Hola',
         },
@@ -444,7 +444,7 @@ moduleFor(
         template: '{{foo}}',
       });
 
-      this.render('<FooBar @foo={{model.bar}} />', {
+      this.render('<FooBar @foo={{this.model.bar}} />', {
         model: {
           bar: 'Hola',
         },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/attribute-bindings-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/attribute-bindings-test.js
index ea7b83dc9f6..238b6e70552 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/attribute-bindings-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/attribute-bindings-test.js
@@ -66,7 +66,7 @@ moduleFor(
         template: 'hello',
       });
 
-      this.render('{{foo-bar foo=model.foo baz=model.baz}}', {
+      this.render('{{foo-bar foo=this.model.foo baz=this.model.baz}}', {
         model: { foo: undefined, baz: { bar: 'bar' } },
       });
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js
index 91878aeed43..80634cec759 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js
@@ -82,7 +82,7 @@ moduleFor(
         template: 'hello',
       });
 
-      this.render('{{foo-bar joker=model.wat batman=model.super}}', {
+      this.render('{{foo-bar joker=this.model.wat batman=this.model.super}}', {
         model: { wat: false, super: { robin: true } },
       });
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
index e6bb9c711f0..e44812e0b85 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
@@ -51,7 +51,7 @@ moduleFor(
         template: '{{#each params as |p|}}{{p}}{{/each}}',
       });
 
-      this.render('{{component (component "-looked-up" model.greeting model.name)}}', {
+      this.render('{{component (component "-looked-up" this.model.greeting this.model.name)}}', {
         model: {
           greeting: 'Gabon ',
           name: 'Zack',
@@ -87,7 +87,7 @@ moduleFor(
       });
 
       this.render(
-        '{{component (component "-looked-up" model.greeting model.name) model.name model.greeting}}',
+        '{{component (component "-looked-up" this.model.greeting this.model.name) this.model.name this.model.greeting}}',
         {
           model: {
             greeting: 'Gabon ',
@@ -123,12 +123,15 @@ moduleFor(
         template: '{{#each params as |p|}}{{p}}{{/each}}',
       });
 
-      this.render('{{component (component (component "-looked-up" model.greeting model.name))}}', {
-        model: {
-          greeting: 'Gabon ',
-          name: 'Zack',
-        },
-      });
+      this.render(
+        '{{component (component (component "-looked-up" this.model.greeting this.model.name))}}',
+        {
+          model: {
+            greeting: 'Gabon ',
+            name: 'Zack',
+          },
+        }
+      );
 
       this.assertText('Gabon Zack');
 
@@ -158,7 +161,7 @@ moduleFor(
       });
 
       this.render(
-        '{{component (component (component "-looked-up" model.greeting model.name) model.name model.greeting)}}',
+        '{{component (component (component "-looked-up" this.model.greeting this.model.name) this.model.name this.model.greeting)}}',
         {
           model: {
             greeting: 'Gabon ',
@@ -214,7 +217,7 @@ moduleFor(
         template: 'Namaste',
       });
 
-      this.render('{{component (component model.lookupComponent)}}', {
+      this.render('{{component (component this.model.lookupComponent)}}', {
         model: {
           lookupComponent: '-mandarin',
         },
@@ -240,7 +243,7 @@ moduleFor(
         template: '{{greeting}}',
       });
 
-      this.render(`{{component (component "-looked-up" greeting=model.greeting)}}`, {
+      this.render(`{{component (component "-looked-up" greeting=this.model.greeting)}}`, {
         model: {
           greeting: 'Hodi',
         },
@@ -268,7 +271,7 @@ moduleFor(
 
       this.render(
         strip`
-      {{#with (hash comp=(component "-looked-up" greeting=model.greeting)) as |my|}}
+      {{#with (hash comp=(component "-looked-up" greeting=this.model.greeting)) as |my|}}
         {{#my.comp}}{{/my.comp}}
       {{/with}}`,
         {
@@ -338,7 +341,7 @@ moduleFor(
         strip`
       {{#with (component "-looked-up" greeting="Hola" name="Dolores" age=33) as |first|}}
         {{#with (component first greeting="Hej" name="Sigmundur") as |second|}}
-          {{component second greeting=model.greeting}}
+          {{component second greeting=this.model.greeting}}
         {{/with}}
       {{/with}}`,
         {
@@ -379,7 +382,7 @@ moduleFor(
       });
 
       this.render(
-        '{{component "-inner-component" (component "-looked-up" model.outerName model.outerAge)}}',
+        '{{component "-inner-component" (component "-looked-up" this.model.outerName this.model.outerAge)}}',
         {
           model: {
             outerName: 'Outer',
@@ -425,7 +428,7 @@ moduleFor(
       });
 
       this.render(
-        '{{component "-inner-component" (component "-looked-up" name=model.outerName age=model.outerAge)}}',
+        '{{component "-inner-component" (component "-looked-up" name=this.model.outerName age=this.model.outerAge)}}',
         {
           model: {
             outerName: 'Outer',
@@ -468,7 +471,7 @@ moduleFor(
         template: '{{greeting}} {{name}}',
       });
 
-      this.render('{{component (component "-looked-up" model.name greeting="Hodi")}}', {
+      this.render('{{component (component "-looked-up" this.model.name greeting="Hodi")}}', {
         model: {
           name: 'Hodari',
         },
@@ -622,7 +625,7 @@ moduleFor(
       this.render(
         strip`
       {{#with (hash lookedup=(component "-looked-up")) as |object|}}
-        {{object.lookedup expectedText=model.expectedText}}
+        {{object.lookedup expectedText=this.model.expectedText}}
       {{/with}}`,
         {
           model: {
@@ -654,7 +657,7 @@ moduleFor(
 
       this.render(
         strip`
-      {{#with (hash lookedup=(component "-looked-up" expectedText=model.expectedText)) as |object|}}
+      {{#with (hash lookedup=(component "-looked-up" expectedText=this.model.expectedText)) as |object|}}
         {{object.lookedup}}
       {{/with}}`,
         {
@@ -692,7 +695,7 @@ moduleFor(
       this.render(
         strip`
       {{#with (hash lookedup=(component "-looked-up")) as |object|}}
-        {{object.lookedup model.expectedText "Hola"}}
+        {{object.lookedup this.model.expectedText "Hola"}}
       {{/with}}`,
         {
           model: {
@@ -774,7 +777,7 @@ moduleFor(
         <button onclick={{action 'changeValue'}}>Change value</button>`,
       });
 
-      this.render('{{my-action-component myProp=model.myProp}}', {
+      this.render('{{my-action-component myProp=this.model.myProp}}', {
         model: {
           myProp: 1,
         },
@@ -839,8 +842,8 @@ moduleFor(
 
       this.render(
         strip`
-      {{component (component "change-button" model.val2)}}
-      <span class="value">{{model.val2}}</span>`,
+      {{component (component "change-button" this.model.val2)}}
+      <span class="value">{{this.model.val2}}</span>`,
         {
           model: {
             val2: 8,
@@ -1363,7 +1366,7 @@ moduleFor(
 class ContextualComponentMutableParamsTest extends RenderingTestCase {
   render(templateStr, context = {}) {
     super.render(
-      `${templateStr}<span class="value">{{model.val2}}</span>`,
+      `${templateStr}<span class="value">{{this.model.val2}}</span>`,
       assign(context, { model: { val2: 8 } })
     );
   }
@@ -1413,7 +1416,7 @@ applyMixins(
     {
       title: 'param',
       setup() {
-        this.render('{{component (component "change-button" model.val2)}}');
+        this.render('{{component (component "change-button" this.model.val2)}}');
       },
     },
 
@@ -1427,7 +1430,7 @@ applyMixins(
           template: '{{component components.comp}}',
         });
 
-        this.render('{{my-comp (hash comp=(component "change-button" model.val2))}}');
+        this.render('{{my-comp (hash comp=(component "change-button" this.model.val2))}}');
       },
     },
 
@@ -1438,7 +1441,7 @@ applyMixins(
           template: '{{component component}}',
         });
 
-        this.render('{{my-comp component=(component "change-button" val=model.val2)}}');
+        this.render('{{my-comp component=(component "change-button" val=this.model.val2)}}');
       },
     },
 
@@ -1450,7 +1453,7 @@ applyMixins(
         });
 
         this.render(
-          '{{my-comp components=(hash button=(component "change-button" val=model.val2))}}'
+          '{{my-comp components=(hash button=(component "change-button" val=this.model.val2))}}'
         );
       },
     },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
index cb0c3dde880..dfd78aef171 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -429,7 +429,7 @@ moduleFor(
     ['@test should apply classes of the dasherized property name when bound property specified is true']() {
       this.registerComponent('foo-bar', { template: 'hello' });
 
-      this.render('{{foo-bar class=model.someTruth}}', {
+      this.render('{{foo-bar class=this.model.someTruth}}', {
         model: { someTruth: true },
       });
 
@@ -688,7 +688,7 @@ moduleFor(
         template: '{{@foo}}',
       });
 
-      this.render('{{foo-bar foo=model.bar}}', {
+      this.render('{{foo-bar foo=this.model.bar}}', {
         model: {
           bar: 'Hola',
         },
@@ -714,7 +714,7 @@ moduleFor(
         template: '{{foo}}',
       });
 
-      this.render('{{foo-bar foo=model.bar}}', {
+      this.render('{{foo-bar foo=this.model.bar}}', {
         model: {
           bar: 'Hola',
         },
@@ -1478,7 +1478,7 @@ moduleFor(
       `,
       });
 
-      this.render('{{foo-bar value=model.value items=model.items}}', {
+      this.render('{{foo-bar value=this.model.value items=this.model.items}}', {
         model: {
           value: 'wat',
           items: [1, 2, 3],
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
index b62e9ff3951..295a507c72f 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
@@ -1465,16 +1465,16 @@ moduleFor(
 
       this.render(
         strip`
-      {{#each items as |item|}}
-        {{#parent-component itemId=item.id}}{{item.id}}{{/parent-component}}
-      {{/each}}
-      {{#if model.shouldShow}}
-        {{#parent-component itemId=6}}6{{/parent-component}}
-      {{/if}}
-      {{#if model.shouldShow}}
-        {{#parent-component itemId=7}}7{{/parent-component}}
-      {{/if}}
-    `,
+        {{#each items as |item|}}
+          {{#parent-component itemId=item.id}}{{item.id}}{{/parent-component}}
+        {{/each}}
+        {{#if this.model.shouldShow}}
+          {{#parent-component itemId=6}}6{{/parent-component}}
+        {{/if}}
+        {{#if this.model.shouldShow}}
+          {{#parent-component itemId=7}}7{{/parent-component}}
+        {{/if}}
+        `,
         {
           items: array,
           model: { shouldShow: true },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
index 97a1a025fa6..592107c7143 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
@@ -150,7 +150,7 @@ moduleFor(
     }
 
     ['@test Should bind its contents to the specified @value']() {
-      this.render('<Textarea @value={{model.val}} />', {
+      this.render('<Textarea @value={{this.model.val}} />', {
         model: { val: 'A beautiful day in Seattle' },
       });
       this.assertTextArea({ value: 'A beautiful day in Seattle' });
@@ -181,7 +181,7 @@ moduleFor(
     }
 
     ['@test should update the @value for `cut` / `input` / `change` events']() {
-      this.render('<Textarea @value={{model.val}} />', {
+      this.render('<Textarea @value={{this.model.val}} />', {
         model: { val: 'A beautiful day in Seattle' },
       });
       this.assertTextArea({ value: 'A beautiful day in Seattle' });
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
index dbaf53a3db3..18636e19692 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
@@ -102,7 +102,7 @@ moduleFor(
     }
 
     ['@test Should bind its contents to the specified value']() {
-      this.render('{{textarea value=model.val}}', {
+      this.render('{{textarea value=this.model.val}}', {
         model: { val: 'A beautiful day in Seattle' },
       });
       this.assertTextArea({ value: 'A beautiful day in Seattle' });
@@ -133,7 +133,7 @@ moduleFor(
     }
 
     ['@test should update the value for `cut` / `input` / `change` events']() {
-      this.render('{{textarea value=model.val}}', {
+      this.render('{{textarea value=this.model.val}}', {
         model: { val: 'A beautiful day in Seattle' },
       });
       this.assertTextArea({ value: 'A beautiful day in Seattle' });
diff --git a/packages/@ember/-internals/glimmer/tests/integration/content-test.js b/packages/@ember/-internals/glimmer/tests/integration/content-test.js
index f500dcbdb35..1d04465daab 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/content-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/content-test.js
@@ -1058,7 +1058,7 @@ moduleFor(
     }
 
     ['@test can set dynamic href']() {
-      this.render('<a href={{model.url}}>Example</a>', {
+      this.render('<a href={{this.model.url}}>Example</a>', {
         model: {
           url: 'http://example.com',
         },
@@ -1160,7 +1160,7 @@ moduleFor(
     }
 
     ['@test unquoted class attribute can contain multiple classes']() {
-      this.render('<div class={{model.classes}}>hello</div>', {
+      this.render('<div class={{this.model.classes}}>hello</div>', {
         model: {
           classes: 'foo bar baz',
         },
@@ -1198,7 +1198,7 @@ moduleFor(
     }
 
     ['@test unquoted class attribute']() {
-      this.render('<div class={{model.foo}}>hello</div>', {
+      this.render('<div class={{this.model.foo}}>hello</div>', {
         model: {
           foo: 'foo',
         },
@@ -1236,7 +1236,7 @@ moduleFor(
     }
 
     ['@test quoted class attribute']() {
-      this.render('<div class="{{model.foo}}">hello</div>', {
+      this.render('<div class="{{this.model.foo}}">hello</div>', {
         model: {
           foo: 'foo',
         },
@@ -1274,7 +1274,7 @@ moduleFor(
     }
 
     ['@test quoted class attribute can contain multiple classes']() {
-      this.render('<div class="{{model.classes}}">hello</div>', {
+      this.render('<div class="{{this.model.classes}}">hello</div>', {
         model: {
           classes: 'foo bar baz',
         },
@@ -1312,13 +1312,16 @@ moduleFor(
     }
 
     ['@test class attribute concats bound values']() {
-      this.render('<div class="{{model.foo}} {{model.bar}} {{model.bizz}}">hello</div>', {
-        model: {
-          foo: 'foo',
-          bar: 'bar',
-          bizz: 'bizz',
-        },
-      });
+      this.render(
+        '<div class="{{this.model.foo}} {{this.model.bar}} {{this.model.bizz}}">hello</div>',
+        {
+          model: {
+            foo: 'foo',
+            bar: 'bar',
+            bizz: 'bizz',
+          },
+        }
+      );
 
       this.assertElement(this.firstChild, {
         tagName: 'div',
@@ -1367,7 +1370,7 @@ moduleFor(
 
     ['@test class attribute accepts nested helpers, and updates']() {
       this.render(
-        `<div class="{{if model.hasSize model.size}} {{if model.hasShape model.shape}}">hello</div>`,
+        `<div class="{{if this.model.hasSize this.model.size}} {{if this.model.hasShape this.model.shape}}">hello</div>`,
         {
           model: {
             size: 'large',
@@ -1426,7 +1429,7 @@ moduleFor(
 
     ['@test Multiple dynamic classes']() {
       this.render(
-        '<div class="{{model.foo}} {{model.bar}} {{model.fizz}} {{model.baz}}">hello</div>',
+        '<div class="{{this.model.foo}} {{this.model.bar}} {{this.model.fizz}} {{this.model.baz}}">hello</div>',
         {
           model: {
             foo: 'foo',
@@ -1479,7 +1482,7 @@ moduleFor(
     }
 
     ['@test classes are ordered: See issue #9912']() {
-      this.render('<div class="{{model.foo}}  static   {{model.bar}}">hello</div>', {
+      this.render('<div class="{{this.model.foo}}  static   {{this.model.bar}}">hello</div>', {
         model: {
           foo: 'foo',
           bar: 'bar',
@@ -1557,7 +1560,7 @@ moduleFor(
   'Inline style tests',
   class extends StyleTest {
     ['@test can set dynamic style']() {
-      this.render('<div style={{model.style}}></div>', {
+      this.render('<div style={{this.model.style}}></div>', {
         model: {
           style: htmlSafe('width: 60px;'),
         },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/-class-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/-class-test.js
index 02aaf924269..04154584056 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/-class-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/-class-test.js
@@ -40,7 +40,7 @@ moduleFor(
 
     ['@tests casts leaf path of binding to dasherized class']() {
       this.registerComponent('foo-bar', { template: '' });
-      this.render(`{{foo-bar class=(-class model.someTruth "someTruth")}}`, {
+      this.render(`{{foo-bar class=(-class this.model.someTruth "someTruth")}}`, {
         model: {
           someTruth: true,
         },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/array-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/array-test.js
index c4553483c6c..e30ea6725ee 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/array-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/array-test.js
@@ -137,7 +137,7 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (hash people=(array model.personOne))}}`,
+        template: `{{yield (hash people=(array this.model.personOne))}}`,
       });
 
       this.render(strip`
@@ -176,15 +176,16 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (hash people=(array model.personOne personTwo))}}`,
+        template: `{{yield (hash people=(array this.model.personOne personTwo))}}`,
       });
 
       this.render(
-        strip`{{#foo-bar personTwo=model.personTwo as |values|}}
-              {{#each values.people as |personName|}}
-                {{personName}},
-              {{/each}}
-            {{/foo-bar}}`,
+        strip`
+        {{#foo-bar personTwo=this.model.personTwo as |values|}}
+          {{#each values.people as |personName|}}
+            {{personName}},
+          {{/each}}
+        {{/foo-bar}}`,
         {
           model: { personTwo: 'Tom' },
         }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/concat-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/concat-test.js
index c7aa66f5de0..1bd11730838 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/concat-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/concat-test.js
@@ -11,7 +11,7 @@ moduleFor(
     }
 
     ['@test it updates for bound arguments']() {
-      this.render(`{{concat model.first model.second}}`, {
+      this.render(`{{concat this.model.first this.model.second}}`, {
         model: { first: 'one', second: 'two' },
       });
 
@@ -36,7 +36,7 @@ moduleFor(
 
     ['@test it can be used as a sub-expression']() {
       this.render(
-        `{{concat (concat model.first model.second) (concat model.third model.fourth)}}`,
+        `{{concat (concat this.model.first this.model.second) (concat this.model.third this.model.fourth)}}`,
         {
           model: {
             first: 'one',
@@ -80,7 +80,7 @@ moduleFor(
       this.registerHelper('x-eq', ([actual, expected]) => actual === expected);
 
       this.render(
-        `{{#if (x-eq (concat model.first model.second) "onetwo")}}Truthy!{{else}}False{{/if}}`,
+        `{{#if (x-eq (concat this.model.first this.model.second) "onetwo")}}Truthy!{{else}}False{{/if}}`,
         {
           model: {
             first: 'one',
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/custom-helper-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/custom-helper-test.js
index 5f7d5901969..f5ecb773ac7 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/custom-helper-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/custom-helper-test.js
@@ -209,7 +209,7 @@ moduleFor(
         return hash.model;
       });
 
-      this.render(`{{get (hello-world model=model) 'name'}}`, {
+      this.render(`{{get (hello-world model=this.model) 'name'}}`, {
         model: { name: 'bob' },
       });
 
@@ -224,7 +224,7 @@ moduleFor(
         return `${value}-value`;
       });
 
-      this.render('{{hello-world model.name}}', {
+      this.render('{{hello-world this.model.name}}', {
         model: { name: 'bob' },
       });
 
@@ -266,7 +266,7 @@ moduleFor(
         },
       });
 
-      this.render('{{hello-world model.name}}', {
+      this.render('{{hello-world this.model.name}}', {
         model: { name: 'bob' },
       });
 
@@ -299,7 +299,7 @@ moduleFor(
         return `params: ${JSON.stringify(_params)}, hash: ${JSON.stringify(_hash)}`;
       });
 
-      this.render('{{hello-world model.name "rich" first=model.age last="sam"}}', {
+      this.render('{{hello-world this.model.name "rich" first=this.model.age last="sam"}}', {
         model: {
           name: 'bob',
           age: 42,
@@ -332,7 +332,7 @@ moduleFor(
         },
       });
 
-      this.render('{{hello-world model.name "rich" first=model.age last="sam"}}', {
+      this.render('{{hello-world this.model.name "rich" first=this.model.age last="sam"}}', {
         model: {
           name: 'bob',
           age: 42,
@@ -368,7 +368,7 @@ moduleFor(
       this.render(
         `{{join-words "Who"
                    (join-words "overcomes" "by")
-                   model.reason
+                   this.model.reason
                    (join-words (join-words "hath overcome but" "half"))
                    (join-words "his" (join-words "foe"))}}`,
         { model: { reason: 'force' } }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/element-action-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/element-action-test.js
index 74eedad04d2..9917d1d6617 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/element-action-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/element-action-test.js
@@ -1095,7 +1095,7 @@ moduleFor(
 
       this.registerComponent('example-component', {
         ComponentClass: ExampleComponent,
-        template: '<button {{action "edit" "herp" model}}>click me</button>',
+        template: '<button {{action "edit" "herp" this.model}}>click me</button>',
       });
 
       this.render('{{example-component}}');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/hash-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/hash-test.js
index 2e9130501d5..ec144a75450 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/hash-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/hash-test.js
@@ -31,7 +31,7 @@ moduleFor(
 
     ['@test binds values when variables are used']() {
       this.render(
-        `{{#with (hash name=model.firstName lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`,
+        `{{#with (hash name=this.model.firstName lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`,
         {
           model: {
             firstName: 'Marisa',
@@ -56,7 +56,7 @@ moduleFor(
 
     ['@test binds multiple values when variables are used']() {
       this.render(
-        `{{#with (hash name=model.firstName lastName=model.lastName) as |person|}}{{person.name}} {{person.lastName}}{{/with}}`,
+        `{{#with (hash name=this.model.firstName lastName=this.model.lastName) as |person|}}{{person.name}} {{person.lastName}}{{/with}}`,
         {
           model: {
             firstName: 'Marisa',
@@ -91,7 +91,7 @@ moduleFor(
 
     ['@test hash helpers can be nested']() {
       this.render(
-        `{{#with (hash person=(hash name=model.firstName)) as |ctx|}}{{ctx.person.name}}{{/with}}`,
+        `{{#with (hash person=(hash name=this.model.firstName)) as |ctx|}}{{ctx.person.name}}{{/with}}`,
         {
           model: { firstName: 'Balint' },
         }
@@ -124,7 +124,7 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (hash firstName=model.firstName)}}`,
+        template: `{{yield (hash firstName=this.model.firstName)}}`,
       });
 
       this.render(`{{#foo-bar as |values|}}{{values.firstName}}{{/foo-bar}}`);
@@ -156,11 +156,11 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (hash firstName=model.firstName lastName=lastName)}}`,
+        template: `{{yield (hash firstName=this.model.firstName lastName=lastName)}}`,
       });
 
       this.render(
-        `{{#foo-bar lastName=model.lastName as |values|}}{{values.firstName}} {{values.lastName}}{{/foo-bar}}`,
+        `{{#foo-bar lastName=this.model.lastName as |values|}}{{values.firstName}} {{values.lastName}}{{/foo-bar}}`,
         {
           model: { lastName: 'Hietala' },
         }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/mut-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/mut-test.js
index 835fb42c00b..68565befe4d 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/mut-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/mut-test.js
@@ -202,10 +202,10 @@ moduleFor(
       });
 
       this.registerComponent('middle-mut', {
-        template: '{{#bottom-mut}}{{model.name}}{{/bottom-mut}}',
+        template: '{{#bottom-mut}}{{@model.name}}{{/bottom-mut}}',
       });
 
-      this.render('{{middle-mut model=(mut model)}}', {
+      this.render('{{middle-mut model=(mut this.model)}}', {
         model: { name: 'Matthew Beale' },
       });
 
@@ -370,11 +370,11 @@ moduleFor(
             inner = this;
           },
         }),
-        template: '{{model}}',
+        template: '{{@model}}',
       });
 
       this.registerComponent('x-outer', {
-        template: '{{x-inner model=nonexistent}}',
+        template: '{{x-inner model=this.nonexistent}}',
       });
 
       this.render('{{x-outer}}');
@@ -403,11 +403,14 @@ moduleFor(
             inner = this;
           },
         }),
-        template: 'hello{{model}}',
+        template: 'hello{{@model}}',
       });
 
       this.registerComponent('x-outer', {
-        template: '{{x-inner model=x}}',
+        // Use `this.x` here instead of `@x` to let `x-inner` mutate `this.x`.
+        // `@x` points to the literal binding from `x-outer`, which is of
+        // course immutable.
+        template: '{{x-inner model=this.x}}',
       });
 
       this.render('{{x-outer x="foo"}}');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/partial-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/partial-test.js
index db10f2a6c3c..8b114820988 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/partial-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/partial-test.js
@@ -27,7 +27,7 @@ moduleFor(
     }
 
     ['@test should use the current context']() {
-      this.registerPartial('_person_name', '{{model.firstName}} {{model.lastName}}');
+      this.registerPartial('_person_name', '{{this.model.firstName}} {{this.model.lastName}}');
 
       this.render('Who is {{partial "person_name"}}?', {
         model: {
@@ -82,9 +82,9 @@ moduleFor(
 
       this.render(
         strip`
-      {{#each model.items as |item|}}
-        {{item}}: {{partial 'show-item'}} |
-      {{/each}}`,
+        {{#each this.model.items as |item|}}
+          {{item}}: {{partial 'show-item'}} |
+        {{/each}}`,
         {
           model: {
             items: emberA(['apple', 'orange', 'banana']),
@@ -114,9 +114,9 @@ moduleFor(
 
       this.render(
         strip`
-      {{#with model as |item|}}
-        {{item.name}}: {{partial 'show-id'}}
-      {{/with}}`,
+        {{#with this.model as |item|}}
+          {{item.name}}: {{partial 'show-id'}}
+        {{/with}}`,
         {
           model: { id: 1, name: 'foo' },
         }
@@ -287,9 +287,9 @@ moduleFor(
 
       this.render(
         strip`
-      {{#each model.items as |template i|}}
-        {{model.type}}: {{partial template}}
-      {{/each}}`,
+        {{#each this.model.items as |template i|}}
+          {{this.model.type}}: {{partial template}}
+        {{/each}}`,
         {
           model: {
             items: ['even', 'odd', 'even', 'odd'],
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/tracked-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/tracked-test.js
index ce988e6cf48..1435e32a731 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/tracked-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/tracked-test.js
@@ -66,7 +66,7 @@ if (EMBER_METAL_TRACKED_PROPERTIES) {
           return `${value}-value`;
         });
 
-        this.render('{{hello-world model.name}}', {
+        this.render('{{hello-world this.model.name}}', {
           model: Person.create(),
         });
 
@@ -189,7 +189,7 @@ if (EMBER_METAL_TRACKED_PROPERTIES) {
           return value;
         });
 
-        this.render('{{hello-world model.full}}', {
+        this.render('{{hello-world this.model.full}}', {
           model: Person.create(),
         });
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/unbound-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/unbound-test.js
index 04ddd14f4c3..c84ea828bbd 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/unbound-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/unbound-test.js
@@ -87,7 +87,7 @@ moduleFor(
     }
 
     ['@test should render on attributes']() {
-      this.render(`<a href="{{unbound model.foo}}"></a>`, {
+      this.render(`<a href="{{unbound this.model.foo}}"></a>`, {
         model: { foo: 'BORK' },
       });
 
@@ -292,7 +292,7 @@ moduleFor(
 
       this.render(
         strip`
-      {{unbound (surround model.prefix model.value "bar")}} {{surround model.prefix model.value "bar"}} {{unbound (surround "bar" model.value model.suffix)}} {{surround "bar" model.value model.suffix}}`,
+      {{unbound (surround this.model.prefix this.model.value "bar")}} {{surround this.model.prefix this.model.value "bar"}} {{unbound (surround "bar" this.model.value this.model.suffix)}} {{surround "bar" this.model.value this.model.suffix}}`,
         {
           model: {
             prefix: 'before',
@@ -335,7 +335,7 @@ moduleFor(
       this.registerHelper('fauxconcat', params => params.join(''));
 
       this.render(
-        `{{fauxconcat model.foo model.bar model.bing}} {{unbound (fauxconcat model.foo model.bar model.bing)}}`,
+        `{{fauxconcat this.model.foo this.model.bar this.model.bing}} {{unbound (fauxconcat this.model.foo this.model.bar this.model.bing)}}`,
         {
           model: {
             foo: 'a',
@@ -558,13 +558,13 @@ moduleFor(
     ['@test should be able to render bound form of a helper inside unbound form of same helper']() {
       this.render(
         strip`
-      {{#if (unbound model.foo)}}
-        {{#if model.bar}}true{{/if}}
-        {{#unless model.bar}}false{{/unless}}
+      {{#if (unbound this.model.foo)}}
+        {{#if this.model.bar}}true{{/if}}
+        {{#unless this.model.bar}}false{{/unless}}
       {{/if}}
-      {{#unless (unbound model.notfoo)}}
-        {{#if model.bar}}true{{/if}}
-        {{#unless model.bar}}false{{/unless}}
+      {{#unless (unbound this.model.notfoo)}}
+        {{#if this.model.bar}}true{{/if}}
+        {{#unless this.model.bar}}false{{/unless}}
       {{/unless}}`,
         {
           model: {
@@ -608,7 +608,7 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (unbound model.foo)}}`,
+        template: `{{yield (unbound this.model.foo)}}`,
       });
 
       this.render(`{{#foo-bar as |value|}}{{value}}{{/foo-bar}}`);
@@ -640,7 +640,7 @@ moduleFor(
 
       this.registerComponent('foo-bar', {
         ComponentClass: FooBarComponent,
-        template: `{{yield (unbound (hash foo=model.foo))}}`,
+        template: `{{yield (unbound (hash foo=this.model.foo))}}`,
       });
 
       this.render(`{{#foo-bar as |value|}}{{value.foo}}{{/foo-bar}}`);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/input-test.js b/packages/@ember/-internals/glimmer/tests/integration/input-test.js
index 24c8b38187a..261683d0bfd 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/input-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/input-test.js
@@ -79,7 +79,7 @@ moduleFor(
     ['@test input disabled attribute']() {
       let model = { model: { value: false } };
 
-      this.render(`<input disabled={{model.value}}>`, model);
+      this.render(`<input disabled={{this.model.value}}>`, model);
 
       this.assert.equal(this.$inputElement().prop('disabled'), false);
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/svg-test.js b/packages/@ember/-internals/glimmer/tests/integration/svg-test.js
index 951e2e18e0f..9151fafe34b 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/svg-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/svg-test.js
@@ -8,7 +8,7 @@ moduleFor(
     ['@test unquoted viewBox property is output'](assert) {
       let viewBoxString = '0 0 100 100';
 
-      this.render('<div><svg viewBox={{model.viewBoxString}}></svg></div>', {
+      this.render('<div><svg viewBox={{this.model.viewBoxString}}></svg></div>', {
         model: {
           viewBoxString,
         },
@@ -44,7 +44,7 @@ moduleFor(
     ['@test quoted viewBox property is output'](assert) {
       let viewBoxString = '0 0 100 100';
 
-      this.render('<div><svg viewBox="{{model.viewBoxString}}"></svg></div>', {
+      this.render('<div><svg viewBox="{{this.model.viewBoxString}}"></svg></div>', {
         model: {
           viewBoxString,
         },
@@ -80,7 +80,7 @@ moduleFor(
     ['@test quoted viewBox property is concat']() {
       let viewBoxString = '100 100';
 
-      this.render('<div><svg viewBox="0 0 {{model.viewBoxString}}"></svg></div>', {
+      this.render('<div><svg viewBox="0 0 {{this.model.viewBoxString}}"></svg></div>', {
         model: {
           viewBoxString,
         },
@@ -118,7 +118,7 @@ moduleFor(
     }
 
     ['@test class is output']() {
-      this.render("<div><svg class='{{model.color}} tall'></svg></div>", {
+      this.render("<div><svg class='{{this.model.color}} tall'></svg></div>", {
         model: {
           color: 'blue',
         },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/syntax/each-test.js b/packages/@ember/-internals/glimmer/tests/integration/syntax/each-test.js
index 8a4ad97764f..ff1a9d214b0 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/syntax/each-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/syntax/each-test.js
@@ -1186,14 +1186,14 @@ if (typeof MutationObserver === 'function') {
 
         this.render(
           strip`
-        <h1>{{page.title}}</h1>
+          <h1>{{this.page.title}}</h1>
 
-        <ul id="posts">
-          {{#each model as |post|}}
-            <li>{{post.title}}</li>
-          {{/each}}
-        </ul>
-      `,
+          <ul id="posts">
+            {{#each this.model as |post|}}
+              <li>{{post.title}}</li>
+            {{/each}}
+          </ul>
+          `,
           { page, model }
         );
 
diff --git a/packages/ember/tests/routing/decoupled_basic_test.js b/packages/ember/tests/routing/decoupled_basic_test.js
index 1ccb27bfb62..1619a53a0d3 100644
--- a/packages/ember/tests/routing/decoupled_basic_test.js
+++ b/packages/ember/tests/routing/decoupled_basic_test.js
@@ -22,7 +22,7 @@ moduleFor(
       super(...arguments);
       this.addTemplate('home', '<h3 class="hours">Hours</h3>');
       this.addTemplate('camelot', '<section id="camelot"><h3>Is a silly place</h3></section>');
-      this.addTemplate('homepage', '<h3 id="troll">Megatroll</h3><p>{{model.home}}</p>');
+      this.addTemplate('homepage', '<h3 id="troll">Megatroll</h3><p>{{this.name}}</p>');
 
       this.router.map(function() {
         this.route('home', { path: '/' });
@@ -143,7 +143,7 @@ moduleFor(
       });
     }
 
-    [`@test an alternate template will pull in an alternate controller`](assert) {
+    async [`@test an alternate template will pull in an alternate controller`](assert) {
       this.add(
         'route:home',
         Route.extend({
@@ -157,19 +157,17 @@ moduleFor(
         Controller.extend({
           init() {
             this._super(...arguments);
-            this.model = { home: 'Comes from homepage' };
+            this.name = 'Comes from homepage';
           },
         })
       );
 
-      return this.visit('/').then(() => {
-        let text = this.$('p').text();
+      await this.visit('/');
 
-        assert.equal(text, 'Comes from homepage', 'the homepage template was rendered');
-      });
+      assert.equal(this.$('p').text(), 'Comes from homepage', 'the homepage template was rendered');
     }
 
-    [`@test An alternate template will pull in an alternate controller instead of controllerName`](
+    async [`@test An alternate template will pull in an alternate controller instead of controllerName`](
       assert
     ) {
       this.add(
@@ -186,7 +184,7 @@ moduleFor(
         Controller.extend({
           init() {
             this._super(...arguments);
-            this.model = { home: 'Comes from foo' };
+            this.name = 'Comes from foo';
           },
         })
       );
@@ -195,19 +193,17 @@ moduleFor(
         Controller.extend({
           init() {
             this._super(...arguments);
-            this.model = { home: 'Comes from homepage' };
+            this.name = 'Comes from homepage';
           },
         })
       );
 
-      return this.visit('/').then(() => {
-        let text = this.$('p').text();
+      await this.visit('/');
 
-        assert.equal(text, 'Comes from homepage', 'the homepage template was rendered');
-      });
+      assert.equal(this.$('p').text(), 'Comes from homepage', 'the homepage template was rendered');
     }
 
-    [`@test The template will pull in an alternate controller via key/value`](assert) {
+    async [`@test The template will pull in an alternate controller via key/value`](assert) {
       this.router.map(function() {
         this.route('homepage', { path: '/' });
       });
@@ -225,29 +221,29 @@ moduleFor(
         Controller.extend({
           init() {
             this._super(...arguments);
-            this.model = { home: 'Comes from home.' };
+            this.name = 'Comes from home.';
           },
         })
       );
 
-      return this.visit('/').then(() => {
-        let text = this.$('p').text();
+      await this.visit('/');
 
-        assert.equal(
-          text,
-          'Comes from home.',
-          'the homepage template was rendered from data from the HomeController'
-        );
-      });
+      assert.equal(
+        this.$('p').text(),
+        'Comes from home.',
+        'the homepage template was rendered from data from the HomeController'
+      );
     }
 
-    [`@test The Homepage with explicit template name in renderTemplate and controller`](assert) {
+    async [`@test The Homepage with explicit template name in renderTemplate and controller`](
+      assert
+    ) {
       this.add(
         'controller:home',
         Controller.extend({
           init() {
             this._super(...arguments);
-            this.model = { home: 'YES I AM HOME' };
+            this.name = 'YES I AM HOME';
           },
         })
       );
@@ -260,11 +256,9 @@ moduleFor(
         })
       );
 
-      return this.visit('/').then(() => {
-        let text = this.$('p').text();
+      await this.visit('/');
 
-        assert.equal(text, 'YES I AM HOME', 'The homepage template was rendered');
-      });
+      assert.equal(this.$('p').text(), 'YES I AM HOME', 'The homepage template was rendered');
     }
 
     [`@test Model passed via renderTemplate model is set as controller's model`](assert) {
@@ -590,7 +584,7 @@ moduleFor(
 
       this.addTemplate(
         'home',
-        '<ul>{{#each model as |passage|}}<li>{{passage}}</li>{{/each}}</ul>'
+        '<ul>{{#each this.model as |passage|}}<li>{{passage}}</li>{{/each}}</ul>'
       );
 
       return this.visit('/').then(() => {

From c9ddb67f823548ca341f98255328ebdeb578c44a Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Mon, 2 Sep 2019 13:44:06 +0900
Subject: [PATCH 2/6] [BUGFIX] Fix `shouldTest` (internal test helper)

This was previously not working properly for `@feature(!SOME_NAME)`.
---
 packages/internal-test-helpers/lib/module-for.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/internal-test-helpers/lib/module-for.js b/packages/internal-test-helpers/lib/module-for.js
index 0142ffac5e9..5edc2ea0c17 100644
--- a/packages/internal-test-helpers/lib/module-for.js
+++ b/packages/internal-test-helpers/lib/module-for.js
@@ -56,12 +56,10 @@ export function setupTestClass(hooks, TestClass, ...mixins) {
 
   function shouldTest(features) {
     return features.every(feature => {
-      if (feature[0] === '!' && isEnabled(feature.slice(1))) {
-        return false;
-      } else if (!isEnabled(feature)) {
-        return false;
+      if (feature[0] === '!') {
+        return !isEnabled(feature.slice(1));
       } else {
-        return true;
+        return isEnabled(feature);
       }
     });
   }

From 65a52ef03d2394404626ac97b3608a79a602254f Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Mon, 2 Sep 2019 14:13:14 +0900
Subject: [PATCH 3/6] [BUGFIX] Improve backtracking message

---
 .../glimmer/lib/component-managers/outlet.ts  |  5 +-
 .../glimmer/lib/utils/references.ts           | 56 ++++++++++++++-----
 .../integration/application/rendering-test.js | 24 ++++++--
 .../components/curly-components-test.js       |  4 +-
 .../components/dynamic-components-test.js     | 11 +++-
 .../glimmer/tests/integration/mount-test.js   |  9 ++-
 .../-internals/metal/lib/transaction.ts       | 16 ++----
 7 files changed, 84 insertions(+), 41 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index 34ca5d2ff92..c0955040cc7 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -12,7 +12,6 @@ import {
   ElementOperations,
   Environment,
   Invocation,
-  UNDEFINED_REFERENCE,
   WithDynamicTagName,
   WithStaticLayout,
 } from '@glimmer/runtime';
@@ -74,10 +73,8 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
     }
     dynamicScope.outletState = definition.ref;
 
-    let controller = definition.controller;
-    let self = controller === undefined ? UNDEFINED_REFERENCE : new RootReference(controller);
     return {
-      self,
+      self: RootReference.create(definition.controller),
       finalize: _instrumentStart('render.outlet', instrumentationPayload, definition),
     };
   }
diff --git a/packages/@ember/-internals/glimmer/lib/utils/references.ts b/packages/@ember/-internals/glimmer/lib/utils/references.ts
index 3388de34a8f..87d91364960 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/references.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/references.ts
@@ -10,7 +10,7 @@ import {
 } from '@ember/-internals/metal';
 import { isProxy, symbol } from '@ember/-internals/utils';
 import { EMBER_METAL_TRACKED_PROPERTIES } from '@ember/canary-features';
-import { debugFreeze } from '@ember/debug';
+import { assert, debugFreeze } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 import { Dict, Opaque } from '@glimmer/interfaces';
 import {
@@ -200,6 +200,12 @@ export class RootPropertyReference extends PropertyReference
   }
 }
 
+if (DEBUG) {
+  RootPropertyReference.prototype['debug'] = function debug(): string {
+    return `this.${this['propertyKey']}`;
+  };
+}
+
 export class NestedPropertyReference extends PropertyReference {
   public tag: Tag;
   private propertyTag: UpdatableTag;
@@ -272,6 +278,20 @@ export class NestedPropertyReference extends PropertyReference {
   }
 }
 
+if (DEBUG) {
+  NestedPropertyReference.prototype['debug'] = function debug(): string {
+    let parent = this['parentReference'];
+    let parentKey = 'unknownObject';
+    let selfKey = this['propertyKey'];
+
+    if (typeof parent['debug'] === 'function') {
+      parentKey = parent['debug']();
+    }
+
+    return `${parentKey}.${selfKey}`;
+  };
+}
+
 export class UpdatableReference extends EmberPathReference {
   public tag: DirtyableTag;
   private _value: Opaque;
@@ -487,30 +507,38 @@ export function referenceFromParts(
 
 type Primitive = undefined | null | boolean | number | string;
 
-function isObject(value: Opaque): value is object {
+function isObject(value: unknown): value is object {
   return value !== null && typeof value === 'object';
 }
 
-function isFunction(value: Opaque): value is Function {
+function isFunction(value: unknown): value is Function {
   return typeof value === 'function';
 }
 
-function isPrimitive(value: Opaque): value is Primitive {
+function isPrimitive(value: unknown): value is Primitive {
   if (DEBUG) {
-    let type = typeof value;
-    return (
+    let label;
+
+    try {
+      label = ` (was \`${String(value)}\`)`;
+    } catch (e) {
+      label = null;
+    }
+
+    assert(
+      `This is a fall-through check for typing purposes only! \`value\` must already be a primitive at this point.${label})`,
       value === undefined ||
-      value === null ||
-      type === 'boolean' ||
-      type === 'number' ||
-      type === 'string'
+        value === null ||
+        typeof value === 'boolean' ||
+        typeof value === 'number' ||
+        typeof value === 'string'
     );
-  } else {
-    return true;
   }
+
+  return true;
 }
 
-function valueToRef<T = Opaque>(value: T, bound = true): VersionedPathReference<T> {
+function valueToRef<T = unknown>(value: T, bound = true): VersionedPathReference<T> {
   if (isObject(value)) {
     // root of interop with ember objects
     return bound ? new RootReference(value) : new UnboundReference(value);
@@ -539,7 +567,7 @@ function valueToRef<T = Opaque>(value: T, bound = true): VersionedPathReference<
   }
 }
 
-function valueKeyToRef(value: Opaque, key: string): VersionedPathReference<Opaque> {
+function valueKeyToRef(value: unknown, key: string): VersionedPathReference<Opaque> {
   if (isObject(value)) {
     // root of interop with ember objects
     return new RootPropertyReference(value, key);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
index a69480e5b6f..e60dbe3d52b 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
@@ -474,28 +474,42 @@ moduleFor(
         this.route('routeWithError');
       });
 
+      this.add(
+        'controller:routeWithError',
+        Controller.extend({
+          toString() {
+            return 'RouteWithErrorController';
+          },
+        })
+      );
+
       this.add(
         'route:routeWithError',
         Route.extend({
           model() {
-            return { name: 'Alex' };
+            return {
+              name: 'Alex',
+              toString() {
+                return `Person (${this.name})`;
+              },
+            };
           },
         })
       );
 
-      this.addTemplate('routeWithError', 'Hi {{model.name}} {{x-foo person=model}}');
+      this.addTemplate('routeWithError', 'Hi {{this.model.name}} <Foo @person={{this.model}} />');
 
-      this.addComponent('x-foo', {
+      this.addComponent('foo', {
         ComponentClass: Component.extend({
           init() {
             this._super(...arguments);
             this.set('person.name', 'Ben');
           },
         }),
-        template: 'Hi {{person.name}} from component',
+        template: 'Hi {{this.person.name}} from component',
       });
 
-      let expectedBacktrackingMessage = /modified "model\.name" twice on \[object Object\] in a single render\. It was rendered in "template:my-app\/templates\/routeWithError.hbs" and modified in "component:x-foo"/;
+      let expectedBacktrackingMessage = /modified `Person \(Ben\)` twice in a single render\. It was first rendered as `this\.model\.name` in "template:my-app\/templates\/routeWithError\.hbs" and then modified later in "component:foo"/;
 
       await this.visit('/');
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
index dfd78aef171..ebcc64dd76f 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -2533,7 +2533,7 @@ moduleFor(
         template: '<div id="inner-value">{{value}}</div>',
       });
 
-      let expectedBacktrackingMessage = /modified "value" twice on <.+?> in a single render\. It was rendered in "component:x-middle" and modified in "component:x-inner"/;
+      let expectedBacktrackingMessage = /modified `<.+?>` twice in a single render\. It was first rendered as `this\.value` in "component:x-middle" and then modified later in "component:x-inner"/;
 
       expectAssertion(() => {
         this.render('{{x-outer}}');
@@ -2560,7 +2560,7 @@ moduleFor(
         template: '<div id="inner-value">{{wrapper.content}}</div>',
       });
 
-      let expectedBacktrackingMessage = /modified "wrapper\.content" twice on <.+?> in a single render\. It was rendered in "component:x-outer" and modified in "component:x-inner"/;
+      let expectedBacktrackingMessage = /modified `<.+?>` twice in a single render\. It was first rendered as `this\.wrapper\.content` in "component:x-outer" and then modified later in "component:x-inner"/;
 
       expectAssertion(() => {
         this.render('{{x-outer}}');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
index 202554de93a..7b27e5cbe83 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
@@ -761,7 +761,12 @@ moduleFor(
         ComponentClass: Component.extend({
           init() {
             this._super(...arguments);
-            this.set('person', { name: 'Alex' });
+            this.set('person', {
+              name: 'Alex',
+              toString() {
+                return `Person (${this.name})`;
+              },
+            });
           },
         }),
         template: `Hi {{person.name}}! {{component "error-component" person=person}}`,
@@ -771,13 +776,13 @@ moduleFor(
         ComponentClass: Component.extend({
           init() {
             this._super(...arguments);
-            this.set('person.name', { name: 'Ben' });
+            this.set('person.name', 'Ben');
           },
         }),
         template: '{{person.name}}',
       });
 
-      let expectedBacktrackingMessage = /modified "person\.name" twice on \[object Object\] in a single render\. It was rendered in "component:outer-component" and modified in "component:error-component"/;
+      let expectedBacktrackingMessage = /modified `Person \(Ben\)` twice in a single render\. It was first rendered as `this\.person\.name` in "component:outer-component" and then modified later in "component:error-component"/;
 
       expectAssertion(() => {
         this.render('{{component componentName}}', {
diff --git a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
index 8e47526dac7..e8369f92db1 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
@@ -114,7 +114,12 @@ moduleFor(
         { moduleName: 'my-app/templates/application.hbs' }
       );
       this.engineRegistrations['controller:application'] = Controller.extend({
-        person: { name: 'Alex' },
+        person: {
+          name: 'Alex',
+          toString() {
+            return `Person (${this.name})`;
+          },
+        },
       });
 
       this.engineRegistrations['template:components/component-with-backtracking-set'] = compile(
@@ -130,7 +135,7 @@ moduleFor(
         },
       });
 
-      let expectedBacktrackingMessage = /modified "person\.name" twice on \[object Object\] in a single render\. It was rendered in "template:my-app\/templates\/route-with-mount.hbs" \(in "engine:chat"\) and modified in "component:component-with-backtracking-set" \(in "engine:chat"\)/;
+      let expectedBacktrackingMessage = /modified `Person \(Ben\)` twice in a single render\. It was first rendered as `this\.person\.name` in "template:my-app\/templates\/route-with-mount.hbs" \(in "engine:chat"\) and then modified later in "component:component-with-backtracking-set" \(in "engine:chat"\)/;
 
       await this.visit('/');
 
diff --git a/packages/@ember/-internals/metal/lib/transaction.ts b/packages/@ember/-internals/metal/lib/transaction.ts
index 1d588f106b9..d3274320c39 100644
--- a/packages/@ember/-internals/metal/lib/transaction.ts
+++ b/packages/@ember/-internals/metal/lib/transaction.ts
@@ -86,22 +86,16 @@ if (DEBUG) {
           let { lastRef, lastRenderedIn } = this.getKey(object, key);
           let currentlyIn = this.debugStack!.peek();
 
-          let parts = [];
-          let label;
+          let label = '';
 
-          if (lastRef !== undefined) {
-            while (lastRef && lastRef.propertyKey) {
-              parts.unshift(lastRef.propertyKey);
-              lastRef = lastRef.parentReference;
-            }
-
-            label = parts.join('.');
+          if (lastRef && typeof lastRef.debug === 'function') {
+            label = `as \`${lastRef.debug()}\` in ${lastRenderedIn}`;
           } else {
-            label = 'the same value';
+            label = `in ${lastRenderedIn}`;
           }
 
           assert(
-            `You modified "${label}" twice on ${object} in a single render. It was rendered in ${lastRenderedIn} and modified in ${currentlyIn}. This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details.`,
+            `You modified \`${object}\` twice in a single render. It was first rendered ${label} and then modified later in ${currentlyIn}. This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details.`,
             false
           );
         }

From 16b74a531e6343faa7f65112b104f27bb4d7bb0b Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Mon, 2 Sep 2019 14:19:33 +0900
Subject: [PATCH 4/6] [FEATURE MODEL_ARG] Implement RFC emberjs/rfcs#523

The key changes are in `route.ts` and `syntax/outlet.ts`.

The rest are just threading through those new values and test changes.
---
 .../glimmer/lib/component-managers/outlet.ts  |   3 +-
 .../-internals/glimmer/lib/syntax/outlet.ts   |  97 ++-
 .../-internals/glimmer/lib/utils/outlet.ts    |   7 +-
 .../-internals/glimmer/lib/views/outlet.ts    |   2 +
 .../integration/application/rendering-test.js | 408 ++++++++++---
 .../link-to/query-params-angle-test.js        |  73 ++-
 .../components/link-to/routing-angle-test.js  | 131 +++-
 .../components/link-to/routing-curly-test.js  | 191 +++++-
 .../-internals/routing/lib/system/route.ts    |  11 +-
 .../@ember/application/tests/visit_test.js    | 193 +++++-
 packages/@ember/canary-features/index.ts      |   2 +
 .../ember-testing/tests/integration_test.js   |  34 +-
 packages/ember/tests/homepage_example_test.js |  43 +-
 .../tests/routing/decoupled_basic_test.js     | 576 +++++++++++++++++-
 .../router_service_test/transitionTo_test.js  |  95 ++-
 .../ember/tests/routing/substates_test.js     | 220 ++++++-
 tests/node/helpers/setup-component.js         |   2 +
 17 files changed, 1931 insertions(+), 157 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index c0955040cc7..b9ed4d57ef6 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -38,7 +38,8 @@ export interface OutletDefinitionState {
   name: string;
   outlet: string;
   template: OwnedTemplate;
-  controller: any | undefined;
+  controller: unknown;
+  model: unknown;
 }
 
 const CAPABILITIES: ComponentCapabilities = {
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
index 1356c70c71f..09be6a326bf 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
@@ -1,19 +1,25 @@
 import { OwnedTemplateMeta } from '@ember/-internals/views';
-import { Option } from '@glimmer/interfaces';
+import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
+import { DEBUG } from '@glimmer/env';
+import { Option, unsafe } from '@glimmer/interfaces';
 import { OpcodeBuilder } from '@glimmer/opcode-compiler';
 import { ConstReference, Reference, Tag, VersionedPathReference } from '@glimmer/reference';
 import {
   Arguments,
+  CapturedArguments,
   CurriedComponentDefinition,
   curry,
+  EMPTY_ARGS,
   UNDEFINED_REFERENCE,
   VM,
 } from '@glimmer/runtime';
+import { Dict, dict, Opaque } from '@glimmer/util';
 import * as WireFormat from '@glimmer/wire-format';
 import { OutletComponentDefinition, OutletDefinitionState } from '../component-managers/outlet';
 import { DynamicScope } from '../renderer';
 import { isTemplateFactory } from '../template';
 import { OutletReference, OutletState } from '../utils/outlet';
+import { NestedPropertyReference, PropertyReference } from '../utils/references';
 
 /**
   The `{{outlet}}` helper lets you specify where a child route will render in
@@ -85,17 +91,93 @@ export function outletMacro(
   return true;
 }
 
+class OutletModelReference implements VersionedPathReference {
+  public tag: Tag;
+
+  constructor(private parent: VersionedPathReference<OutletState | undefined>) {
+    this.tag = parent.tag;
+  }
+
+  value(): Opaque {
+    let state = this.parent.value();
+
+    if (state === undefined) {
+      return undefined;
+    }
+
+    let { render } = state;
+
+    if (render === undefined) {
+      return undefined;
+    }
+
+    return render.model as Opaque;
+  }
+
+  get(property: string): VersionedPathReference {
+    if (DEBUG) {
+      // This guarentees that we preserve the `debug()` output below
+      return new NestedPropertyReference(this, property);
+    } else {
+      return PropertyReference.create(this, property);
+    }
+  }
+}
+
+if (DEBUG) {
+  OutletModelReference.prototype['debug'] = function debug(): string {
+    return '@model';
+  };
+}
+
 class OutletComponentReference
   implements VersionedPathReference<CurriedComponentDefinition | null> {
   public tag: Tag;
-  private definition: CurriedComponentDefinition | null;
-  private lastState: OutletDefinitionState | null;
+  private args: Option<CapturedArguments> = null;
+  private definition: Option<CurriedComponentDefinition> = null;
+  private lastState: Option<OutletDefinitionState> = null;
 
   constructor(private outletRef: VersionedPathReference<OutletState | undefined>) {
-    this.definition = null;
-    this.lastState = null;
     // The router always dirties the root state.
-    this.tag = outletRef.tag;
+    let tag = (this.tag = outletRef.tag);
+
+    if (EMBER_ROUTING_MODEL_ARG) {
+      let modelRef = new OutletModelReference(outletRef);
+      let map = dict<VersionedPathReference>();
+      map.model = modelRef;
+
+      // TODO: the functionailty to create a proper CapturedArgument should be
+      // exported by glimmer, or that it should provide an overload for `curry`
+      // that takes `PreparedArguments`
+      this.args = {
+        tag,
+        positional: EMPTY_ARGS.positional,
+        named: {
+          tag,
+          map,
+          names: ['model'],
+          references: [modelRef],
+          length: 1,
+          has(key: string): boolean {
+            return key === 'model';
+          },
+          get<T extends VersionedPathReference>(key: string): T {
+            return (key === 'model' ? modelRef : UNDEFINED_REFERENCE) as unsafe;
+          },
+          value(): Dict<Opaque> {
+            let model = modelRef.value();
+            return { model };
+          },
+        },
+        length: 1,
+        value() {
+          return {
+            named: this.named.value(),
+            positional: this.positional.value(),
+          };
+        },
+      };
+    }
   }
 
   value(): CurriedComponentDefinition | null {
@@ -106,7 +188,7 @@ class OutletComponentReference
     this.lastState = state;
     let definition = null;
     if (state !== null) {
-      definition = curry(new OutletComponentDefinition(state));
+      definition = curry(new OutletComponentDefinition(state), this.args);
     }
     return (this.definition = definition);
   }
@@ -138,6 +220,7 @@ function stateFor(
     outlet: render.outlet,
     template,
     controller: render.controller,
+    model: render.model,
   };
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
index 6c41134c855..a415c5cf1cb 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
@@ -36,7 +36,12 @@ export interface RenderState {
   /**
    * The controller (the self of the outlet component)
    */
-  controller: any | undefined;
+  controller: unknown;
+
+  /**
+   * The model (the resolved value of the model hook)
+   */
+  model: unknown;
 
   /**
    * template (the layout of the outlet component)
diff --git a/packages/@ember/-internals/glimmer/lib/views/outlet.ts b/packages/@ember/-internals/glimmer/lib/views/outlet.ts
index 9af41ceaa54..ae4eaf7226b 100644
--- a/packages/@ember/-internals/glimmer/lib/views/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/views/outlet.ts
@@ -57,6 +57,7 @@ export default class OutletView {
         outlet: TOP_LEVEL_OUTLET,
         name: TOP_LEVEL_NAME,
         controller: undefined,
+        model: undefined,
         template,
       },
     }));
@@ -66,6 +67,7 @@ export default class OutletView {
       outlet: TOP_LEVEL_OUTLET,
       template,
       controller: undefined,
+      model: undefined,
     };
   }
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
index e60dbe3d52b..416fb782573 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
@@ -38,7 +38,7 @@ moduleFor(
       });
     }
 
-    ['@test it can access the model provided by the route']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it can access the model provided by the route']() {
       this.add(
         'route:application',
         Route.extend({
@@ -51,12 +51,70 @@ moduleFor(
       this.addTemplate(
         'application',
         strip`
-      <ul>
-        {{#each model as |item|}}
-          <li>{{item}}</li>
-        {{/each}}
-      </ul>
-    `
+        <ul>
+          {{#each this.model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
+      );
+
+      return this.visit('/').then(() => {
+        this.assertInnerHTML(strip`
+        <ul>
+          <li>red</li>
+          <li>yellow</li>
+          <li>blue</li>
+        </ul>
+      `);
+      });
+    }
+
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it cannot access the model provided by the route via @model']() {
+      this.add(
+        'route:application',
+        Route.extend({
+          model() {
+            return ['red', 'yellow', 'blue'];
+          },
+        })
+      );
+
+      this.addTemplate(
+        'application',
+        strip`
+        <ul>
+          {{#each @model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
+      );
+
+      return this.visit('/').then(() => {
+        this.assertInnerHTML('<ul><!----></ul>');
+      });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it can access the model provided by the route']() {
+      this.add(
+        'route:application',
+        Route.extend({
+          model() {
+            return ['red', 'yellow', 'blue'];
+          },
+        })
+      );
+
+      this.addTemplate(
+        'application',
+        strip`
+        <ul>
+          {{#each @model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
       );
 
       return this.visit('/').then(() => {
@@ -70,7 +128,7 @@ moduleFor(
       });
     }
 
-    ['@test it can render a nested route']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it can render a nested route']() {
       this.router.map(function() {
         this.route('lists', function() {
           this.route('colors', function() {
@@ -92,26 +150,67 @@ moduleFor(
       this.addTemplate(
         'lists.colors.favorite',
         strip`
-      <ul>
-        {{#each model as |item|}}
-          <li>{{item}}</li>
-        {{/each}}
-      </ul>
-    `
+        <ul>
+          {{#each this.model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
       );
 
       return this.visit('/lists/colors/favorite').then(() => {
         this.assertInnerHTML(strip`
+          <ul>
+            <li>red</li>
+            <li>yellow</li>
+            <li>blue</li>
+          </ul>
+        `);
+      });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it can render a nested route']() {
+      this.router.map(function() {
+        this.route('lists', function() {
+          this.route('colors', function() {
+            this.route('favorite');
+          });
+        });
+      });
+
+      // The "favorite" route will inherit the model
+      this.add(
+        'route:lists.colors',
+        Route.extend({
+          model() {
+            return ['red', 'yellow', 'blue'];
+          },
+        })
+      );
+
+      this.addTemplate(
+        'lists.colors.favorite',
+        strip`
         <ul>
-          <li>red</li>
-          <li>yellow</li>
-          <li>blue</li>
+          {{#each @model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
         </ul>
-      `);
+        `
+      );
+
+      return this.visit('/lists/colors/favorite').then(() => {
+        this.assertInnerHTML(strip`
+          <ul>
+            <li>red</li>
+            <li>yellow</li>
+            <li>blue</li>
+          </ul>
+        `);
       });
     }
 
-    ['@test it can render into named outlets']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it can render into named outlets']() {
       this.router.map(function() {
         this.route('colors');
       });
@@ -119,16 +218,16 @@ moduleFor(
       this.addTemplate(
         'application',
         strip`
-      <nav>{{outlet "nav"}}</nav>
-      <main>{{outlet}}</main>
-    `
+        <nav>{{outlet "nav"}}</nav>
+        <main>{{outlet}}</main>
+        `
       );
 
       this.addTemplate(
         'nav',
         strip`
-      <a href="https://emberjs.com/">Ember</a>
-    `
+        <a href="https://emberjs.com/">Ember</a>
+        `
       );
 
       this.add(
@@ -156,31 +255,31 @@ moduleFor(
       this.addTemplate(
         'colors',
         strip`
-      <ul>
-        {{#each model as |item|}}
-          <li>{{item}}</li>
-        {{/each}}
-      </ul>
-    `
+        <ul>
+          {{#each this.model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
       );
 
       return this.visit('/colors').then(() => {
         this.assertInnerHTML(strip`
-        <nav>
-          <a href="https://emberjs.com/">Ember</a>
-        </nav>
-        <main>
-          <ul>
-            <li>red</li>
-            <li>yellow</li>
-            <li>blue</li>
-          </ul>
-        </main>
-      `);
+          <nav>
+            <a href="https://emberjs.com/">Ember</a>
+          </nav>
+          <main>
+            <ul>
+              <li>red</li>
+              <li>yellow</li>
+              <li>blue</li>
+            </ul>
+          </main>
+        `);
       });
     }
 
-    ['@test it can render into named outlets']() {
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it can render into named outlets']() {
       this.router.map(function() {
         this.route('colors');
       });
@@ -188,16 +287,16 @@ moduleFor(
       this.addTemplate(
         'application',
         strip`
-      <nav>{{outlet "nav"}}</nav>
-      <main>{{outlet}}</main>
-    `
+        <nav>{{outlet "nav"}}</nav>
+        <main>{{outlet}}</main>
+        `
       );
 
       this.addTemplate(
         'nav',
         strip`
-      <a href="https://emberjs.com/">Ember</a>
-    `
+        <a href="https://emberjs.com/">Ember</a>
+        `
       );
 
       this.add(
@@ -225,27 +324,27 @@ moduleFor(
       this.addTemplate(
         'colors',
         strip`
-      <ul>
-        {{#each model as |item|}}
-          <li>{{item}}</li>
-        {{/each}}
-      </ul>
-    `
+        <ul>
+          {{#each @model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
       );
 
       return this.visit('/colors').then(() => {
         this.assertInnerHTML(strip`
-        <nav>
-          <a href="https://emberjs.com/">Ember</a>
-        </nav>
-        <main>
-          <ul>
-            <li>red</li>
-            <li>yellow</li>
-            <li>blue</li>
-          </ul>
-        </main>
-      `);
+          <nav>
+            <a href="https://emberjs.com/">Ember</a>
+          </nav>
+          <main>
+            <ul>
+              <li>red</li>
+              <li>yellow</li>
+              <li>blue</li>
+            </ul>
+          </main>
+        `);
       });
     }
 
@@ -280,7 +379,7 @@ moduleFor(
         });
     }
 
-    ['@test it should produce a stable DOM when the model changes']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it should produce a stable DOM when the model changes']() {
       this.router.map(function() {
         this.route('color', { path: '/colors/:color' });
       });
@@ -294,7 +393,35 @@ moduleFor(
         })
       );
 
-      this.addTemplate('color', 'color: {{model}}');
+      this.addTemplate('color', 'color: {{this.model}}');
+
+      return this.visit('/colors/red')
+        .then(() => {
+          this.assertInnerHTML('color: red');
+          this.takeSnapshot();
+          return this.visit('/colors/green');
+        })
+        .then(() => {
+          this.assertInnerHTML('color: green');
+          this.assertInvariants();
+        });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it should produce a stable DOM when the model changes']() {
+      this.router.map(function() {
+        this.route('color', { path: '/colors/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model(params) {
+            return params.color;
+          },
+        })
+      );
+
+      this.addTemplate('color', 'color: {{@model}}');
 
       return this.visit('/colors/red')
         .then(() => {
@@ -339,7 +466,51 @@ moduleFor(
         .then(() => this.assertText('b'));
     }
 
-    ['@test it should update correctly when the controller changes']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it should update correctly when the controller changes']() {
+      this.router.map(function() {
+        this.route('color', { path: '/colors/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model(params) {
+            return { color: params.color };
+          },
+
+          renderTemplate(controller, model) {
+            this.render({ controller: model.color, model });
+          },
+        })
+      );
+
+      this.add(
+        'controller:red',
+        Controller.extend({
+          color: 'red',
+        })
+      );
+
+      this.add(
+        'controller:green',
+        Controller.extend({
+          color: 'green',
+        })
+      );
+
+      this.addTemplate('color', 'model color: {{this.model.color}}, controller color: {{color}}');
+
+      return this.visit('/colors/red')
+        .then(() => {
+          this.assertInnerHTML('model color: red, controller color: red');
+          return this.visit('/colors/green');
+        })
+        .then(() => {
+          this.assertInnerHTML('model color: green, controller color: green');
+        });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it should update correctly when the controller changes']() {
       this.router.map(function() {
         this.route('color', { path: '/colors/:color' });
       });
@@ -371,7 +542,7 @@ moduleFor(
         })
       );
 
-      this.addTemplate('color', 'model color: {{model.color}}, controller color: {{color}}');
+      this.addTemplate('color', 'model color: {{@model.color}}, controller color: {{color}}');
 
       return this.visit('/colors/red')
         .then(() => {
@@ -383,7 +554,7 @@ moduleFor(
         });
     }
 
-    ['@test it should produce a stable DOM when two routes render the same template']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) it should produce a stable DOM when two routes render the same template']() {
       this.router.map(function() {
         this.route('a');
         this.route('b');
@@ -422,7 +593,60 @@ moduleFor(
         })
       );
 
-      this.addTemplate('common', '{{prefix}} {{model}}');
+      this.addTemplate('common', '{{prefix}} {{this.model}}');
+
+      return this.visit('/a')
+        .then(() => {
+          this.assertInnerHTML('common A');
+          this.takeSnapshot();
+          return this.visit('/b');
+        })
+        .then(() => {
+          this.assertInnerHTML('common B');
+          this.assertInvariants();
+        });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it should produce a stable DOM when two routes render the same template']() {
+      this.router.map(function() {
+        this.route('a');
+        this.route('b');
+      });
+
+      this.add(
+        'route:a',
+        Route.extend({
+          model() {
+            return 'A';
+          },
+
+          renderTemplate(controller, model) {
+            this.render('common', { controller: 'common', model });
+          },
+        })
+      );
+
+      this.add(
+        'route:b',
+        Route.extend({
+          model() {
+            return 'B';
+          },
+
+          renderTemplate(controller, model) {
+            this.render('common', { controller: 'common', model });
+          },
+        })
+      );
+
+      this.add(
+        'controller:common',
+        Controller.extend({
+          prefix: 'common',
+        })
+      );
+
+      this.addTemplate('common', '{{prefix}} {{@model}}');
 
       return this.visit('/a')
         .then(() => {
@@ -469,7 +693,9 @@ moduleFor(
       });
     }
 
-    async ['@test it emits a useful backtracking re-render assertion message'](assert) {
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) it emits a useful backtracking re-render assertion message'](
+      assert
+    ) {
       this.router.map(function() {
         this.route('routeWithError');
       });
@@ -516,6 +742,46 @@ moduleFor(
       return assert.rejectsAssertion(this.visit('/routeWithError'), expectedBacktrackingMessage);
     }
 
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) it emits a useful backtracking re-render assertion message'](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('routeWithError');
+      });
+
+      this.add(
+        'route:routeWithError',
+        Route.extend({
+          model() {
+            return {
+              name: 'Alex',
+              toString() {
+                return `Person (${this.name})`;
+              },
+            };
+          },
+        })
+      );
+
+      this.addTemplate('routeWithError', 'Hi {{@model.name}} <Foo @person={{@model}} />');
+
+      let expectedBacktrackingMessage = /modified `Person \(Ben\)` twice in a single render\. It was first rendered as `@model\.name` in "template:my-app\/templates\/routeWithError\.hbs" and then modified later in "component:foo"/;
+
+      await this.visit('/');
+
+      this.addComponent('foo', {
+        ComponentClass: Component.extend({
+          init() {
+            this._super(...arguments);
+            this.set('person.name', 'Ben');
+          },
+        }),
+        template: 'Hi {{this.person.name}} from component',
+      });
+
+      return assert.rejectsAssertion(this.visit('/routeWithError'), expectedBacktrackingMessage);
+    }
+
     ['@test route templates with {{{undefined}}} [GH#14924] [GH#16172]']() {
       this.router.map(function() {
         this.route('first');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
index f5c72e8ae97..7a9e9da4645 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
@@ -235,7 +235,7 @@ moduleFor(
       });
     }
 
-    ['@test generates proper href for `LinkTo` with no @route after transitioning to an error route GH#17963'](
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) generates proper href for `LinkTo` with no @route after transitioning to an error route GH#17963'](
       assert
     ) {
       this.router.map(function() {
@@ -258,7 +258,7 @@ moduleFor(
         })
       );
 
-      this.addTemplate('error', `Error: {{model.message}}`);
+      this.addTemplate('error', `Error: {{this.model.message}}`);
 
       this.addTemplate(
         'application',
@@ -306,6 +306,75 @@ moduleFor(
         });
     }
 
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) generates proper href for `LinkTo` with no @route after transitioning to an error route GH#17963'](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('bad');
+      });
+
+      this.add(
+        'controller:application',
+        Controller.extend({
+          queryParams: ['baz'],
+        })
+      );
+
+      this.add(
+        'route:bad',
+        Route.extend({
+          model() {
+            throw new Error('bad!');
+          },
+        })
+      );
+
+      this.addTemplate('error', `Error: {{@model.message}}`);
+
+      this.addTemplate(
+        'application',
+        `
+        <LinkTo id="bad-link" @route="bad">
+          Bad
+        </LinkTo>
+
+        <LinkTo id="good-link" @query={{hash baz='lol'}}>
+          Good
+        </LinkTo>
+
+        {{outlet}}
+        `
+      );
+
+      await this.visit('/');
+
+      assert.equal(this.$('#good-link').length, 1, 'good-link should be in the DOM');
+      assert.equal(this.$('#bad-link').length, 1, 'bad-link should be in the DOM');
+
+      let goodLink = this.$('#good-link');
+      assert.equal(goodLink.attr('href'), '/?baz=lol');
+
+      await this.visit('/bad');
+
+      assert.equal(this.$('#good-link').length, 1, 'good-link should be in the DOM');
+      assert.equal(this.$('#bad-link').length, 1, 'bad-link should be in the DOM');
+
+      goodLink = this.$('#good-link');
+      // should still be / because we never entered /bad (it errored before being fully entered)
+      // and error states do not get represented in the URL, so we are _effectively_ still
+      // on /
+      assert.equal(goodLink.attr('href'), '/?baz=lol');
+
+      runTask(() => this.click('#good-link'));
+
+      let applicationController = this.getController('application');
+      assert.deepEqual(
+        applicationController.getProperties('baz'),
+        { baz: 'lol' },
+        'index controller QP properties updated'
+      );
+    }
+
     ['@test supplied QP properties can be bound'](assert) {
       this.addTemplate(
         'index',
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
index ca2ac083b75..1b3969c1afc 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
@@ -916,7 +916,9 @@ moduleFor(
         });
     }
 
-    [`@test The <LinkTo /> component moves into the named route with context`](assert) {
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) The <LinkTo /> component moves into the named route with context`](
+      assert
+    ) {
       this.router.map(function() {
         this.route('about');
         this.route('item', { path: '/item/:id' });
@@ -927,7 +929,7 @@ moduleFor(
         `
         <h3 class="list">List</h3>
         <ul>
-          {{#each model as |person|}}
+          {{#each this.model as |person|}}
             <li>
               <LinkTo id={{person.id}} @route='item' @model={{person}}>
                 {{person.name}}
@@ -943,7 +945,7 @@ moduleFor(
         'item',
         `
         <h3 class="item">Item</h3>
-        <p>{{model.name}}</p>
+        <p>{{this.model.name}}</p>
         <LinkTo id='home-link' @route='index'>Home</LinkTo>
         `
       );
@@ -1002,6 +1004,89 @@ moduleFor(
         });
     }
 
+    async [`@feature(EMBER_ROUTING_MODEL_ARG) The <LinkTo /> component moves into the named route with context`](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('about');
+        this.route('item', { path: '/item/:id' });
+      });
+
+      this.addTemplate(
+        'about',
+        `
+        <h3 class="list">List</h3>
+        <ul>
+          {{#each @model as |person|}}
+            <li>
+              <LinkTo id={{person.id}} @route='item' @model={{person}}>
+                {{person.name}}
+              </LinkTo>
+            </li>
+          {{/each}}
+        </ul>
+        <LinkTo id='home-link' @route='index'>Home</LinkTo>
+        `
+      );
+
+      this.addTemplate(
+        'item',
+        `
+        <h3 class="item">Item</h3>
+        <p>{{@model.name}}</p>
+        <LinkTo id='home-link' @route='index'>Home</LinkTo>
+        `
+      );
+
+      this.addTemplate(
+        'index',
+        `
+        <h3 class="home">Home</h3>
+        <LinkTo id='about-link' @route='about'>About</LinkTo>
+        `
+      );
+
+      this.add(
+        'route:about',
+        Route.extend({
+          model() {
+            return [
+              { id: 'yehuda', name: 'Yehuda Katz' },
+              { id: 'tom', name: 'Tom Dale' },
+              { id: 'erik', name: 'Erik Brynroflsson' },
+            ];
+          },
+        })
+      );
+
+      await this.visit('/about');
+
+      assert.equal(this.$('h3.list').length, 1, 'The home template was rendered');
+      assert.equal(
+        normalizeUrl(this.$('#home-link').attr('href')),
+        '/',
+        'The home link points back at /'
+      );
+
+      await this.click('#yehuda');
+
+      assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');
+      assert.equal(this.$('p').text(), 'Yehuda Katz', 'The name is correct');
+
+      await this.click('#home-link');
+
+      await this.click('#about-link');
+
+      assert.equal(normalizeUrl(this.$('li a#yehuda').attr('href')), '/item/yehuda');
+      assert.equal(normalizeUrl(this.$('li a#tom').attr('href')), '/item/tom');
+      assert.equal(normalizeUrl(this.$('li a#erik').attr('href')), '/item/erik');
+
+      await this.click('#erik');
+
+      assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');
+      assert.equal(this.$('p').text(), 'Erik Brynroflsson', 'The name is correct');
+    }
+
     [`@test The <LinkTo /> component binds some anchor html tag common attributes`](assert) {
       this.addTemplate(
         'index',
@@ -1591,7 +1676,7 @@ moduleFor(
         });
     }
 
-    ['@test [GH#17018] passing model to <LinkTo /> with `hash` helper works']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) [GH#17018] passing model to <LinkTo /> with `hash` helper works']() {
       this.router.map(function() {
         this.route('post', { path: '/posts/:post_id' });
       });
@@ -1629,6 +1714,44 @@ moduleFor(
         });
     }
 
+    ['@feature(EMBER_ROUTING_MODEL_ARG) [GH#17018] passing model to <LinkTo /> with `hash` helper works']() {
+      this.router.map(function() {
+        this.route('post', { path: '/posts/:post_id' });
+      });
+
+      this.add(
+        'route:index',
+        Route.extend({
+          model() {
+            return RSVP.hash({
+              user: { name: 'Papa Smurf' },
+            });
+          },
+        })
+      );
+
+      this.addTemplate(
+        'index',
+        `<LinkTo @route='post' @model={{hash id="someId" user=@model.user}}>Post</LinkTo>`
+      );
+
+      this.addTemplate('post', 'Post: {{@model.user.name}}');
+
+      return this.visit('/')
+        .then(() => {
+          this.assertComponentElement(this.firstChild, {
+            tagName: 'a',
+            attrs: { href: '/posts/someId' },
+            content: 'Post',
+          });
+
+          return this.click('a');
+        })
+        .then(() => {
+          this.assertText('Post: Papa Smurf');
+        });
+    }
+
     [`@test The <LinkTo /> component can use dynamic params`](assert) {
       this.router.map(function() {
         this.route('foo', { path: 'foo/:some/:thing' });
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
index 474936af633..1696e201ee0 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
@@ -916,7 +916,9 @@ moduleFor(
         });
     }
 
-    [`@test The {{link-to}} component moves into the named route with context`](assert) {
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) The {{link-to}} component moves into the named route with context`](
+      assert
+    ) {
       this.router.map(function() {
         this.route('about');
         this.route('item', { path: '/item/:id' });
@@ -927,7 +929,7 @@ moduleFor(
         `
         <h3 class="list">List</h3>
         <ul>
-          {{#each model as |person|}}
+          {{#each this.model as |person|}}
             <li>
               {{#link-to 'item' person id=person.id}}
                 {{person.name}}
@@ -943,7 +945,7 @@ moduleFor(
         'item',
         `
         <h3 class="item">Item</h3>
-        <p>{{model.name}}</p>
+        <p>{{this.model.name}}</p>
         {{#link-to 'index' id='home-link'}}Home{{/link-to}}
         `
       );
@@ -1002,6 +1004,89 @@ moduleFor(
         });
     }
 
+    async [`@feature(EMBER_ROUTING_MODEL_ARG) The {{link-to}} component moves into the named route with context`](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('about');
+        this.route('item', { path: '/item/:id' });
+      });
+
+      this.addTemplate(
+        'about',
+        `
+        <h3 class="list">List</h3>
+        <ul>
+          {{#each @model as |person|}}
+            <li>
+              {{#link-to 'item' person id=person.id}}
+                {{person.name}}
+              {{/link-to}}
+            </li>
+          {{/each}}
+        </ul>
+        {{#link-to 'index' id='home-link'}}Home{{/link-to}}
+        `
+      );
+
+      this.addTemplate(
+        'item',
+        `
+        <h3 class="item">Item</h3>
+        <p>{{@model.name}}</p>
+        {{#link-to 'index' id='home-link'}}Home{{/link-to}}
+        `
+      );
+
+      this.addTemplate(
+        'index',
+        `
+        <h3 class="home">Home</h3>
+        {{#link-to 'about' id='about-link'}}About{{/link-to}}
+        `
+      );
+
+      this.add(
+        'route:about',
+        Route.extend({
+          model() {
+            return [
+              { id: 'yehuda', name: 'Yehuda Katz' },
+              { id: 'tom', name: 'Tom Dale' },
+              { id: 'erik', name: 'Erik Brynroflsson' },
+            ];
+          },
+        })
+      );
+
+      await this.visit('/about');
+
+      assert.equal(this.$('h3.list').length, 1, 'The home template was rendered');
+      assert.equal(
+        normalizeUrl(this.$('#home-link').attr('href')),
+        '/',
+        'The home link points back at /'
+      );
+
+      await this.click('#yehuda');
+
+      assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');
+      assert.equal(this.$('p').text(), 'Yehuda Katz', 'The name is correct');
+
+      await this.click('#home-link');
+
+      await this.click('#about-link');
+
+      assert.equal(normalizeUrl(this.$('li a#yehuda').attr('href')), '/item/yehuda');
+      assert.equal(normalizeUrl(this.$('li a#tom').attr('href')), '/item/tom');
+      assert.equal(normalizeUrl(this.$('li a#erik').attr('href')), '/item/erik');
+
+      await this.click('#erik');
+
+      assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');
+      assert.equal(this.$('p').text(), 'Erik Brynroflsson', 'The name is correct');
+    }
+
     [`@test The {{link-to}} component binds some anchor html tag common attributes`](assert) {
       this.addTemplate(
         'index',
@@ -1539,7 +1624,7 @@ moduleFor(
         });
     }
 
-    [`@test The non-block form {{link-to}} component moves into the named route with context`](
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) The non-block form {{link-to}} component moves into the named route with context`](
       assert
     ) {
       assert.expect(5);
@@ -1566,7 +1651,7 @@ moduleFor(
         `
         <h3 class="home">Home</h3>
         <ul>
-          {{#each model as |person|}}
+          {{#each this.model as |person|}}
             <li>
               {{link-to person.name 'item' person id=person.id}}
             </li>
@@ -1578,7 +1663,7 @@ moduleFor(
         'item',
         `
         <h3 class="item">Item</h3>
-        <p>{{model.name}}</p>
+        <p>{{this.model.name}}</p>
         {{#link-to 'index' id='home-link'}}Home{{/link-to}}
         `
       );
@@ -1600,6 +1685,64 @@ moduleFor(
         });
     }
 
+    async [`@feature(EMBER_ROUTING_MODEL_ARG) The non-block form {{link-to}} component moves into the named route with context`](
+      assert
+    ) {
+      assert.expect(5);
+
+      this.router.map(function() {
+        this.route('item', { path: '/item/:id' });
+      });
+
+      this.add(
+        'route:index',
+        Route.extend({
+          model() {
+            return [
+              { id: 'yehuda', name: 'Yehuda Katz' },
+              { id: 'tom', name: 'Tom Dale' },
+              { id: 'erik', name: 'Erik Brynroflsson' },
+            ];
+          },
+        })
+      );
+
+      this.addTemplate(
+        'index',
+        `
+        <h3 class="home">Home</h3>
+        <ul>
+          {{#each @model as |person|}}
+            <li>
+              {{link-to person.name 'item' person id=person.id}}
+            </li>
+          {{/each}}
+        </ul>
+        `
+      );
+      this.addTemplate(
+        'item',
+        `
+        <h3 class="item">Item</h3>
+        <p>{{@model.name}}</p>
+        {{#link-to 'index' id='home-link'}}Home{{/link-to}}
+        `
+      );
+
+      await this.visit('/');
+
+      await this.click('#yehuda');
+
+      assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');
+      assert.equal(this.$('p').text(), 'Yehuda Katz', 'The name is correct');
+
+      await this.click('#home-link');
+
+      assert.equal(normalizeUrl(this.$('li a#yehuda').attr('href')), '/item/yehuda');
+      assert.equal(normalizeUrl(this.$('li a#tom').attr('href')), '/item/tom');
+      assert.equal(normalizeUrl(this.$('li a#erik').attr('href')), '/item/erik');
+    }
+
     [`@test The non-block form {{link-to}} performs property lookup`](assert) {
       this.router.map(function() {
         this.route('about');
@@ -1865,7 +2008,7 @@ moduleFor(
         });
     }
 
-    ['@test [GH#17018] passing model to link-to with `hash` helper works']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) [GH#17018] passing model to link-to with `hash` helper works']() {
       this.router.map(function() {
         this.route('post', { path: '/posts/:post_id' });
       });
@@ -1902,6 +2045,40 @@ moduleFor(
         });
     }
 
+    ['@feature(EMBER_ROUTING_MODEL_ARG) [GH#17018] passing model to link-to with `hash` helper works']() {
+      this.router.map(function() {
+        this.route('post', { path: '/posts/:post_id' });
+      });
+
+      this.add(
+        'route:index',
+        Route.extend({
+          model() {
+            return RSVP.hash({
+              user: { name: 'Papa Smurf' },
+            });
+          },
+        })
+      );
+
+      this.addTemplate('index', `{{link-to 'Post' 'post' (hash id="someId" user=@model.user)}}`);
+      this.addTemplate('post', 'Post: {{@model.user.name}}');
+
+      return this.visit('/')
+        .then(() => {
+          this.assertComponentElement(this.firstChild, {
+            tagName: 'a',
+            attrs: { href: '/posts/someId' },
+            content: 'Post',
+          });
+
+          return this.click('a');
+        })
+        .then(() => {
+          this.assertText('Post: Papa Smurf');
+        });
+    }
+
     [`@test The {{link-to}} component can use dynamic params`](assert) {
       this.router.map(function() {
         this.route('foo', { path: 'foo/:some/:thing' });
diff --git a/packages/@ember/-internals/routing/lib/system/route.ts b/packages/@ember/-internals/routing/lib/system/route.ts
index fd15750a08d..584634daf9b 100644
--- a/packages/@ember/-internals/routing/lib/system/route.ts
+++ b/packages/@ember/-internals/routing/lib/system/route.ts
@@ -1712,6 +1712,7 @@ class Route extends EmberObject implements IRoute {
           name: connection.name,
           controller: undefined,
           template: undefined,
+          model: undefined,
         };
         once(this._router, '_setOutlets');
       }
@@ -1848,7 +1849,9 @@ function buildRenderOptions(
     );
   }
 
-  if (model) {
+  if (model === undefined) {
+    model = route.currentModel;
+  } else {
     (controller! as any).set('model', model);
   }
 
@@ -1869,6 +1872,7 @@ function buildRenderOptions(
     outlet,
     name,
     controller,
+    model,
     template: template !== undefined ? template(owner) : route._topLevelViewTemplate(owner),
   };
 
@@ -1889,13 +1893,14 @@ export interface RenderOptions {
   into?: string;
   outlet: string;
   name: string;
-  controller: any;
+  controller: unknown;
+  model: unknown;
   template: OwnedTemplate;
 }
 
 interface PartialRenderOptions {
   into?: string;
-  outlet: string;
+  outlet?: string;
   controller?: string | any;
   model?: {};
 }
diff --git a/packages/@ember/application/tests/visit_test.js b/packages/@ember/application/tests/visit_test.js
index 5268f53df9c..785de3119f3 100644
--- a/packages/@ember/application/tests/visit_test.js
+++ b/packages/@ember/application/tests/visit_test.js
@@ -606,7 +606,7 @@ moduleFor(
       });
     }
 
-    [`@test Ember Islands-style setup`](assert) {
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) Ember Islands-style setup`](assert) {
       let xFooInitCalled = false;
       let xFooDidInsertElementCalled = false;
 
@@ -647,14 +647,191 @@ moduleFor(
         instantiate: false,
       });
 
-      this.addTemplate('show', '{{component model.componentName model=model.componentData}}');
+      this.addTemplate(
+        'show',
+        '{{component this.model.componentName model=this.model.componentData}}'
+      );
+
+      this.addTemplate(
+        'components/x-foo',
+        `
+        <h1>X-Foo</h1>
+        <p>Hello {{@model.name}}, I have been clicked {{this.isolatedCounter.value}} times ({{this.sharedCounter.value}} times combined)!</p>
+        `
+      );
+
+      this.add(
+        'component:x-foo',
+        Component.extend({
+          tagName: 'x-foo',
+
+          isolatedCounter: injectService(),
+          sharedCounter: injectService(),
+
+          init() {
+            this._super();
+            xFooInitCalled = true;
+          },
+
+          didInsertElement() {
+            xFooDidInsertElementCalled = true;
+          },
+
+          click() {
+            this.get('isolatedCounter').increment();
+            this.get('sharedCounter').increment();
+          },
+        })
+      );
+
+      this.addTemplate(
+        'components/x-bar',
+        `
+        <h1>X-Bar</h1>
+        <button {{action "incrementCounter"}}>Join {{this.counter.value}} others in clicking me!</button>
+        `
+      );
+
+      this.add(
+        'component:x-bar',
+        Component.extend({
+          counter: injectService('sharedCounter'),
+
+          actions: {
+            incrementCounter() {
+              this.get('counter').increment();
+            },
+          },
+
+          init() {
+            this._super();
+            xBarInitCalled = true;
+          },
+
+          didInsertElement() {
+            xBarDidInsertElementCalled = true;
+          },
+        })
+      );
+
+      let fixtureElement = document.querySelector('#qunit-fixture');
+      let foo = document.createElement('div');
+      let bar = document.createElement('div');
+      fixtureElement.appendChild(foo);
+      fixtureElement.appendChild(bar);
+
+      let data = encodeURIComponent(JSON.stringify({ name: 'Godfrey' }));
+      let instances = [];
+
+      return RSVP.all([
+        runTask(() => {
+          return this.application.visit(`/x-foo?data=${data}`, {
+            rootElement: foo,
+          });
+        }),
+        runTask(() => {
+          return this.application.visit('/x-bar', { rootElement: bar });
+        }),
+      ])
+        .then(_instances => {
+          instances = _instances;
+
+          assert.ok(xFooInitCalled);
+          assert.ok(xFooDidInsertElementCalled);
+
+          assert.ok(xBarInitCalled);
+          assert.ok(xBarDidInsertElementCalled);
+
+          assert.equal(foo.querySelector('h1').textContent, 'X-Foo');
+          assert.equal(
+            foo.querySelector('p').textContent,
+            'Hello Godfrey, I have been clicked 0 times (0 times combined)!'
+          );
+          assert.ok(foo.textContent.indexOf('X-Bar') === -1);
+
+          assert.equal(bar.querySelector('h1').textContent, 'X-Bar');
+          assert.equal(bar.querySelector('button').textContent, 'Join 0 others in clicking me!');
+          assert.ok(bar.textContent.indexOf('X-Foo') === -1);
+
+          runTask(() => {
+            this.click(foo.querySelector('x-foo'));
+          });
+
+          assert.equal(
+            foo.querySelector('p').textContent,
+            'Hello Godfrey, I have been clicked 1 times (1 times combined)!'
+          );
+          assert.equal(bar.querySelector('button').textContent, 'Join 1 others in clicking me!');
+
+          runTask(() => {
+            this.click(bar.querySelector('button'));
+            this.click(bar.querySelector('button'));
+          });
+
+          assert.equal(
+            foo.querySelector('p').textContent,
+            'Hello Godfrey, I have been clicked 1 times (3 times combined)!'
+          );
+          assert.equal(bar.querySelector('button').textContent, 'Join 3 others in clicking me!');
+        })
+        .finally(() => {
+          runTask(() => {
+            instances.forEach(instance => {
+              instance.destroy();
+            });
+          });
+        });
+    }
+
+    [`@feature(EMBER_ROUTING_MODEL_ARG) Ember Islands-style setup`](assert) {
+      let xFooInitCalled = false;
+      let xFooDidInsertElementCalled = false;
+
+      let xBarInitCalled = false;
+      let xBarDidInsertElementCalled = false;
+
+      this.router.map(function() {
+        this.route('show', { path: '/:component_name' });
+      });
+
+      this.add(
+        'route:show',
+        Route.extend({
+          queryParams: {
+            data: { refreshModel: true },
+          },
+
+          model(params) {
+            return {
+              componentName: params.component_name,
+              componentData: params.data ? JSON.parse(params.data) : undefined,
+            };
+          },
+        })
+      );
+
+      let Counter = EmberObject.extend({
+        value: 0,
+
+        increment() {
+          this.incrementProperty('value');
+        },
+      });
+
+      this.add('service:isolatedCounter', Counter);
+      this.add('service:sharedCounter', Counter.create());
+      this.application.registerOptions('service:sharedCounter', {
+        instantiate: false,
+      });
+
+      this.addTemplate('show', '{{component @model.componentName model=@model.componentData}}');
 
       this.addTemplate(
         'components/x-foo',
         `
-      <h1>X-Foo</h1>
-      <p>Hello {{model.name}}, I have been clicked {{isolatedCounter.value}} times ({{sharedCounter.value}} times combined)!</p>
-    `
+        <h1>X-Foo</h1>
+        <p>Hello {{@model.name}}, I have been clicked {{this.isolatedCounter.value}} times ({{this.sharedCounter.value}} times combined)!</p>
+        `
       );
 
       this.add(
@@ -684,9 +861,9 @@ moduleFor(
       this.addTemplate(
         'components/x-bar',
         `
-      <h1>X-Bar</h1>
-      <button {{action "incrementCounter"}}>Join {{counter.value}} others in clicking me!</button>
-    `
+        <h1>X-Bar</h1>
+        <button {{action "incrementCounter"}}>Join {{this.counter.value}} others in clicking me!</button>
+        `
       );
 
       this.add(
diff --git a/packages/@ember/canary-features/index.ts b/packages/@ember/canary-features/index.ts
index c8a8dcb3b10..d678a5cd70b 100644
--- a/packages/@ember/canary-features/index.ts
+++ b/packages/@ember/canary-features/index.ts
@@ -19,6 +19,7 @@ export const DEFAULT_FEATURES = {
   EMBER_METAL_TRACKED_PROPERTIES: true,
   EMBER_CUSTOM_COMPONENT_ARG_PROXY: true,
   EMBER_GLIMMER_SET_COMPONENT_TEMPLATE: true,
+  EMBER_ROUTING_MODEL_ARG: null,
 };
 
 /**
@@ -80,3 +81,4 @@ export const EMBER_CUSTOM_COMPONENT_ARG_PROXY = featureValue(
 export const EMBER_GLIMMER_SET_COMPONENT_TEMPLATE = featureValue(
   FEATURES.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
 );
+export const EMBER_ROUTING_MODEL_ARG = featureValue(FEATURES.EMBER_ROUTING_MODEL_ARG);
diff --git a/packages/ember-testing/tests/integration_test.js b/packages/ember-testing/tests/integration_test.js
index 90bb63b6ddc..b8ce3d868df 100644
--- a/packages/ember-testing/tests/integration_test.js
+++ b/packages/ember-testing/tests/integration_test.js
@@ -1,6 +1,7 @@
 import { moduleFor, AutobootApplicationTestCase, runTask } from 'internal-test-helpers';
 import Test from '../lib/test';
 
+import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
 import { A as emberA } from '@ember/-internals/runtime';
 import { Route } from '@ember/-internals/routing';
 import { jQueryDisabled } from '@ember/-internals/views';
@@ -17,16 +18,29 @@ moduleFor(
       runTask(() => {
         this.createApplication();
 
-        this.addTemplate(
-          'people',
-          `
-        <div>
-          {{#each model as |person|}}
-            <div class="name">{{person.firstName}}</div>
-          {{/each}}
-        </div>
-      `
-        );
+        if (EMBER_ROUTING_MODEL_ARG) {
+          this.addTemplate(
+            'people',
+            `
+            <div>
+              {{#each @model as |person|}}
+                <div class="name">{{person.firstName}}</div>
+              {{/each}}
+            </div>
+            `
+          );
+        } else {
+          this.addTemplate(
+            'people',
+            `
+            <div>
+              {{#each this.model as |person|}}
+                <div class="name">{{person.firstName}}</div>
+              {{/each}}
+            </div>
+            `
+          );
+        }
 
         this.router.map(function() {
           this.route('people', { path: '/' });
diff --git a/packages/ember/tests/homepage_example_test.js b/packages/ember/tests/homepage_example_test.js
index 0573e536bcc..dd3297b5580 100644
--- a/packages/ember/tests/homepage_example_test.js
+++ b/packages/ember/tests/homepage_example_test.js
@@ -7,11 +7,11 @@ import { moduleFor, ApplicationTestCase } from 'internal-test-helpers';
 moduleFor(
   'The example renders correctly',
   class extends ApplicationTestCase {
-    ['@test Render index template into application outlet'](assert) {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Render index template into application outlet'](assert) {
       this.addTemplate('application', '{{outlet}}');
       this.addTemplate(
         'index',
-        '<h1>People</h1><ul>{{#each model as |person|}}<li>Hello, <b>{{person.fullName}}</b>!</li>{{/each}}</ul>'
+        '<h1>People</h1><ul>{{#each this.model as |person|}}<li>Hello, <b>{{person.fullName}}</b>!</li>{{/each}}</ul>'
       );
 
       let Person = EmberObject.extend({
@@ -43,5 +43,44 @@ moduleFor(
         assert.equal($.findAll('li:nth-of-type(2)').text(), 'Hello, Yehuda Katz!');
       });
     }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Render index template into application outlet'](
+      assert
+    ) {
+      this.addTemplate('application', '{{outlet}}');
+      this.addTemplate(
+        'index',
+        '<h1>People</h1><ul>{{#each @model as |person|}}<li>Hello, <b>{{person.fullName}}</b>!</li>{{/each}}</ul>'
+      );
+
+      let Person = EmberObject.extend({
+        firstName: null,
+        lastName: null,
+        fullName: computed('firstName', 'lastName', function() {
+          return `${this.get('firstName')} ${this.get('lastName')}`;
+        }),
+      });
+
+      this.add(
+        'route:index',
+        Route.extend({
+          model() {
+            return emberA([
+              Person.create({ firstName: 'Tom', lastName: 'Dale' }),
+              Person.create({ firstName: 'Yehuda', lastName: 'Katz' }),
+            ]);
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      let $ = this.$();
+
+      assert.equal($.findAll('h1').text(), 'People');
+      assert.equal($.findAll('li').length, 2);
+      assert.equal($.findAll('li:nth-of-type(1)').text(), 'Hello, Tom Dale!');
+      assert.equal($.findAll('li:nth-of-type(2)').text(), 'Hello, Yehuda Katz!');
+    }
   }
 );
diff --git a/packages/ember/tests/routing/decoupled_basic_test.js b/packages/ember/tests/routing/decoupled_basic_test.js
index 1619a53a0d3..c444b617a05 100644
--- a/packages/ember/tests/routing/decoupled_basic_test.js
+++ b/packages/ember/tests/routing/decoupled_basic_test.js
@@ -261,8 +261,10 @@ moduleFor(
       assert.equal(this.$('p').text(), 'YES I AM HOME', 'The homepage template was rendered');
     }
 
-    [`@test Model passed via renderTemplate model is set as controller's model`](assert) {
-      this.addTemplate('bio', '<p>{{model.name}}</p>');
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) Model passed via renderTemplate model is set as controller's model`](
+      assert
+    ) {
+      this.addTemplate('bio', '<p>{{this.model.name}}</p>');
       this.add(
         'route:home',
         Route.extend({
@@ -281,6 +283,39 @@ moduleFor(
       });
     }
 
+    async [`@feature(EMBER_ROUTING_MODEL_ARG) Model passed via renderTemplate model is set as controller's model`](
+      assert
+    ) {
+      this.addTemplate(
+        'bio',
+        '<p>Model: {{@model.name}}</p><p>Controller: {{this.model.name}}</p>'
+      );
+      this.add(
+        'route:home',
+        Route.extend({
+          renderTemplate() {
+            this.render('bio', {
+              model: { name: 'emberjs' },
+            });
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      let text = this.$('p').text();
+
+      assert.ok(
+        text.includes('Model: emberjs'),
+        'Passed model was available as the `@model` argument'
+      );
+
+      assert.ok(
+        text.includes('Controller: emberjs'),
+        "Passed model was set as controller's `model` property"
+      );
+    }
+
     ['@test render uses templateName from route'](assert) {
       this.addTemplate('the_real_home_template', '<p>THIS IS THE REAL HOME</p>');
       this.add(
@@ -635,7 +670,7 @@ moduleFor(
       });
     }
 
-    [`@test The Specials Page getting its controller context by deserializing the params hash`](
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) The Specials Page getting its controller context by deserializing the params hash`](
       assert
     ) {
       this.router.map(function() {
@@ -654,7 +689,7 @@ moduleFor(
         })
       );
 
-      this.addTemplate('special', '<p>{{model.menuItemId}}</p>');
+      this.addTemplate('special', '<p>{{this.model.menuItemId}}</p>');
 
       return this.visit('/specials/1').then(() => {
         let text = this.$('p').text();
@@ -663,7 +698,56 @@ moduleFor(
       });
     }
 
-    ['@test The Specials Page defaults to looking models up via `find`']() {
+    [`@feature(EMBER_ROUTING_MODEL_ARG) The Specials Page getting its model by deserializing the params hash`](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+        this.route('special', { path: '/specials/:menu_item_id' });
+      });
+
+      this.add(
+        'route:special',
+        Route.extend({
+          model(params) {
+            return EmberObject.create({
+              menuItemId: params.menu_item_id,
+            });
+          },
+        })
+      );
+
+      this.addTemplate('special', '<p>{{@model.menuItemId}}</p>');
+
+      return this.visit('/specials/1').then(() => {
+        let text = this.$('p').text();
+
+        assert.equal(text, '1', 'The model was used to render the template');
+      });
+    }
+
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) The Specials Page defaults to looking models up via `find`']() {
+      let MenuItem = EmberObject.extend();
+      MenuItem.reopenClass({
+        find(id) {
+          return MenuItem.create({ id });
+        },
+      });
+      this.add('model:menu_item', MenuItem);
+
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+        this.route('special', { path: '/specials/:menu_item_id' });
+      });
+
+      this.addTemplate('special', '{{this.model.id}}');
+
+      return this.visit('/specials/1').then(() => {
+        this.assertText('1', 'The model was used to render the template');
+      });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) The Specials Page defaults to looking models up via `find`']() {
       let MenuItem = EmberObject.extend();
       MenuItem.reopenClass({
         find(id) {
@@ -677,14 +761,14 @@ moduleFor(
         this.route('special', { path: '/specials/:menu_item_id' });
       });
 
-      this.addTemplate('special', '{{model.id}}');
+      this.addTemplate('special', '{{@model.id}}');
 
       return this.visit('/specials/1').then(() => {
         this.assertText('1', 'The model was used to render the template');
       });
     }
 
-    ['@test The Special Page returning a promise puts the app into a loading state until the promise is resolved']() {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) The Special Page returning a promise puts the app into a loading state until the promise is resolved']() {
       this.router.map(function() {
         this.route('home', { path: '/' });
         this.route('special', { path: '/specials/:menu_item_id' });
@@ -705,7 +789,7 @@ moduleFor(
 
       this.add('model:menu_item', MenuItem);
 
-      this.addTemplate('special', '<p>{{model.id}}</p>');
+      this.addTemplate('special', '<p>{{this.model.id}}</p>');
       this.addTemplate('loading', '<p>LOADING!</p>');
 
       let visited = runTask(() => this.visit('/specials/1'));
@@ -718,7 +802,41 @@ moduleFor(
       });
     }
 
-    [`@test The loading state doesn't get entered for promises that resolve on the same run loop`](
+    ['@feature(EMBER_ROUTING_MODEL_ARG) The Special Page returning a promise puts the app into a loading state until the promise is resolved']() {
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+        this.route('special', { path: '/specials/:menu_item_id' });
+      });
+
+      let menuItem, resolve;
+
+      let MenuItem = EmberObject.extend();
+      MenuItem.reopenClass({
+        find(id) {
+          menuItem = MenuItem.create({ id: id });
+
+          return new RSVP.Promise(function(res) {
+            resolve = res;
+          });
+        },
+      });
+
+      this.add('model:menu_item', MenuItem);
+
+      this.addTemplate('special', '<p>{{@model.id}}</p>');
+      this.addTemplate('loading', '<p>LOADING!</p>');
+
+      let visited = runTask(() => this.visit('/specials/1'));
+      this.assertText('LOADING!', 'The app is in the loading state');
+
+      resolve(menuItem);
+
+      return visited.then(() => {
+        this.assertText('1', 'The app is now in the specials state');
+      });
+    }
+
+    [`@feature(!EMBER_ROUTING_MODEL_ARG) The loading state doesn't get entered for promises that resolve on the same run loop`](
       assert
     ) {
       this.router.map(function() {
@@ -744,7 +862,43 @@ moduleFor(
         })
       );
 
-      this.addTemplate('special', '<p>{{model.id}}</p>');
+      this.addTemplate('special', '<p>{{this.model.id}}</p>');
+      this.addTemplate('loading', '<p>LOADING!</p>');
+
+      return this.visit('/specials/1').then(() => {
+        let text = this.$('p').text();
+
+        assert.equal(text, '1', 'The app is now in the specials state');
+      });
+    }
+
+    [`@feature(EMBER_ROUTING_MODEL_ARG) The loading state doesn't get entered for promises that resolve on the same run loop`](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+        this.route('special', { path: '/specials/:menu_item_id' });
+      });
+
+      let MenuItem = EmberObject.extend();
+      MenuItem.reopenClass({
+        find(id) {
+          return { id: id };
+        },
+      });
+
+      this.add('model:menu_item', MenuItem);
+
+      this.add(
+        'route:loading',
+        Route.extend({
+          enter() {
+            assert.ok(false, "LoadingRoute shouldn't have been entered.");
+          },
+        })
+      );
+
+      this.addTemplate('special', '<p>{{@model.id}}</p>');
       this.addTemplate('loading', '<p>LOADING!</p>');
 
       return this.visit('/specials/1').then(() => {
@@ -852,7 +1006,9 @@ moduleFor(
       return promise;
     }
 
-    ['@test Moving from one page to another triggers the correct callbacks'](assert) {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Moving from one page to another triggers the correct callbacks'](
+      assert
+    ) {
       assert.expect(3);
 
       this.router.map(function() {
@@ -869,7 +1025,7 @@ moduleFor(
       this.add('model:menu_item', MenuItem);
 
       this.addTemplate('home', '<h3>Home</h3>');
-      this.addTemplate('special', '<p>{{model.id}}</p>');
+      this.addTemplate('special', '<p>{{this.model.id}}</p>');
 
       return this.visit('/')
         .then(() => {
@@ -885,7 +1041,142 @@ moduleFor(
         });
     }
 
-    ['@test Nested callbacks are not exited when moving to siblings'](assert) {
+    ['@feature(EMBER_ROUTING_MODEL_ARG) Moving from one page to another triggers the correct callbacks'](
+      assert
+    ) {
+      assert.expect(3);
+
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+        this.route('special', { path: '/specials/:menu_item_id' });
+      });
+
+      let MenuItem = EmberObject.extend();
+      MenuItem.reopenClass({
+        find(id) {
+          return MenuItem.create({ id: id });
+        },
+      });
+      this.add('model:menu_item', MenuItem);
+
+      this.addTemplate('home', '<h3>Home</h3>');
+      this.addTemplate('special', '<p>{{@model.id}}</p>');
+
+      return this.visit('/')
+        .then(() => {
+          this.assertText('Home', 'The app is now in the initial state');
+
+          let promiseContext = MenuItem.create({ id: 1 });
+
+          return this.visit('/specials/1', promiseContext);
+        })
+        .then(() => {
+          assert.equal(this.currentURL, '/specials/1');
+          this.assertText('1', 'The app is now transitioned');
+        });
+    }
+
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Nested callbacks are not exited when moving to siblings'](
+      assert
+    ) {
+      let rootSetup = 0;
+      let rootRender = 0;
+      let rootModel = 0;
+      let rootSerialize = 0;
+      let menuItem;
+      let rootElement;
+
+      let MenuItem = EmberObject.extend();
+      MenuItem.reopenClass({
+        find(id) {
+          menuItem = MenuItem.create({ id: id });
+          return menuItem;
+        },
+      });
+
+      this.router.map(function() {
+        this.route('root', { path: '/' }, function() {
+          this.route('special', {
+            path: '/specials/:menu_item_id',
+            resetNamespace: true,
+          });
+        });
+      });
+
+      this.add(
+        'route:root',
+        Route.extend({
+          model() {
+            rootModel++;
+            return this._super(...arguments);
+          },
+
+          setupController() {
+            rootSetup++;
+          },
+
+          renderTemplate() {
+            rootRender++;
+          },
+
+          serialize() {
+            rootSerialize++;
+            return this._super(...arguments);
+          },
+        })
+      );
+
+      this.add('route:loading', Route.extend({}));
+      this.add('route:home', Route.extend({}));
+      this.add(
+        'route:special',
+        Route.extend({
+          model({ menu_item_id }) {
+            return MenuItem.find(menu_item_id);
+          },
+          setupController(controller, model) {
+            set(controller, 'model', model);
+          },
+        })
+      );
+
+      this.addTemplate('root.index', '<h3>Home</h3>');
+      this.addTemplate('special', '<p>{{this.model.id}}</p>');
+      this.addTemplate('loading', '<p>LOADING!</p>');
+
+      return this.visit('/').then(() => {
+        rootElement = document.getElementById('qunit-fixture');
+
+        assert.equal(
+          getTextOf(rootElement.querySelector('h3')),
+          'Home',
+          'The app is now in the initial state'
+        );
+        assert.equal(rootSetup, 1, 'The root setup was triggered');
+        assert.equal(rootRender, 1, 'The root render was triggered');
+        assert.equal(rootSerialize, 0, 'The root serialize was not called');
+        assert.equal(rootModel, 1, 'The root model was called');
+
+        let router = this.applicationInstance.lookup('router:main');
+        let menuItem = MenuItem.create({ id: 1 });
+
+        return router.transitionTo('special', menuItem).then(function() {
+          assert.equal(rootSetup, 1, 'The root setup was not triggered again');
+          assert.equal(rootRender, 1, 'The root render was not triggered again');
+          assert.equal(rootSerialize, 0, 'The root serialize was not called');
+
+          // TODO: Should this be changed?
+          assert.equal(rootModel, 1, 'The root model was called again');
+
+          assert.deepEqual(router.location.path, '/specials/1');
+          assert.equal(router.currentPath, 'root.special');
+        });
+      });
+    }
+
+    ['@feature(EMBER_ROUTING_MODEL_ARG) Nested callbacks are not exited when moving to siblings'](
+      assert
+    ) {
       let rootSetup = 0;
       let rootRender = 0;
       let rootModel = 0;
@@ -948,7 +1239,7 @@ moduleFor(
       );
 
       this.addTemplate('root.index', '<h3>Home</h3>');
-      this.addTemplate('special', '<p>{{model.id}}</p>');
+      this.addTemplate('special', '<p>{{@model.id}}</p>');
       this.addTemplate('loading', '<p>LOADING!</p>');
 
       return this.visit('/').then(() => {
@@ -981,7 +1272,56 @@ moduleFor(
       });
     }
 
-    async ['@test Events are triggered on the controller if a matching action name is implemented'](
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Events are triggered on the controller if a matching action name is implemented'](
+      assert
+    ) {
+      let done = assert.async();
+
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+      });
+
+      let model = { name: 'Tom Dale' };
+      let stateIsNotCalled = true;
+
+      this.add(
+        'route:home',
+        Route.extend({
+          model() {
+            return model;
+          },
+
+          actions: {
+            showStuff() {
+              stateIsNotCalled = false;
+            },
+          },
+        })
+      );
+
+      this.addTemplate('home', '<a {{action "showStuff" this.model}}>{{this.name}}</a>');
+      this.add(
+        'controller:home',
+        Controller.extend({
+          actions: {
+            showStuff(context) {
+              assert.ok(stateIsNotCalled, 'an event on the state is not triggered');
+              assert.deepEqual(context, { name: 'Tom Dale' }, 'an event with context is passed');
+              done();
+            },
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      document
+        .getElementById('qunit-fixture')
+        .querySelector('a')
+        .click();
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Events are triggered on the controller if a matching action name is implemented'](
       assert
     ) {
       let done = assert.async();
@@ -1008,7 +1348,7 @@ moduleFor(
         })
       );
 
-      this.addTemplate('home', '<a {{action "showStuff" model}}>{{name}}</a>');
+      this.addTemplate('home', '<a {{action "showStuff" @model}}>{{this.name}}</a>');
       this.add(
         'controller:home',
         Controller.extend({
@@ -1030,7 +1370,7 @@ moduleFor(
         .click();
     }
 
-    async ['@test Events are triggered on the current state when defined in `actions` object'](
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Events are triggered on the current state when defined in `actions` object'](
       assert
     ) {
       let done = assert.async();
@@ -1059,7 +1399,7 @@ moduleFor(
       });
 
       this.add('route:home', HomeRoute);
-      this.addTemplate('home', '<a {{action "showStuff" model}}>{{model.name}}</a>');
+      this.addTemplate('home', '<a {{action "showStuff" this.model}}>{{this.model.name}}</a>');
 
       await this.visit('/');
 
@@ -1069,7 +1409,46 @@ moduleFor(
         .click();
     }
 
-    async ['@test Events defined in `actions` object are triggered on the current state when routes are nested'](
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Events are triggered on the current state when defined in `actions` object'](
+      assert
+    ) {
+      let done = assert.async();
+
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+      });
+
+      let model = { name: 'Tom Dale' };
+      let HomeRoute = Route.extend({
+        model() {
+          return model;
+        },
+
+        actions: {
+          showStuff(obj) {
+            assert.ok(this instanceof HomeRoute, 'the handler is an App.HomeRoute');
+            assert.deepEqual(
+              Object.assign({}, obj),
+              { name: 'Tom Dale' },
+              'the context is correct'
+            );
+            done();
+          },
+        },
+      });
+
+      this.add('route:home', HomeRoute);
+      this.addTemplate('home', '<a {{action "showStuff" @model}}>{{@model.name}}</a>');
+
+      await this.visit('/');
+
+      document
+        .getElementById('qunit-fixture')
+        .querySelector('a')
+        .click();
+    }
+
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Events defined in `actions` object are triggered on the current state when routes are nested'](
       assert
     ) {
       let done = assert.async();
@@ -1105,7 +1484,56 @@ moduleFor(
         })
       );
 
-      this.addTemplate('root.index', '<a {{action "showStuff" model}}>{{model.name}}</a>');
+      this.addTemplate(
+        'root.index',
+        '<a {{action "showStuff" this.model}}>{{this.model.name}}</a>'
+      );
+
+      await this.visit('/');
+
+      document
+        .getElementById('qunit-fixture')
+        .querySelector('a')
+        .click();
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Events defined in `actions` object are triggered on the current state when routes are nested'](
+      assert
+    ) {
+      let done = assert.async();
+
+      this.router.map(function() {
+        this.route('root', { path: '/' }, function() {
+          this.route('index', { path: '/' });
+        });
+      });
+
+      let model = { name: 'Tom Dale' };
+
+      let RootRoute = Route.extend({
+        actions: {
+          showStuff(obj) {
+            assert.ok(this instanceof RootRoute, 'the handler is an App.HomeRoute');
+            assert.deepEqual(
+              Object.assign({}, obj),
+              { name: 'Tom Dale' },
+              'the context is correct'
+            );
+            done();
+          },
+        },
+      });
+      this.add('route:root', RootRoute);
+      this.add(
+        'route:root.index',
+        Route.extend({
+          model() {
+            return model;
+          },
+        })
+      );
+
+      this.addTemplate('root.index', '<a {{action "showStuff" @model}}>{{@model.name}}</a>');
 
       await this.visit('/');
 
@@ -1165,7 +1593,7 @@ moduleFor(
       });
     }
 
-    async ['@test Actions are not triggered on the controller if a matching action name is implemented as a method'](
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Actions are not triggered on the controller if a matching action name is implemented as a method'](
       assert
     ) {
       let done = assert.async();
@@ -1194,7 +1622,56 @@ moduleFor(
         })
       );
 
-      this.addTemplate('home', '<a {{action "showStuff" model}}>{{name}}</a>');
+      this.addTemplate('home', '<a {{action "showStuff" this.model}}>{{this.name}}</a>');
+
+      this.add(
+        'controller:home',
+        Controller.extend({
+          showStuff() {
+            stateIsNotCalled = false;
+            assert.ok(stateIsNotCalled, 'an event on the state is not triggered');
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      document
+        .getElementById('qunit-fixture')
+        .querySelector('a')
+        .click();
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Actions are not triggered on the controller if a matching action name is implemented as a method'](
+      assert
+    ) {
+      let done = assert.async();
+
+      this.router.map(function() {
+        this.route('home', { path: '/' });
+      });
+
+      let model = { name: 'Tom Dale' };
+      let stateIsNotCalled = true;
+
+      this.add(
+        'route:home',
+        Route.extend({
+          model() {
+            return model;
+          },
+
+          actions: {
+            showStuff(context) {
+              assert.ok(stateIsNotCalled, 'an event on the state is not triggered');
+              assert.deepEqual(context, { name: 'Tom Dale' }, 'an event with context is passed');
+              done();
+            },
+          },
+        })
+      );
+
+      this.addTemplate('home', '<a {{action "showStuff" @model}}>{{this.name}}</a>');
 
       this.add(
         'controller:home',
@@ -2276,7 +2753,9 @@ moduleFor(
       });
     }
 
-    ["@test The template is not re-rendered when the route's context changes"](assert) {
+    ["@feature(!EMBER_ROUTING_MODEL_ARG) The template is not re-rendered when the route's context changes"](
+      assert
+    ) {
       this.router.map(function() {
         this.route('page', { path: '/page/:name' });
       });
@@ -2300,7 +2779,7 @@ moduleFor(
         })
       );
 
-      this.addTemplate('page', '<p>{{model.name}}{{foo-bar}}</p>');
+      this.addTemplate('page', '<p>{{this.model.name}}{{foo-bar}}</p>');
 
       let rootElement = document.getElementById('qunit-fixture');
       return this.visit('/page/first')
@@ -2323,6 +2802,55 @@ moduleFor(
         });
     }
 
+    async ["@feature(EMBER_ROUTING_MODEL_ARG) The template is not re-rendered when the route's model changes"](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('page', { path: '/page/:name' });
+      });
+
+      this.add(
+        'route:page',
+        Route.extend({
+          model(params) {
+            return EmberObject.create({ name: params.name });
+          },
+        })
+      );
+
+      let insertionCount = 0;
+      this.add(
+        'component:foo-bar',
+        Component.extend({
+          didInsertElement() {
+            insertionCount += 1;
+          },
+        })
+      );
+
+      this.addTemplate('page', '<p>{{@model.name}}{{foo-bar}}</p>');
+
+      let rootElement = document.getElementById('qunit-fixture');
+
+      await this.visit('/page/first');
+
+      assert.ok(true, '/page/first has been handled');
+      assert.equal(getTextOf(rootElement.querySelector('p')), 'first');
+      assert.equal(insertionCount, 1);
+
+      await this.visit('/page/second');
+
+      assert.ok(true, '/page/second has been handled');
+      assert.equal(getTextOf(rootElement.querySelector('p')), 'second');
+      assert.equal(insertionCount, 1, 'view should have inserted only once');
+      let router = this.applicationInstance.lookup('router:main');
+
+      await run(() => router.transitionTo('page', EmberObject.create({ name: 'third' })));
+
+      assert.equal(getTextOf(rootElement.querySelector('p')), 'third');
+      assert.equal(insertionCount, 1, 'view should still have inserted only once');
+    }
+
     ['@test The template is not re-rendered when two routes present the exact same template & controller'](
       assert
     ) {
diff --git a/packages/ember/tests/routing/router_service_test/transitionTo_test.js b/packages/ember/tests/routing/router_service_test/transitionTo_test.js
index 4be05d10a45..f600257f015 100644
--- a/packages/ember/tests/routing/router_service_test/transitionTo_test.js
+++ b/packages/ember/tests/routing/router_service_test/transitionTo_test.js
@@ -157,14 +157,14 @@ moduleFor(
       });
     }
 
-    ['@test RouterService#transitionTo with dynamic segment'](assert) {
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) RouterService#transitionTo with dynamic segment'](assert) {
       assert.expect(3);
 
       let componentInstance;
       let dynamicModel = { id: 1, contents: 'much dynamicism' };
 
       this.addTemplate('parent.index', '{{foo-bar}}');
-      this.addTemplate('dynamic', '{{model.contents}}');
+      this.addTemplate('dynamic', '{{this.model.contents}}');
 
       this.addComponent('foo-bar', {
         ComponentClass: Component.extend({
@@ -193,7 +193,47 @@ moduleFor(
       });
     }
 
-    ['@test RouterService#transitionTo with dynamic segment and model hook'](assert) {
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) RouterService#transitionTo with dynamic segment'](
+      assert
+    ) {
+      assert.expect(3);
+
+      let componentInstance;
+      let dynamicModel = { id: 1, contents: 'much dynamicism' };
+
+      this.addTemplate('parent.index', '{{foo-bar}}');
+      this.addTemplate('dynamic', '{{@model.contents}}');
+
+      this.addComponent('foo-bar', {
+        ComponentClass: Component.extend({
+          routerService: injectService('router'),
+          init() {
+            this._super();
+            componentInstance = this;
+          },
+          actions: {
+            transitionToDynamic() {
+              get(this, 'routerService').transitionTo('dynamic', dynamicModel);
+            },
+          },
+        }),
+        template: `foo-bar`,
+      });
+
+      await this.visit('/');
+
+      run(function() {
+        componentInstance.send('transitionToDynamic');
+      });
+
+      assert.equal(this.routerService.get('currentRouteName'), 'dynamic');
+      assert.equal(this.routerService.get('currentURL'), '/dynamic/1');
+      this.assertText('much dynamicism');
+    }
+
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) RouterService#transitionTo with dynamic segment and model hook'](
+      assert
+    ) {
       assert.expect(3);
 
       let componentInstance;
@@ -209,7 +249,7 @@ moduleFor(
       );
 
       this.addTemplate('parent.index', '{{foo-bar}}');
-      this.addTemplate('dynamic', '{{model.contents}}');
+      this.addTemplate('dynamic', '{{this.model.contents}}');
 
       this.addComponent('foo-bar', {
         ComponentClass: Component.extend({
@@ -238,6 +278,53 @@ moduleFor(
       });
     }
 
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) RouterService#transitionTo with dynamic segment and model hook'](
+      assert
+    ) {
+      assert.expect(3);
+
+      let componentInstance;
+      let dynamicModel = { id: 1, contents: 'much dynamicism' };
+
+      this.add(
+        'route:dynamic',
+        Route.extend({
+          model() {
+            return dynamicModel;
+          },
+        })
+      );
+
+      this.addTemplate('parent.index', '{{foo-bar}}');
+      this.addTemplate('dynamic', '{{@model.contents}}');
+
+      this.addComponent('foo-bar', {
+        ComponentClass: Component.extend({
+          routerService: injectService('router'),
+          init() {
+            this._super();
+            componentInstance = this;
+          },
+          actions: {
+            transitionToDynamic() {
+              get(this, 'routerService').transitionTo('dynamic', 1);
+            },
+          },
+        }),
+        template: `foo-bar`,
+      });
+
+      await this.visit('/');
+
+      run(function() {
+        componentInstance.send('transitionToDynamic');
+      });
+
+      assert.equal(this.routerService.get('currentRouteName'), 'dynamic');
+      assert.equal(this.routerService.get('currentURL'), '/dynamic/1');
+      this.assertText('much dynamicism');
+    }
+
     ['@test RouterService#transitionTo with basic query params does not remove query param defaults'](
       assert
     ) {
diff --git a/packages/ember/tests/routing/substates_test.js b/packages/ember/tests/routing/substates_test.js
index 303025e751e..76a0fc25b4f 100644
--- a/packages/ember/tests/routing/substates_test.js
+++ b/packages/ember/tests/routing/substates_test.js
@@ -381,10 +381,10 @@ moduleFor(
       return promise;
     }
 
-    ['@test Prioritized error substate entry works with preserved-namespaec nested routes'](
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Prioritized error substate entry works with preserved-namespace nested routes'](
       assert
     ) {
-      this.addTemplate('foo.bar_error', 'FOOBAR ERROR: {{model.msg}}');
+      this.addTemplate('foo.bar_error', 'FOOBAR ERROR: {{this.model.msg}}');
       this.addTemplate('foo.bar', 'YAY');
 
       this.router.map(function() {
@@ -415,6 +415,41 @@ moduleFor(
         });
       });
     }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Prioritized error substate entry works with preserved-namespace nested routes'](
+      assert
+    ) {
+      this.addTemplate('foo.bar_error', 'FOOBAR ERROR: {{@model.msg}}');
+      this.addTemplate('foo.bar', 'YAY');
+
+      this.router.map(function() {
+        this.route('foo', function() {
+          this.route('bar');
+        });
+      });
+
+      this.add(
+        'route:foo.bar',
+        Route.extend({
+          model() {
+            return RSVP.reject({
+              msg: 'did it broke?',
+            });
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      await this.visit('/foo/bar');
+
+      assert.equal(
+        this.$('#app').text(),
+        'FOOBAR ERROR: did it broke?',
+        `foo.bar_error was entered (as opposed to something like foo/foo/bar_error)`
+      );
+    }
+
     ['@test Prioritized loading substate entry works with auto-generated index routes'](assert) {
       let deferred = RSVP.defer();
       this.addTemplate('foo.index_loading', 'FOO LOADING');
@@ -457,8 +492,10 @@ moduleFor(
       return promise;
     }
 
-    ['@test Prioritized error substate entry works with auto-generated index routes'](assert) {
-      this.addTemplate('foo.index_error', 'FOO ERROR: {{model.msg}}');
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Prioritized error substate entry works with auto-generated index routes'](
+      assert
+    ) {
+      this.addTemplate('foo.index_error', 'FOO ERROR: {{this.model.msg}}');
       this.addTemplate('foo.index', 'YAY');
       this.addTemplate('foo', '{{outlet}}');
 
@@ -496,7 +533,50 @@ moduleFor(
       });
     }
 
-    ['@test Rejected promises returned from ApplicationRoute transition into top-level application_error'](
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Prioritized error substate entry works with auto-generated index routes'](
+      assert
+    ) {
+      this.addTemplate('foo.index_error', 'FOO ERROR: {{@model.msg}}');
+      this.addTemplate('foo.index', 'YAY');
+      this.addTemplate('foo', '{{outlet}}');
+
+      this.router.map(function() {
+        this.route('foo', function() {
+          this.route('bar');
+        });
+      });
+
+      this.add(
+        'route:foo.index',
+        Route.extend({
+          model() {
+            return RSVP.reject({
+              msg: 'did it broke?',
+            });
+          },
+        })
+      );
+      this.add(
+        'route:foo',
+        Route.extend({
+          model() {
+            return true;
+          },
+        })
+      );
+
+      await this.visit('/');
+
+      await this.visit('/foo');
+
+      assert.equal(
+        this.$('#app').text(),
+        'FOO ERROR: did it broke?',
+        'foo.index_error was entered'
+      );
+    }
+
+    ['@feature(!EMBER_ROUTING_MODEL_ARG) Rejected promises returned from ApplicationRoute transition into top-level application_error'](
       assert
     ) {
       let reject = true;
@@ -520,9 +600,7 @@ moduleFor(
 
       this.addTemplate(
         'application_error',
-        `
-      <p id="toplevel-error">TOPLEVEL ERROR: {{model.msg}}</p>
-    `
+        `<p id="toplevel-error">TOPLEVEL ERROR: {{this.model.msg}}</p>`
       );
 
       return this.visit('/')
@@ -539,6 +617,48 @@ moduleFor(
           assert.equal(text, 'INDEX', 'the index route resolved');
         });
     }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Rejected promises returned from ApplicationRoute transition into top-level application_error'](
+      assert
+    ) {
+      let reject = true;
+
+      this.addTemplate('index', '<div id="index">INDEX</div>');
+      this.add(
+        'route:application',
+        Route.extend({
+          init() {
+            this._super(...arguments);
+          },
+          model() {
+            if (reject) {
+              return RSVP.reject({ msg: 'BAD NEWS BEARS' });
+            } else {
+              return {};
+            }
+          },
+        })
+      );
+
+      this.addTemplate(
+        'application_error',
+        `<p id="toplevel-error">TOPLEVEL ERROR: {{@model.msg}}</p>`
+      );
+
+      await this.visit('/');
+
+      assert.equal(
+        this.$('#toplevel-error').text(),
+        'TOPLEVEL ERROR: BAD NEWS BEARS',
+        'toplevel error rendered'
+      );
+
+      reject = false;
+
+      await this.visit('/');
+
+      assert.equal(this.$('#index').text(), 'INDEX', 'the index route resolved');
+    }
   }
 );
 
@@ -674,10 +794,12 @@ moduleFor(
       return promise;
     }
 
-    async ['@test Default error event moves into nested route'](assert) {
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Default error event moves into nested route'](
+      assert
+    ) {
       await this.visit('/');
 
-      this.addTemplate('grandma.error', 'ERROR: {{model.msg}}');
+      this.addTemplate('grandma.error', 'ERROR: {{this.model.msg}}');
 
       this.add(
         'route:mom.sally',
@@ -707,6 +829,39 @@ moduleFor(
       });
     }
 
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Default error event moves into nested route'](
+      assert
+    ) {
+      await this.visit('/');
+
+      this.addTemplate('grandma.error', 'ERROR: {{@model.msg}}');
+
+      this.add(
+        'route:mom.sally',
+        Route.extend({
+          model() {
+            step(assert, 1, 'MomSallyRoute#model');
+            return RSVP.reject({
+              msg: 'did it broke?',
+            });
+          },
+          actions: {
+            error() {
+              step(assert, 2, 'MomSallyRoute#actions.error');
+              return true;
+            },
+          },
+        })
+      );
+
+      await this.visit('/grandma/mom/sally');
+
+      step(assert, 3, 'App finished loading');
+
+      assert.equal(this.$('#app').text(), 'GRANDMA ERROR: did it broke?', 'error bubbles');
+      assert.equal(this.currentPath, 'grandma.error', 'Initial route fully loaded');
+    }
+
     async [`@test Non-bubbled errors that re-throw aren't swallowed`](assert) {
       await this.visit('/');
 
@@ -856,13 +1011,52 @@ moduleFor(
       );
     }
 
-    async ['@test Default error events move into nested route, prioritizing more specifically named error routes - NEW'](
+    async ['@feature(!EMBER_ROUTING_MODEL_ARG) Default error events move into nested route, prioritizing more specifically named error routes - NEW'](
+      assert
+    ) {
+      await this.visit('/');
+
+      this.addTemplate('grandma.error', 'ERROR: {{this.model.msg}}');
+      this.addTemplate('mom_error', 'MOM ERROR: {{this.model.msg}}');
+
+      this.add(
+        'route:mom.sally',
+        Route.extend({
+          model() {
+            step(assert, 1, 'MomSallyRoute#model');
+            return RSVP.reject({
+              msg: 'did it broke?',
+            });
+          },
+          actions: {
+            error() {
+              step(assert, 2, 'MomSallyRoute#actions.error');
+              return true;
+            },
+          },
+        })
+      );
+
+      await this.visit('/grandma/mom/sally');
+
+      step(assert, 3, 'Application finished booting');
+
+      assert.equal(
+        this.$('#app').text(),
+        'GRANDMA MOM ERROR: did it broke?',
+        'the more specifically named mome error substate was entered over the other error route'
+      );
+
+      assert.equal(this.currentPath, 'grandma.mom_error', 'Initial route fully loaded');
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) Default error events move into nested route, prioritizing more specifically named error routes - NEW'](
       assert
     ) {
       await this.visit('/');
 
-      this.addTemplate('grandma.error', 'ERROR: {{model.msg}}');
-      this.addTemplate('mom_error', 'MOM ERROR: {{model.msg}}');
+      this.addTemplate('grandma.error', 'ERROR: {{@model.msg}}');
+      this.addTemplate('mom_error', 'MOM ERROR: {{@model.msg}}');
 
       this.add(
         'route:mom.sally',
diff --git a/tests/node/helpers/setup-component.js b/tests/node/helpers/setup-component.js
index 3ef3ebc82b2..7cb95e297d4 100644
--- a/tests/node/helpers/setup-component.js
+++ b/tests/node/helpers/setup-component.js
@@ -73,6 +73,7 @@ function setupComponentTest() {
       outlet: 'main',
       name: 'application',
       controller: module,
+      model: undefined,
       template: outletTemplateFactory(module.owner),
     },
 
@@ -102,6 +103,7 @@ function render(_template) {
     outlet: 'main',
     name: 'index',
     controller: this,
+    model: undefined,
     template: templateFactory(this.owner),
   };
 

From c617526e717e7ebd05fd34a01436001f00b9c657 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Mon, 2 Sep 2019 23:02:19 +0900
Subject: [PATCH 5/6] [FEATURE MODEL_ARG] Implement RFC emberjs/rfcs#523 for
 `{{mount}}`

This is an extension to the RFC not explicitly written in the RFC text.

I missed this when writing the RFC, but we felt that `{{mount}}` with
the `model=` argument is even more clearly an argument, and that we
explicitly decided to restrict the `{{mount}}` syntax to a single
`model` argument (as opposed to arbitrary named arguments), so it is
within the spirit of the RFC to make this work also.

This also refactor the implementation of `{{mount}}` to do less custom
work (like diffing the tag) and let Glimmer VM do more of the work via
the usual paths.
---
 .../glimmer/lib/component-managers/mount.ts   | 73 ++++++++---------
 .../-internals/glimmer/lib/syntax/mount.ts    | 80 ++++++++++++++-----
 .../integration/application/engine-test.js    | 35 ++++++--
 .../glimmer/tests/integration/mount-test.js   | 57 +++++++++++--
 4 files changed, 175 insertions(+), 70 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
index 35a35432b07..cd294e3148e 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
@@ -1,12 +1,15 @@
 import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities } from '@glimmer/interfaces';
-import { CONSTANT_TAG, Tag, validate, value, VersionedPathReference } from '@glimmer/reference';
-import { ComponentDefinition, Invocation, WithDynamicLayout } from '@glimmer/runtime';
+import { CONSTANT_TAG, Tag, VersionedPathReference } from '@glimmer/reference';
+import { Arguments, ComponentDefinition, Invocation, WithDynamicLayout } from '@glimmer/runtime';
 import { Destroyable, Opaque, Option } from '@glimmer/util';
 
 import { Owner } from '@ember/-internals/owner';
 import { generateControllerFactory } from '@ember/-internals/routing';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
+import { assert } from '@ember/debug';
+
 import { TemplateFactory } from '../..';
 import Environment from '../environment';
 import RuntimeResolver from '../resolver';
@@ -23,24 +26,18 @@ interface EngineState {
   engine: EngineInstance;
   controller: any;
   self: RootReference<any>;
-  tag: Tag;
-}
-
-interface EngineWithModelState extends EngineState {
-  modelRef: VersionedPathReference<Opaque>;
-  modelRev: number;
+  modelRef?: VersionedPathReference<Opaque>;
 }
 
 interface EngineDefinitionState {
   name: string;
-  modelRef: VersionedPathReference<Opaque> | undefined;
 }
 
 const CAPABILITIES = {
   dynamicLayout: true,
   dynamicTag: false,
   prepareArgs: false,
-  createArgs: false,
+  createArgs: true,
   attributeHook: false,
   elementHook: false,
   createCaller: true,
@@ -49,10 +46,13 @@ const CAPABILITIES = {
   createInstance: true,
 };
 
-class MountManager
-  extends AbstractManager<EngineState | EngineWithModelState, EngineDefinitionState>
-  implements
-    WithDynamicLayout<EngineState | EngineWithModelState, OwnedTemplateMeta, RuntimeResolver> {
+// TODO
+// This "disables" the "@model" feature by making the arg untypable syntatically
+// Delete this when EMBER_ROUTING_MODEL_ARG has shipped
+export const MODEL_ARG_NAME = EMBER_ROUTING_MODEL_ARG || !DEBUG ? 'model' : ' untypable model arg ';
+
+class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
+  implements WithDynamicLayout<EngineState, OwnedTemplateMeta, RuntimeResolver> {
   getDynamicLayout(state: EngineState, _: RuntimeResolver): Invocation {
     let templateFactory = state.engine.lookup('template:application') as TemplateFactory;
     let template = templateFactory(state.engine);
@@ -68,9 +68,9 @@ class MountManager
     return CAPABILITIES;
   }
 
-  create(environment: Environment, state: EngineDefinitionState) {
+  create(environment: Environment, { name }: EngineDefinitionState, args: Arguments) {
     if (DEBUG) {
-      this._pushEngineToDebugStack(`engine:${state.name}`, environment);
+      this._pushEngineToDebugStack(`engine:${name}`, environment);
     }
 
     // TODO
@@ -78,7 +78,7 @@ class MountManager
     // we should resolve the engine app template in the helper
     // it also should use the owner that looked up the mount helper.
 
-    let engine = environment.owner.buildChildEngineInstance<EngineInstance>(state.name);
+    let engine = environment.owner.buildChildEngineInstance<EngineInstance>(name);
 
     engine.boot();
 
@@ -86,21 +86,22 @@ class MountManager
     let controllerFactory = applicationFactory || generateControllerFactory(engine, 'application');
     let controller: any;
     let self: RootReference<any>;
-    let bucket: EngineState | EngineWithModelState;
-    let tag: Tag;
-    let modelRef = state.modelRef;
+    let bucket: EngineState;
+    let modelRef;
+
+    if (args.named.has(MODEL_ARG_NAME)) {
+      modelRef = args.named.get(MODEL_ARG_NAME);
+    }
+
     if (modelRef === undefined) {
       controller = controllerFactory.create();
       self = new RootReference(controller);
-      tag = CONSTANT_TAG;
-      bucket = { engine, controller, self, tag };
+      bucket = { engine, controller, self };
     } else {
       let model = modelRef.value();
-      let modelRev = value(modelRef.tag);
       controller = controllerFactory.create({ model });
       self = new RootReference(controller);
-      tag = modelRef.tag;
-      bucket = { engine, controller, self, tag, modelRef, modelRev };
+      bucket = { engine, controller, self, modelRef };
     }
 
     return bucket;
@@ -110,8 +111,12 @@ class MountManager
     return self;
   }
 
-  getTag(state: EngineState | EngineWithModelState): Tag {
-    return state.tag;
+  getTag(state: EngineState): Tag {
+    if (state.modelRef) {
+      return state.modelRef.tag;
+    } else {
+      return CONSTANT_TAG;
+    }
   }
 
   getDestructor({ engine }: EngineState): Option<Destroyable> {
@@ -124,13 +129,9 @@ class MountManager
     }
   }
 
-  update(bucket: EngineWithModelState): void {
-    let { controller, modelRef, modelRev } = bucket;
-    if (!validate(modelRef.tag, modelRev!)) {
-      let model = modelRef.value();
-      bucket.modelRev = value(modelRef.tag);
-      controller.set('model', model);
-    }
+  update({ controller, modelRef }: EngineState): void {
+    assert('[BUG] `update` should only be called when modelRef is present', modelRef !== undefined);
+    controller.set('model', modelRef!.value());
   }
 }
 
@@ -140,7 +141,7 @@ export class MountDefinition implements ComponentDefinition {
   public state: EngineDefinitionState;
   public manager = MOUNT_MANAGER;
 
-  constructor(name: string, modelRef: VersionedPathReference<Opaque> | undefined) {
-    this.state = { name, modelRef };
+  constructor(name: string) {
+    this.state = { name };
   }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/mount.ts b/packages/@ember/-internals/glimmer/lib/syntax/mount.ts
index 71994fe39cd..0a6385ee21a 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/mount.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/mount.ts
@@ -3,18 +3,21 @@
 */
 import { OwnedTemplateMeta } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
-import { Opaque, Option } from '@glimmer/interfaces';
+import { DEBUG } from '@glimmer/env';
+import { Option } from '@glimmer/interfaces';
 import { OpcodeBuilder } from '@glimmer/opcode-compiler';
 import { Tag, VersionedPathReference } from '@glimmer/reference';
 import {
   Arguments,
+  CapturedArguments,
   CurriedComponentDefinition,
   curry,
+  EMPTY_ARGS,
   UNDEFINED_REFERENCE,
   VM,
 } from '@glimmer/runtime';
 import * as WireFormat from '@glimmer/wire-format';
-import { MountDefinition } from '../component-managers/mount';
+import { MODEL_ARG_NAME, MountDefinition } from '../component-managers/mount';
 import Environment from '../environment';
 
 export function mountHelper(
@@ -23,8 +26,38 @@ export function mountHelper(
 ): VersionedPathReference<CurriedComponentDefinition | null> {
   let env = vm.env as Environment;
   let nameRef = args.positional.at(0);
-  let modelRef = args.named.has('model') ? args.named.get('model') : undefined;
-  return new DynamicEngineReference(nameRef, env, modelRef);
+  let captured: Option<CapturedArguments> = null;
+
+  // TODO: the functionailty to create a proper CapturedArgument should be
+  // exported by glimmer, or that it should provide an overload for `curry`
+  // that takes `PreparedArguments`
+  if (args.named.has('model')) {
+    assert('[BUG] this should already be checked by the macro', args.named.length === 1);
+
+    let named = args.named.capture();
+    let { tag } = named;
+
+    // TODO delete me after EMBER_ROUTING_MODEL_ARG has shipped
+    if (DEBUG && MODEL_ARG_NAME !== 'model') {
+      assert('[BUG] named._map is not null', named['_map'] === null);
+      named.names = [MODEL_ARG_NAME];
+    }
+
+    captured = {
+      tag,
+      positional: EMPTY_ARGS.positional,
+      named,
+      length: 1,
+      value() {
+        return {
+          named: this.named.value(),
+          positional: this.positional.value(),
+        };
+      },
+    };
+  }
+
+  return new DynamicEngineReference(nameRef, env, captured);
 }
 
 /**
@@ -78,33 +111,38 @@ export function mountMacro(
     params!.length === 1
   );
 
+  if (DEBUG && hash) {
+    let keys = hash[0];
+    let extra = keys.filter(k => k !== 'model');
+
+    assert(
+      'You can only pass a `model` argument to the {{mount}} helper, ' +
+        'e.g. {{mount "profile-engine" model=this.profile}}. ' +
+        `You passed ${extra.join(',')}.`,
+      extra.length === 0
+    );
+  }
+
   let expr: WireFormat.Expressions.Helper = [WireFormat.Ops.Helper, '-mount', params || [], hash];
   builder.dynamicComponent(expr, null, [], null, false, null, null);
   return true;
 }
 
-class DynamicEngineReference {
+class DynamicEngineReference implements VersionedPathReference<Option<CurriedComponentDefinition>> {
   public tag: Tag;
-  public nameRef: VersionedPathReference<any | null | undefined>;
-  public modelRef: VersionedPathReference<Opaque> | undefined;
-  public env: Environment;
-  private _lastName: string | null;
-  private _lastDef: CurriedComponentDefinition | null;
+  private _lastName: Option<string> = null;
+  private _lastDef: Option<CurriedComponentDefinition> = null;
+
   constructor(
-    nameRef: VersionedPathReference<any | undefined | null>,
-    env: Environment,
-    modelRef: VersionedPathReference<Opaque> | undefined
+    public nameRef: VersionedPathReference<any | undefined | null>,
+    public env: Environment,
+    public args: Option<CapturedArguments>
   ) {
     this.tag = nameRef.tag;
-    this.nameRef = nameRef;
-    this.modelRef = modelRef;
-    this.env = env;
-    this._lastName = null;
-    this._lastDef = null;
   }
 
-  value() {
-    let { env, nameRef, modelRef } = this;
+  value(): Option<CurriedComponentDefinition> {
+    let { env, nameRef, args } = this;
     let name = nameRef.value();
 
     if (typeof name === 'string') {
@@ -122,7 +160,7 @@ class DynamicEngineReference {
       }
 
       this._lastName = name;
-      this._lastDef = curry(new MountDefinition(name, modelRef));
+      this._lastDef = curry(new MountDefinition(name), args);
 
       return this._lastDef;
     } else {
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js
index 953060821c8..297e955ca02 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js
@@ -1,10 +1,11 @@
 import { moduleFor, ApplicationTestCase, strip, runTaskNext } from 'internal-test-helpers';
 
-import Controller from '@ember/controller';
-import { RSVP } from '@ember/-internals/runtime';
 import { Component } from '@ember/-internals/glimmer';
-import Engine from '@ember/engine';
 import { Route } from '@ember/-internals/routing';
+import { RSVP } from '@ember/-internals/runtime';
+import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
+import Controller from '@ember/controller';
+import Engine from '@ember/engine';
 import { next } from '@ember/runloop';
 
 import { compile } from '../../utils/helpers';
@@ -517,7 +518,12 @@ moduleFor(
             },
           })
         );
-        this.register('template:application_error', compile('Error! {{model.message}}'));
+        this.register(
+          'template:application_error',
+          compile(
+            EMBER_ROUTING_MODEL_ARG ? 'Error! {{@model.message}}' : 'Error! {{this.model.message}}'
+          )
+        );
         this.register(
           'route:post',
           Route.extend({
@@ -556,7 +562,12 @@ moduleFor(
             },
           })
         );
-        this.register('template:error', compile('Error! {{model.message}}'));
+        this.register(
+          'template:error',
+          compile(
+            EMBER_ROUTING_MODEL_ARG ? 'Error! {{@model.message}}' : 'Error! {{this.model.message}}'
+          )
+        );
         this.register(
           'route:post',
           Route.extend({
@@ -595,7 +606,12 @@ moduleFor(
             },
           })
         );
-        this.register('template:post_error', compile('Error! {{model.message}}'));
+        this.register(
+          'template:post_error',
+          compile(
+            EMBER_ROUTING_MODEL_ARG ? 'Error! {{@model.message}}' : 'Error! {{this.model.message}}'
+          )
+        );
         this.register(
           'route:post',
           Route.extend({
@@ -634,7 +650,12 @@ moduleFor(
             },
           })
         );
-        this.register('template:post.error', compile('Error! {{model.message}}'));
+        this.register(
+          'template:post.error',
+          compile(
+            EMBER_ROUTING_MODEL_ARG ? 'Error! {{@model.message}}' : 'Error! {{this.model.message}}'
+          )
+        );
         this.register(
           'route:post.comments',
           Route.extend({
diff --git a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
index e8369f92db1..f76fe425763 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
@@ -1,11 +1,13 @@
 import { moduleFor, ApplicationTestCase, RenderingTestCase, runTask } from 'internal-test-helpers';
 
+import { set } from '@ember/-internals/metal';
 import { getOwner } from '@ember/-internals/owner';
-import { compile, Component } from '../utils/helpers';
+import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
 import Controller from '@ember/controller';
-import { set } from '@ember/-internals/metal';
 import Engine, { getEngineParent } from '@ember/engine';
 
+import { compile, Component } from '../utils/helpers';
+
 moduleFor(
   '{{mount}} single param assertion',
   class extends RenderingTestCase {
@@ -301,9 +303,14 @@ moduleFor(
             this._super(...arguments);
             this.register(
               'template:application',
-              compile('<h2>Param Engine: {{model.foo}}</h2>', {
-                moduleName: 'my-app/templates/application.hbs',
-              })
+              compile(
+                EMBER_ROUTING_MODEL_ARG
+                  ? '<h2>Param Engine: {{@model.foo}}</h2>'
+                  : '<h2>Param Engine: {{this.model.foo}}</h2>',
+                {
+                  moduleName: 'my-app/templates/application.hbs',
+                }
+              )
             );
           },
         })
@@ -390,7 +397,7 @@ moduleFor(
             this._super(...arguments);
             this.register(
               'template:application',
-              compile('{{model.foo}}', {
+              compile(EMBER_ROUTING_MODEL_ARG ? '{{@model.foo}}' : '{{this.model.foo}}', {
                 moduleName: 'my-app/templates/application.hbs',
               })
             );
@@ -410,3 +417,41 @@ moduleFor(
     }
   }
 );
+
+if (!EMBER_ROUTING_MODEL_ARG) {
+  moduleFor(
+    '{{mount}} params tests without @model',
+    class extends ApplicationTestCase {
+      constructor() {
+        super(...arguments);
+
+        this.add(
+          'engine:paramEngine',
+          Engine.extend({
+            router: null,
+            init() {
+              this._super(...arguments);
+              this.register(
+                'template:application',
+                compile('<h2>@model: {{@model}}, this.model: {{this.model}}</h2>', {
+                  moduleName: 'my-app/templates/application.hbs',
+                })
+              );
+            },
+          })
+        );
+      }
+
+      ['@test it cannot access the model via @model']() {
+        this.router.map(function() {
+          this.route('engine-params');
+        });
+        this.addTemplate('engine-params', '{{mount "paramEngine" model="foo"}}');
+
+        return this.visit('/engine-params').then(() => {
+          this.assertInnerHTML('<h2>@model: , this.model: foo</h2>');
+        });
+      }
+    }
+  );
+}

From 59d21e4d9869b040474a0df879a37564cc4911f8 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Tue, 3 Sep 2019 12:41:15 +0900
Subject: [PATCH 6/6] Add a few targeted tests

This ensures `{{this.model}}` and the implicit `{{model}}` contunue
to be tested, to prevent any future regressions. It also tests the
behavior described in the RFC where `this.model` and `@model` could
diverge.
---
 .../integration/application/rendering-test.js | 287 +++++++++++++++++-
 .../tests/routing/decoupled_basic_test.js     |   4 -
 .../internal-test-helpers/lib/module-for.js   |   2 +-
 .../lib/test-cases/application.js             |   9 +-
 4 files changed, 292 insertions(+), 10 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
index 416fb782573..314de33642e 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
@@ -4,6 +4,8 @@ import { ENV } from '@ember/-internals/environment';
 import Controller from '@ember/controller';
 import { Route } from '@ember/-internals/routing';
 import { Component } from '@ember/-internals/glimmer';
+import { set, tracked } from '@ember/-internals/metal';
+import { runTask } from '../../../../../../internal-test-helpers/lib/run';
 
 moduleFor(
   'Application test: rendering',
@@ -38,7 +40,7 @@ moduleFor(
       });
     }
 
-    ['@feature(!EMBER_ROUTING_MODEL_ARG) it can access the model provided by the route']() {
+    ['@feature(EMBER_ROUTING_MODEL_ARG) it can access the model provided by the route via @model']() {
       this.add(
         'route:application',
         Route.extend({
@@ -52,7 +54,7 @@ moduleFor(
         'application',
         strip`
         <ul>
-          {{#each this.model as |item|}}
+          {{#each @model as |item|}}
             <li>{{item}}</li>
           {{/each}}
         </ul>
@@ -96,7 +98,7 @@ moduleFor(
       });
     }
 
-    ['@feature(EMBER_ROUTING_MODEL_ARG) it can access the model provided by the route']() {
+    ['@test it can access the model provided by the route via this.model']() {
       this.add(
         'route:application',
         Route.extend({
@@ -110,7 +112,39 @@ moduleFor(
         'application',
         strip`
         <ul>
-          {{#each @model as |item|}}
+          {{#each this.model as |item|}}
+            <li>{{item}}</li>
+          {{/each}}
+        </ul>
+        `
+      );
+
+      return this.visit('/').then(() => {
+        this.assertInnerHTML(strip`
+        <ul>
+          <li>red</li>
+          <li>yellow</li>
+          <li>blue</li>
+        </ul>
+      `);
+      });
+    }
+
+    ['@test it can access the model provided by the route via implicit this fallback']() {
+      this.add(
+        'route:application',
+        Route.extend({
+          model() {
+            return ['red', 'yellow', 'blue'];
+          },
+        })
+      );
+
+      this.addTemplate(
+        'application',
+        strip`
+        <ul>
+          {{#each model as |item|}}
             <li>{{item}}</li>
           {{/each}}
         </ul>
@@ -128,6 +162,251 @@ moduleFor(
       });
     }
 
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) interior mutations on the model with set'](assert) {
+      this.router.map(function() {
+        this.route('color', { path: '/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model({ color }) {
+            return { color };
+          },
+        })
+      );
+
+      this.addTemplate(
+        'color',
+        strip`
+        [@model: {{@model.color}}]
+        [this.model: {{this.model.color}}]
+        [model: {{model.color}}]
+        `
+      );
+
+      await this.visit('/red');
+
+      assert.equal(this.currentURL, '/red');
+
+      this.assertInnerHTML(strip`
+        [@model: red]
+        [this.model: red]
+        [model: red]
+      `);
+
+      await this.visit('/yellow');
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: yellow]
+        [model: yellow]
+      `);
+
+      runTask(() => {
+        let { model } = this.controllerFor('color');
+        set(model, 'color', 'blue');
+      });
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: blue]
+        [this.model: blue]
+        [model: blue]
+      `);
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG, EMBER_METAL_TRACKED_PROPERTIES) interior mutations on the model with tracked properties'](
+      assert
+    ) {
+      class Model {
+        @tracked color;
+
+        constructor(color) {
+          this.color = color;
+        }
+      }
+
+      this.router.map(function() {
+        this.route('color', { path: '/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model({ color }) {
+            return new Model(color);
+          },
+        })
+      );
+
+      this.addTemplate(
+        'color',
+        strip`
+        [@model: {{@model.color}}]
+        [this.model: {{this.model.color}}]
+        [model: {{model.color}}]
+        `
+      );
+
+      await this.visit('/red');
+
+      assert.equal(this.currentURL, '/red');
+
+      this.assertInnerHTML(strip`
+        [@model: red]
+        [this.model: red]
+        [model: red]
+      `);
+
+      await this.visit('/yellow');
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: yellow]
+        [model: yellow]
+      `);
+
+      runTask(() => {
+        this.controllerFor('color').model.color = 'blue';
+      });
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: blue]
+        [this.model: blue]
+        [model: blue]
+      `);
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG) exterior mutations on the model with set'](assert) {
+      this.router.map(function() {
+        this.route('color', { path: '/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model({ color }) {
+            return color;
+          },
+        })
+      );
+
+      this.addTemplate(
+        'color',
+        strip`
+        [@model: {{@model}}]
+        [this.model: {{this.model}}]
+        [model: {{model}}]
+        `
+      );
+
+      await this.visit('/red');
+
+      assert.equal(this.currentURL, '/red');
+
+      this.assertInnerHTML(strip`
+        [@model: red]
+        [this.model: red]
+        [model: red]
+      `);
+
+      await this.visit('/yellow');
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: yellow]
+        [model: yellow]
+      `);
+
+      runTask(() => {
+        let controller = this.controllerFor('color');
+        set(controller, 'model', 'blue');
+      });
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: blue]
+        [model: blue]
+      `);
+    }
+
+    async ['@feature(EMBER_ROUTING_MODEL_ARG, EMBER_METAL_TRACKED_PROPERTIES) exterior mutations on the model with tracked properties'](
+      assert
+    ) {
+      this.router.map(function() {
+        this.route('color', { path: '/:color' });
+      });
+
+      this.add(
+        'route:color',
+        Route.extend({
+          model({ color }) {
+            return color;
+          },
+        })
+      );
+
+      this.add(
+        'controller:color',
+        class ColorController extends Controller {
+          @tracked model;
+        }
+      );
+
+      this.addTemplate(
+        'color',
+        strip`
+        [@model: {{@model}}]
+        [this.model: {{this.model}}]
+        [model: {{model}}]
+        `
+      );
+
+      await this.visit('/red');
+
+      assert.equal(this.currentURL, '/red');
+
+      this.assertInnerHTML(strip`
+        [@model: red]
+        [this.model: red]
+        [model: red]
+      `);
+
+      await this.visit('/yellow');
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: yellow]
+        [model: yellow]
+      `);
+
+      runTask(() => {
+        this.controllerFor('color').model = 'blue';
+      });
+
+      assert.equal(this.currentURL, '/yellow');
+
+      this.assertInnerHTML(strip`
+        [@model: yellow]
+        [this.model: blue]
+        [model: blue]
+      `);
+    }
+
     ['@feature(!EMBER_ROUTING_MODEL_ARG) it can render a nested route']() {
       this.router.map(function() {
         this.route('lists', function() {
diff --git a/packages/ember/tests/routing/decoupled_basic_test.js b/packages/ember/tests/routing/decoupled_basic_test.js
index c444b617a05..f5e60f7474b 100644
--- a/packages/ember/tests/routing/decoupled_basic_test.js
+++ b/packages/ember/tests/routing/decoupled_basic_test.js
@@ -75,10 +75,6 @@ moduleFor(
       return currentPath;
     }
 
-    get currentURL() {
-      return this.appRouter.get('currentURL');
-    }
-
     handleURLRejectsWith(context, assert, path, expectedReason) {
       return context
         .visit(path)
diff --git a/packages/internal-test-helpers/lib/module-for.js b/packages/internal-test-helpers/lib/module-for.js
index 5edc2ea0c17..49ac4e64b3f 100644
--- a/packages/internal-test-helpers/lib/module-for.js
+++ b/packages/internal-test-helpers/lib/module-for.js
@@ -79,7 +79,7 @@ export function setupTestClass(hooks, TestClass, ...mixins) {
         return this.instance[name](assert);
       });
     } else {
-      let match = /^@feature\(([A-Z_a-z-!]+)\) /.exec(name);
+      let match = /^@feature\(([A-Z_a-z-! ,]+)\) /.exec(name);
 
       if (match) {
         let features = match[1].replace(/ /g, '').split(',');
diff --git a/packages/internal-test-helpers/lib/test-cases/application.js b/packages/internal-test-helpers/lib/test-cases/application.js
index 3dcc5b20e42..53ce885d1ce 100644
--- a/packages/internal-test-helpers/lib/test-cases/application.js
+++ b/packages/internal-test-helpers/lib/test-cases/application.js
@@ -33,9 +33,16 @@ export default class ApplicationTestCase extends TestResolverApplicationTestCase
     return this.applicationInstance.lookup('router:main');
   }
 
+  get currentURL() {
+    return this.appRouter.get('currentURL');
+  }
+
   async transitionTo() {
     await this.appRouter.transitionTo(...arguments);
-
     await runLoopSettled();
   }
+
+  controllerFor(name) {
+    return this.applicationInstance.lookup(`controller:${name}`);
+  }
 }