Merge pull request #10631 from rwjblue/deprecate-fooBinding-syntax

[BUGFIX beta] Deprecate usage of {{view fooBinding="blah"}}.

packages/ember-htmlbars/lib/system/merge-view-bindings.js

@@ -29,6 +29,12 @@ function mergeGenericViewBindings(view, props, hash) {
 
     if (IS_BINDING.test(key)) {
       if (typeof value === 'string') {
+        Ember.deprecate(
+          "You're attempting to render a view by passing " + key + " " +
+          "to a view helper, but this syntax is deprecated. You should use `" +
+          key.slice(0, -7) + "=someValue` instead."
+        );
+
         props[key] = view._getBindingForStream(value);
       } else if (isStream(value)) {
         Ember.deprecate(

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

@@ -356,7 +356,7 @@ QUnit.test("should give its item views the class specified by itemClass", functi
   equal(view.$('ul li.baz').length, 3, "adds class attribute");
 });
 
-QUnit.test("should give its item views the classBinding specified by itemClassBinding", function() {
+QUnit.test("should give its item views the class specified by itemClass", function() {
   var ItemClassBindingTestCollectionView = CollectionView.extend({
     tagName: 'ul',
     content: A([EmberObject.create({ isBaz: false }), EmberObject.create({ isBaz: true }), EmberObject.create({ isBaz: true })])
@@ -365,7 +365,7 @@ QUnit.test("should give its item views the classBinding specified by itemClassBi
   view = EmberView.create({
     itemClassBindingTestCollectionView: ItemClassBindingTestCollectionView,
     isBar: true,
-    template: compile('{{#collection view.itemClassBindingTestCollectionView itemClassBinding="view.isBar"}}foo{{/collection}}')
+    template: compile('{{#collection view.itemClassBindingTestCollectionView itemClass=view.isBar}}foo{{/collection}}')
   });
 
   runAppend(view);
@@ -376,7 +376,7 @@ QUnit.test("should give its item views the classBinding specified by itemClassBi
   // to introduce a new keyword that could be used from within `itemClassBinding`. For instance, `itemClassBinding="item.isBaz"`.
 });
 
-QUnit.test("should give its item views the property specified by itemPropertyBinding", function() {
+QUnit.test("should give its item views the property specified by itemProperty", function() {
   var ItemPropertyBindingTestItemView = EmberView.extend({
     tagName: 'li'
   });
@@ -391,7 +391,7 @@ QUnit.test("should give its item views the property specified by itemPropertyBin
         return ItemPropertyBindingTestItemView;
       }
     },
-    template: compile('{{#collection contentBinding="view.content" tagName="ul" itemViewClass="item-property-binding-test-item-view" itemProperty=view.baz preserveContext=false}}{{view.property}}{{/collection}}')
+    template: compile('{{#collection content=view.content tagName="ul" itemViewClass="item-property-binding-test-item-view" itemProperty=view.baz preserveContext=false}}{{view.property}}{{/collection}}')
   });
 
   runAppend(view);
@@ -413,7 +413,7 @@ QUnit.test("should unsubscribe stream bindings", function() {
   view = EmberView.create({
     baz: "baz",
     content: A([EmberObject.create(), EmberObject.create(), EmberObject.create()]),
-    template: compile('{{#collection contentBinding="view.content" itemProperty=view.baz}}{{view.property}}{{/collection}}')
+    template: compile('{{#collection content=view.content itemProperty=view.baz}}{{view.property}}{{/collection}}')
   });
 
   runAppend(view);
@@ -686,7 +686,7 @@ QUnit.test("context should be content", function() {
     controller: {
       items: items
     },
-    template: compile('{{collection contentBinding="items" itemViewClass="an-item"}}')
+    template: compile('{{collection content=items itemViewClass="an-item"}}')
   });
 
   runAppend(view);

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

@@ -903,7 +903,7 @@ function testEachWithItem(moduleName, useBlockParams) {
     view = EmberView.create({
       container: container,
       controller: controller,
-      template: templateFor('{{#EACH|this|personController}}{{#view controllerBinding="personController"}}{{name}}{{/view}}{{/each}}', useBlockParams)
+      template: templateFor('{{#EACH|this|personController}}{{#view controller=personController}}{{name}}{{/view}}{{/each}}', useBlockParams)
     });
 
     runAppend(view);

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

@@ -279,8 +279,8 @@ QUnit.test("mixing old and new styles of property binding fires a warning, treat
   Ember.warn = oldWarn;
 });
 
-QUnit.test('"Binding"-suffixed bindings are runloop-synchronized', function() {
-  expect(5);
+QUnit.test('"Binding"-suffixed bindings are runloop-synchronized [DEPRECATED]', function() {
+  expect(6);
 
   var subview;
 
@@ -299,7 +299,10 @@ QUnit.test('"Binding"-suffixed bindings are runloop-synchronized', function() {
   });
 
   view = View.create();
-  runAppend(view);
+
+  expectDeprecation(function() {
+    runAppend(view);
+  }, /You're attempting to render a view by passing colorBinding to a view helper, but this syntax is deprecated. You should use `color=someValue` instead./);
 
   equal(view.$('h1 .color').text(), 'mauve', 'renders bound value');
 
@@ -992,7 +995,7 @@ QUnit.test('{{view}} should evaluate other attributes bindings set in the curren
   view = EmberView.create({
     name: 'myView',
     textField: TextField,
-    template: compile('{{view view.textField valueBinding="view.name"}}')
+    template: compile('{{view view.textField value=view.name}}')
   });
 
   runAppend(view);
@@ -1064,7 +1067,7 @@ QUnit.test('a view helper\'s bindings are to the parent context', function() {
       name: 'foo'
     }),
     Subview: Subview,
-    template: compile('<h1>{{view view.Subview colorBinding="color" someControllerBinding="this"}}</h1>')
+    template: compile('<h1>{{view view.Subview color=color someController=this}}</h1>')
   });
 
   view = View.create();
@@ -1179,7 +1182,7 @@ QUnit.test('should work with precompiled templates', function() {
   equal(view.$().text(), 'updated', 'the precompiled template was updated');
 });
 
-QUnit.test('bindings should be relative to the current context', function() {
+QUnit.test('bindings should be relative to the current context [DEPRECATED]', function() {
   view = EmberView.create({
     museumOpen: true,
 
@@ -1195,12 +1198,14 @@ QUnit.test('bindings should be relative to the current context', function() {
     template: compile('{{#if view.museumOpen}} {{view view.museumView nameBinding="view.museumDetails.name" dollarsBinding="view.museumDetails.price"}} {{/if}}')
   });
 
-  runAppend(view);
+  expectDeprecation(function() {
+    runAppend(view);
+  }, /You're attempting to render a view by passing .+Binding to a view helper, but this syntax is deprecated/);
 
   equal(trim(view.$().text()), 'Name: SFMoMA Price: $20', 'should print baz twice');
 });
 
-QUnit.test('bindings should respect keywords', function() {
+QUnit.test('bindings should respect keywords [DEPRECATED]', function() {
   view = EmberView.create({
     museumOpen: true,
 
@@ -1219,6 +1224,32 @@ QUnit.test('bindings should respect keywords', function() {
     template: compile('{{#if view.museumOpen}}{{view view.museumView nameBinding="controller.museumDetails.name" dollarsBinding="controller.museumDetails.price"}}{{/if}}')
   });
 
+  expectDeprecation(function() {
+    runAppend(view);
+  }, /You're attempting to render a view by passing .+Binding to a view helper, but this syntax is deprecated/);
+
+  equal(trim(view.$().text()), 'Name: SFMoMA Price: $20', 'should print baz twice');
+});
+
+QUnit.test('should respect keywords', function() {
+  view = EmberView.create({
+    museumOpen: true,
+
+    controller: {
+      museumOpen: true,
+      museumDetails: EmberObject.create({
+        name: 'SFMoMA',
+        price: 20
+      })
+    },
+
+    museumView: EmberView.extend({
+      template: compile('Name: {{view.name}} Price: ${{view.dollars}}')
+    }),
+
+    template: compile('{{#if view.museumOpen}}{{view view.museumView name=controller.museumDetails.name dollars=controller.museumDetails.price}}{{/if}}')
+  });
+
   runAppend(view);
 
   equal(trim(view.$().text()), 'Name: SFMoMA Price: $20', 'should print baz twice');

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

@@ -201,7 +201,7 @@ QUnit.test("can bind a keyword to a component and use it in yield", function() {
 
   view = EmberView.create({
     controller: { boundText: "outer", component: component },
-    template: compile('{{#with boundText as item}}{{#view component contentBinding="item"}}{{item}}{{/view}}{{/with}}')
+    template: compile('{{#with boundText as item}}{{#view component content=item}}{{item}}{{/view}}{{/with}}')
   });
 
   runAppend(view);

packages/ember-htmlbars/tests/integration/select_in_template_test.js

@@ -25,7 +25,7 @@ QUnit.module("ember-htmlbars: Ember.Select - usage inside templates", {
   }
 });
 
-QUnit.test("works from a template with bindings", function() {
+QUnit.test("works from a template with bindings [DEPRECATED]", function() {
   var Person = EmberObject.extend({
     id: null,
     firstName: null,
@@ -66,6 +66,70 @@ QUnit.test("works from a template with bindings", function() {
     )
   });
 
+  expectDeprecation(function() {
+    runAppend(view);
+  }, /You're attempting to render a view by passing .+Binding to a view helper, but this syntax is deprecated/);
+
+  var select = view.get('select');
+  ok(select.$().length, "Select was rendered");
+  equal(select.$('option').length, 5, "Options were rendered");
+  equal(select.$().text(), "Pick a person:Yehuda KatzTom DalePeter WagenetErik Bryn\n", "Option values were rendered");
+  equal(select.get('selection'), null, "Nothing has been selected");
+
+  run(function() {
+    application.selectedPersonController.set('person', erik);
+  });
+
+  equal(select.get('selection'), erik, "Selection was updated through binding");
+  run(function() {
+    application.peopleController.pushObject(Person.create({ id: 5, firstName: "James", lastName: "Rosen" }));
+  });
+
+  equal(select.$('option').length, 6, "New option was added");
+  equal(select.get('selection'), erik, "Selection was maintained after new option was added");
+});
+
+QUnit.test("works from a template", function() {
+  var Person = EmberObject.extend({
+    id: null,
+    firstName: null,
+    lastName: null,
+
+    fullName: computed(function() {
+      return this.get('firstName') + " " + this.get('lastName');
+    }).property('firstName', 'lastName')
+  });
+
+  var erik = Person.create({ id: 4, firstName: 'Erik', lastName: 'Bryn' });
+
+  var application = Namespace.create();
+
+  application.peopleController = ArrayController.create({
+    content: Ember.A([
+      Person.create({ id: 1, firstName: 'Yehuda', lastName: 'Katz' }),
+      Person.create({ id: 2, firstName: 'Tom', lastName: 'Dale' }),
+      Person.create({ id: 3, firstName: 'Peter', lastName: 'Wagenet' }),
+      erik
+    ])
+  });
+
+  application.selectedPersonController = EmberObject.create({
+    person: null
+  });
+
+  view = EmberView.create({
+    app: application,
+    selectView: SelectView,
+    template: compile(
+      '{{view view.selectView viewName="select"' +
+      '    content=view.app.peopleController' +
+      '    optionLabelPath="content.fullName"' +
+      '    optionValuePath="content.id"' +
+      '    prompt="Pick a person:"' +
+      '    selection=view.app.selectedPersonController.person}}'
+    )
+  });
+
   runAppend(view);
 
   var select = view.get('select');
@@ -96,8 +160,8 @@ QUnit.test("upon content change, the DOM should reflect the selection (#481)", f
     selectView: SelectView,
     template: compile(
       '{{view view.selectView viewName="select"' +
-      '    contentBinding="view.user.options"' +
-      '    selectionBinding="view.user.selectedOption"}}'
+      '    content=view.user.options' +
+      '    selection=view.user.selectedOption}}'
     )
   });
 
@@ -131,8 +195,8 @@ QUnit.test("upon content change with Array-like content, the DOM should reflect
     selectView: SelectView,
     template: compile(
       '{{view view.selectView viewName="select"' +
-      '    contentBinding="view.proxy"' +
-      '    selectionBinding="view.proxy.selectedOption"}}'
+      '    content=view.proxy' +
+      '    selection=view.proxy.selectedOption}}'
     )
   });
 
@@ -177,7 +241,9 @@ function testValueBinding(templateString) {
   equal(selectEl.selectedIndex, 1, "The DOM is updated to reflect the new selection");
 }
 
-QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using valueBinding (old xBinding='' syntax)", function() {
+QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using valueBinding [DEPRECATED]", function() {
+  expectDeprecation(/You're attempting to render a view by passing .+Binding to a view helper, but this syntax is deprecated./);
+
   testValueBinding(
     '{{view view.selectView viewName="select"' +
     '    contentBinding="view.collection"' +
@@ -188,7 +254,7 @@ QUnit.test("select element should correctly initialize and update selectedIndex
   );
 });
 
-QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using valueBinding (new quoteless binding shorthand)", function() {
+QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using a bound value", function() {
   testValueBinding(
     '{{view view.selectView viewName="select"' +
     '    content=view.collection' +
@@ -227,7 +293,9 @@ function testSelectionBinding(templateString) {
   equal(select.$('option:eq(1)').prop('selected'), true, "Selected property is set to proper option");
 }
 
-QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using selectionBinding (old xBinding='' syntax)", function() {
+QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using selectionBinding [DEPRECATED]", function() {
+  expectDeprecation(/You're attempting to render a view by passing .+Binding to a view helper, but this syntax is deprecated./);
+
   testSelectionBinding(
     '{{view view.selectView viewName="select"' +
     '    contentBinding="view.collection"' +
@@ -238,7 +306,7 @@ QUnit.test("select element should correctly initialize and update selectedIndex
   );
 });
 
-QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using selectionBinding (new quoteless binding shorthand)", function() {
+QUnit.test("select element should correctly initialize and update selectedIndex and bound properties when using a bound selection", function() {
   testSelectionBinding(
     '{{view view.selectView viewName="select"' +
     '    content=view.collection' +