Merge pull request #11234 from rwjblue/fix-legacy-each-itemView-with-…

…non-context-shifting

[BUGFIX beta] Fix {{each item in model itemViewClass="..."}}.

packages/ember-htmlbars/lib/helpers/-legacy-each-with-keyword.js

@@ -0,0 +1,32 @@
+import { get } from "ember-metal/property_get";
+import { forEach } from "ember-metal/enumerable_utils";
+import shouldDisplay from "ember-views/streams/should_display";
+
+export default function legacyEachWithKeywordHelper(params, hash, blocks) {
+  var list = params[0];
+  var keyPath = hash.key;
+  var legacyKeyword = hash['-legacy-keyword'];
+
+  if (shouldDisplay(list)) {
+    forEach(list, function(item, i) {
+      var self;
+      if (legacyKeyword) {
+        self = bindKeyword(self, legacyKeyword, item);
+      }
+
+      var key = keyPath ? get(item, keyPath) : String(i);
+      blocks.template.yieldItem(key, [item, i], self);
+    });
+  } else if (blocks.inverse.yield) {
+    blocks.inverse.yield();
+  }
+}
+
+function bindKeyword(self, keyword, item) {
+  return {
+    self,
+    [keyword]: item
+  };
+}
+
+export var deprecation = "Using the context switching form of {{each}} is deprecated. Please use the keyword form (`{{#each items as |item|}}`) instead.";

packages/ember-htmlbars/lib/keywords/each.js

@@ -3,16 +3,22 @@
 @submodule ember-htmlbars
 */
 
-import getValue from "ember-htmlbars/hooks/get-value";
 import ArrayController from "ember-runtime/controllers/array_controller";
 
 export default function each(morph, env, scope, params, hash, template, inverse, visitor) {
+  let getValue = env.hooks.getValue;
   let firstParam = params[0] && getValue(params[0]);
+  let keyword = hash['-legacy-keyword'] && getValue(hash['-legacy-keyword']);
 
   if (firstParam && firstParam instanceof ArrayController) {
     env.hooks.block(morph, env, scope, '-legacy-each-with-controller', params, hash, template, inverse, visitor);
     return true;
   }
 
+  if (keyword) {
+    env.hooks.block(morph, env, scope, '-legacy-each-with-keyword', params, hash, template, inverse, visitor);
+    return true;
+  }
+
   return false;
 }

packages/ember-htmlbars/lib/main.js

@@ -27,6 +27,7 @@ import normalizeClassHelper from "ember-htmlbars/helpers/-normalize-class";
 import concatHelper from "ember-htmlbars/helpers/-concat";
 import joinClassesHelper from "ember-htmlbars/helpers/-join-classes";
 import legacyEachWithControllerHelper from "ember-htmlbars/helpers/-legacy-each-with-controller";
+import legacyEachWithKeywordHelper from "ember-htmlbars/helpers/-legacy-each-with-keyword";
 import getHelper from "ember-htmlbars/helpers/-get";
 import DOMHelper from "ember-htmlbars/system/dom-helper";
 
@@ -52,6 +53,7 @@ registerHelper('-normalize-class', normalizeClassHelper);
 registerHelper('-concat', concatHelper);
 registerHelper('-join-classes', joinClassesHelper);
 registerHelper('-legacy-each-with-controller', legacyEachWithControllerHelper);
+registerHelper('-legacy-each-with-keyword', legacyEachWithKeywordHelper);
 if (Ember.FEATURES.isEnabled('ember-htmlbars-get-helper')) {
   registerHelper('-get', getHelper);
 }

packages/ember-htmlbars/lib/templates/legacy-each.hbs

@@ -1 +1,21 @@
-{{~#each view._arrangedContent as |item|}}{{#if attrs.itemViewClass}}{{#view attrs.itemViewClass controller=item _defaultTagName=view._itemTagName}}{{legacy-yield item}}{{/view}}{{else}}{{legacy-yield item controller=item}}{{/if}}{{else if view._emptyView}}{{view view._emptyView _defaultTagName=view._itemTagName}}{{/each~}}
+{{~#each view._arrangedContent -legacy-keyword=keyword as |item|~}}
+  {{~#if keyword}}
+    {{~#if attrs.itemViewClass~}}
+      {{~#view attrs.itemViewClass _defaultTagName=view._itemTagName~}}
+        {{~legacy-yield item~}}
+      {{~/view~}}
+    {{~else~}}
+      {{~legacy-yield item~}}
+    {{~/if~}}
+  {{~else~}}
+    {{~#if attrs.itemViewClass~}}
+      {{~#view attrs.itemViewClass controller=item _defaultTagName=view._itemTagName~}}
+        {{~legacy-yield item~}}
+      {{~/view~}}
+    {{~else~}}
+      {{~legacy-yield item controller=item~}}
+    {{~/if~}}
+  {{~/if~}}
+{{~else if view._emptyView~}}
+  {{~view view._emptyView _defaultTagName=view._itemTagName~}}
+{{~/each~}}

packages/ember-htmlbars/tests/helpers/each_test.js

@@ -386,7 +386,7 @@ QUnit.test("itemController should not affect the DOM structure", function() {
     container: container,
     template: templateFor(
       '<div id="a">{{#each view.people itemController="person" as |person|}}{{person.name}}{{/each}}</div>' +
-      '<div id="b">{{#each view.people as |person|}}{{person.name}}{{/each}}</div>'
+        '<div id="b">{{#each view.people as |person|}}{{person.name}}{{/each}}</div>'
     ),
     people: people
   });
@@ -641,22 +641,20 @@ QUnit.test("it supports {{itemViewClass=}} with {{else}} block (DEPRECATED)", fu
   equal(view.$().text(), 'No records!');
 });
 
-QUnit.test("it supports {{itemViewClass=}} with in format", function() {
-  MyView = EmberView.extend({
-    template: templateFor("{{person.name}}")
-  });
-
+QUnit.test("it supports non-context switching with {{itemViewClass=}} (DEPRECATED)", function() {
   runDestroy(view);
+  registry.register('view:foo-view', EmberView.extend({
+    template: templateFor(`{{person.name}}`)
+  }));
+
   view = EmberView.create({
-    container: registry.container(),
-    template: templateFor('{{each person in view.people itemViewClass="my-view"}}'),
-    people: people
+    template: templateFor(`{{each person in view.people itemViewClass="foo-view"}}`),
+    people: people,
+    container: container
   });
 
   runAppend(view);
-
-  assertText(view, "Steve HoltAnnabelle");
-
+  equal(view.$().text(), 'Steve HoltAnnabelle');
 });
 
 QUnit.test("it supports {{emptyView=}}", function() {