{{title}}
-{{body}}
-{{render "author" author}}
-
-
- ```
-
- ### Non-block version of collection
-
- If you provide an `itemViewClass` option that has its own `template` you may
- omit the block.
-
- The following template:
-
- ```handlebars
- {{! application.hbs }}
- {{collection content=model itemViewClass="an-item"}}
- ```
-
- And application code
-
- ```javascript
- App = Ember.Application.create();
- App.ApplicationRoute = Ember.Route.extend({
- model: function() {
- return [{name: 'Yehuda'},{name: 'Tom'},{name: 'Peter'}];
- }
- });
-
- App.AnItemView = Ember.View.extend({
- template: Ember.Handlebars.compile("Greetings {{view.content.name}}")
- });
- ```
-
- Will result in the HTML structure below
-
- ```html
- Hi Yehuda
- Hi Tom
- Hi Peter
-
-
- ```
-
- ### Specifying a CollectionView subclass
-
- By default the `{{collection}}` helper will create an instance of
- `Ember.CollectionView`. You can supply a `Ember.CollectionView` subclass to
- the helper by passing it as the first argument:
-
- ```handlebars
- {{#collection "my-custom-collection" content=model}}
- Hi {{view.content.name}}
- {{/collection}}
- ```
-
- This example would look for the class `App.MyCustomCollection`.
-
- ### Forwarded `item.*`-named Options
-
- As with the `{{view}}`, helper options passed to the `{{collection}}` will be
- set on the resulting `Ember.CollectionView` as properties. Additionally,
- options prefixed with `item` will be applied to the views rendered for each
- item (note the camelcasing):
-
- ```handlebars
- {{#collection content=model
- itemTagName="p"
- itemClassNames="greeting"}}
- Howdy {{view.content.name}}
- {{/collection}}
- ```
-
- Will result in the following HTML structure:
-
- ```html
- Greetings Yehuda
- Greetings Tom
- Greetings Peter
-
-
- ```
-
- @method collection
- @for Ember.Handlebars.helpers
- @deprecated Use `{{each}}` helper instead.
-*/
-export function collectionHelper(params, hash, options, env) {
- var path = params[0];
-
- Ember.deprecate("Using the {{collection}} helper without specifying a class has been" +
- " deprecated as the {{each}} helper now supports the same functionality.", path !== 'collection');
-
- Ember.assert("You cannot pass more than one argument to the collection helper", params.length <= 1);
-
- var data = env.data;
- var template = options.template;
- var inverse = options.inverse;
- var view = data.view;
-
- // This should be deterministic, and should probably come from a
- // parent view and not the controller.
- var controller = get(view, 'controller');
- var container = (controller && controller.container ? controller.container : view.container);
-
- // If passed a path string, convert that into an object.
- // Otherwise, just default to the standard class.
- var collectionClass;
- if (path) {
- collectionClass = readViewFactory(path, container);
- Ember.assert(fmt("%@ #collection: Could not find collection class %@", [data.view, path]), !!collectionClass);
- } else {
- collectionClass = CollectionView;
- }
-
- var itemHash = {};
- var match;
-
- // Extract item view class if provided else default to the standard class
- var collectionPrototype = collectionClass.proto();
- var itemViewClass;
-
- if (hash.itemView) {
- itemViewClass = readViewFactory(hash.itemView, container);
- } else if (hash.itemViewClass) {
- itemViewClass = readViewFactory(hash.itemViewClass, container);
- } else {
- itemViewClass = collectionPrototype.itemViewClass;
- }
-
- if (typeof itemViewClass === 'string') {
- itemViewClass = container.lookupFactory('view:'+itemViewClass);
- }
-
- Ember.assert(fmt("%@ #collection: Could not find itemViewClass %@", [data.view, itemViewClass]), !!itemViewClass);
-
- delete hash.itemViewClass;
- delete hash.itemView;
-
- // Go through options passed to the {{collection}} helper and extract options
- // that configure item views instead of the collection itself.
- for (var prop in hash) {
- if (prop === 'itemController' || prop === 'itemClassBinding') {
- continue;
- }
- if (hash.hasOwnProperty(prop)) {
- match = prop.match(/^item(.)(.*)$/);
- if (match) {
- var childProp = match[1].toLowerCase() + match[2];
-
- if (IS_BINDING.test(prop)) {
- itemHash[childProp] = view._getBindingForStream(hash[prop]);
- } else {
- itemHash[childProp] = hash[prop];
- }
- delete hash[prop];
- }
- }
- }
-
- if (template) {
- itemHash.template = template;
- delete options.template;
- }
-
- var emptyViewClass;
- if (inverse) {
- emptyViewClass = get(collectionPrototype, 'emptyViewClass');
- emptyViewClass = emptyViewClass.extend({
- template: inverse,
- tagName: itemHash.tagName
- });
- } else if (hash.emptyViewClass) {
- emptyViewClass = readViewFactory(hash.emptyViewClass, container);
- }
- if (emptyViewClass) { hash.emptyView = emptyViewClass; }
-
- var viewOptions = mergeViewBindings(view, {}, itemHash);
-
- if (hash.itemClassBinding) {
- var itemClassBindings = hash.itemClassBinding.split(' ');
- viewOptions.classNameBindings = map(itemClassBindings, function(classBinding) {
- return streamifyClassNameBinding(view, classBinding);
- });
- }
-
- hash.itemViewClass = itemViewClass;
- hash._itemViewProps = viewOptions;
-
- options.helperName = options.helperName || 'collection';
-
- return env.helpers.view.helperFunction.call(this, [collectionClass], hash, options, env);
-}
diff --git a/packages/ember-htmlbars/lib/helpers/component.js b/packages/ember-htmlbars/lib/helpers/component.js
deleted file mode 100644
index cf3d0d278e3..00000000000
--- a/packages/ember-htmlbars/lib/helpers/component.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-import Ember from "ember-metal/core"; // Ember.warn, Ember.assert
-import { isStream, read } from "ember-metal/streams/utils";
-import { readComponentFactory } from "ember-views/streams/utils";
-import EmberError from "ember-metal/error";
-import BoundComponentView from "ember-views/views/bound_component_view";
-import mergeViewBindings from "ember-htmlbars/system/merge-view-bindings";
-import appendTemplatedView from "ember-htmlbars/system/append-templated-view";
-
-/**
- The `{{component}}` helper lets you add instances of `Ember.Component` to a
- template. See [Ember.Component](/api/classes/Ember.Component.html) for
- additional information on how a `Component` functions.
-
- `{{component}}`'s primary use is for cases where you want to dynamically
- change which type of component is rendered as the state of your application
- changes.
-
- The provided block will be applied as the template for the component.
-
- Given an empty `` the following template:
-
- ```handlebars
- {{! application.hbs }}
- {{component infographicComponentName}}
- ```
-
- And the following application code
-
- ```javascript
- App = Ember.Application.create();
- App.ApplicationController = Ember.Controller.extend({
- infographicComponentName: function() {
- if (this.get('isMarketOpen')) {
- return "live-updating-chart";
- } else {
- return "market-close-summary";
- }
- }.property('isMarketOpen')
- });
- ```
-
- The `live-updating-chart` component will be appended when `isMarketOpen` is
- `true`, and the `market-close-summary` component will be appended when
- `isMarketOpen` is `false`. If the value changes while the app is running,
- the component will be automatically swapped out accordingly.
-
- Note: You should not use this helper when you are consistently rendering the same
- component. In that case, use standard component syntax, for example:
-
- ```handlebars
- {{! application.hbs }}
- {{live-updating-chart}}
- ```
-
- @method component
- @since 1.11.0
- @for Ember.Handlebars.helpers
-*/
-export function componentHelper(params, hash, options, env) {
- Ember.assert(
- "The `component` helper expects exactly one argument, plus name/property values.",
- params.length === 1
- );
-
- var view = env.data.view;
- var componentNameParam = params[0];
- var container = view.container || read(view._keywords.view).container;
-
- var props = {
- helperName: options.helperName || 'component'
- };
- if (options.template) {
- props.template = options.template;
- }
-
- var viewClass;
- if (isStream(componentNameParam)) {
- viewClass = BoundComponentView;
- props = { _boundComponentOptions: Ember.merge(hash, props) };
- props._boundComponentOptions.componentNameStream = componentNameParam;
- } else {
- viewClass = readComponentFactory(componentNameParam, container);
- if (!viewClass) {
- throw new EmberError('HTMLBars error: Could not find component named "' + componentNameParam + '".');
- }
- mergeViewBindings(view, props, hash);
- }
-
- appendTemplatedView(view, options.morph, viewClass, props);
-}
diff --git a/packages/ember-htmlbars/lib/helpers/each.js b/packages/ember-htmlbars/lib/helpers/each.js
index a0b312ddffc..2def1e411b1 100644
--- a/packages/ember-htmlbars/lib/helpers/each.js
+++ b/packages/ember-htmlbars/lib/helpers/each.js
@@ -1,193 +1,27 @@
-
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-import Ember from "ember-metal/core"; // Ember.assert;
-import EachView from "ember-views/views/each";
-
-/**
- The `{{#each}}` helper loops over elements in a collection. It is an extension
- of the base Handlebars `{{#each}}` helper.
-
- The default behavior of `{{#each}}` is to yield its inner block once for every
- item in an array.
-
- ```javascript
- var developers = [{name: 'Yehuda'},{name: 'Tom'}, {name: 'Paul'}];
- ```
-
- ```handlebars
- {{#each person in developers}}
- {{person.name}}
- {{! `this` is whatever it was outside the #each }}
- {{/each}}
- ```
-
- The same rules apply to arrays of primitives, but the items may need to be
- references with `{{this}}`.
-
- ```javascript
- var developerNames = ['Yehuda', 'Tom', 'Paul']
- ```
-
- ```handlebars
- {{#each name in developerNames}}
- {{name}}
- {{/each}}
- ```
-
- ### {{else}} condition
-
- `{{#each}}` can have a matching `{{else}}`. The contents of this block will render
- if the collection is empty.
-
- ```
- {{#each person in developers}}
- {{person.name}}
- {{else}}
- Howdy Yehuda
-Howdy Tom
-Howdy Peter
-Sorry, nobody is available for this task.
- {{/each}} - ``` - - ### Specifying an alternative view for each item - - `itemViewClass` can control which view will be used during the render of each - item's template. - - The following template: - - ```handlebars --
- {{#each developer in developers itemViewClass="person"}}
- {{developer.name}}
- {{/each}}
-
-
-
- Yehuda -
- Tom -
- Paul -
-
- {{each developer in developers itemViewClass="person"}}
-
-
- {{#each developer in developers emptyViewClass="no-people"}}
-
- {{developer.name}} - {{/each}} -
| `readonly` | `required` | `autofocus` |
| `value` | `placeholder` | `disabled` |
| `size` | `tabindex` | `maxlength` |
| `name` | `min` | `max` |
| `pattern` | `accept` | `autocomplete` |
| `autosave` | `formaction` | `formenctype` |
| `formmethod` | `formnovalidate` | `formtarget` |
| `height` | `inputmode` | `multiple` |
| `step` | `width` | `form` |
| `selectionDirection` | `spellcheck` |
- {{outputWrittenWords}}
-
- ```
-
- Would result in the following HTML:
-
- ```html
-
-
- <-- the following div will be updated in real time as you type -->
-
-
- Lots of text that IS bound
-
- ```
-
- Finally, this example really shows the power and ease of Ember when two
- properties are bound to eachother via `Ember.computed.alias`. Type into
- either text area box and they'll both stay in sync. Note that
- `Ember.computed.alias` costs more in terms of performance, so only use it when
- your really binding in both directions:
-
- ```javascript
- App.ApplicationController = Ember.Controller.extend({
- writtenWords: "Lots of text that IS bound",
- twoWayWrittenWords: Ember.computed.alias("writtenWords")
- });
- ```
-
- ```handlebars
- {{textarea value=writtenWords}}
- {{textarea value=twoWayWrittenWords}}
- ```
-
- ```html
-
-
- <-- both updated in real time -->
-
-
- ```
-
- ## Actions
-
- The helper can send multiple actions based on user events.
-
- The action property defines the action which is send when
- the user presses the return key.
-
- ```handlebars
- {{input action="submit"}}
- ```
-
- The helper allows some user events to send actions.
-
-* `enter`
-* `insert-newline`
-* `escape-press`
-* `focus-in`
-* `focus-out`
-* `key-press`
-
- For example, if you desire an action to be sent when the input is blurred,
- you only need to setup the action name to the event name property.
-
- ```handlebars
- {{textarea focus-in="alertMessage"}}
- ```
-
- See more about [Text Support Actions](/api/classes/Ember.TextArea.html)
-
- ## Extension
-
- Internally, `{{textarea}}` creates an instance of `Ember.TextArea`, passing
- arguments from the helper to `Ember.TextArea`'s `create` method. You can
- extend the capabilities of text areas in your application by reopening this
- class. For example, if you are building a Bootstrap project where `data-*`
- attributes are used, you can globally add support for a `data-*` attribute
- on all `{{textarea}}`s' in your app by reopening `Ember.TextArea` or
- `Ember.TextSupport` and adding it to the `attributeBindings` concatenated
- property:
-
- ```javascript
- Ember.TextArea.reopen({
- attributeBindings: ['data-error']
- });
- ```
-
- Keep in mind when writing `Ember.TextArea` subclasses that `Ember.TextArea`
- itself extends `Ember.Component`, meaning that it does NOT inherit
- the `controller` of the parent view.
-
- See more about [Ember components](/api/classes/Ember.Component.html)
-
- @method textarea
- @for Ember.Handlebars.helpers
- @param {Hash} options
-*/
-export function textareaHelper(params, hash, options, env) {
- Ember.assert('You can only pass attributes to the `textarea` helper, not arguments', params.length === 0);
-
- return env.helpers.view.helperFunction.call(this, [TextArea], hash, options, env);
-}
diff --git a/packages/ember-htmlbars/lib/helpers/unbound.js b/packages/ember-htmlbars/lib/helpers/unbound.js
deleted file mode 100644
index 871ff878894..00000000000
--- a/packages/ember-htmlbars/lib/helpers/unbound.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import EmberError from "ember-metal/error";
-import { IS_BINDING } from "ember-metal/mixin";
-import { read } from "ember-metal/streams/utils";
-import lookupHelper from "ember-htmlbars/system/lookup-helper";
-
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-/**
- `unbound` allows you to output a property without binding. *Important:* The
- output will not be updated if the property changes. Use with caution.
-
- ```handlebars
- {{unbound somePropertyThatDoesntChange}}
- ```
-
- `unbound` can also be used in conjunction with a bound helper to
- render it in its unbound form:
-
- ```handlebars
- {{unbound helperName somePropertyThatDoesntChange}}
- ```
-
- @method unbound
- @for Ember.Handlebars.helpers
- @param {String} property
- @return {String} HTML string
-*/
-export function unboundHelper(params, hash, options, env) {
- Ember.assert(
- "The `unbound` helper expects at least one argument, " +
- "e.g. `{{unbound user.name}}`.",
- params.length > 0
- );
-
- if (params.length === 1) {
- return read(params[0]);
- } else {
- options.helperName = options.helperName || 'unbound';
-
- var view = env.data.view;
- var helperName = params[0]._label;
- var helper = lookupHelper(helperName, view, env);
-
- if (!helper) {
- throw new EmberError('HTMLBars error: Could not find component or helper named ' + helperName + '.');
- }
-
- return helper.helperFunction.call(this, readParams(params), readHash(hash, view), options, env);
- }
-}
-
-function readParams(params) {
- var l = params.length;
- var unboundParams = new Array(l - 1);
-
- for (var i = 1; i < l; i++) {
- unboundParams[i-1] = read(params[i]);
- }
-
- return unboundParams;
-}
-
-function readHash(hash, view) {
- var unboundHash = {};
-
- for (var prop in hash) {
- if (IS_BINDING.test(prop)) {
- var value = hash[prop];
- if (typeof value === 'string') {
- value = view.getStream(value);
- }
-
- unboundHash[prop.slice(0, -7)] = read(value);
- } else {
- unboundHash[prop] = read(hash[prop]);
- }
- }
-
- return unboundHash;
-}
diff --git a/packages/ember-htmlbars/lib/helpers/view.js b/packages/ember-htmlbars/lib/helpers/view.js
deleted file mode 100644
index 1ce6077f360..00000000000
--- a/packages/ember-htmlbars/lib/helpers/view.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import Ember from "ember-metal/core"; // Ember.warn, Ember.assert
-import { read } from "ember-metal/streams/utils";
-import { readViewFactory } from "ember-views/streams/utils";
-import View from "ember-views/views/view";
-import mergeViewBindings from "ember-htmlbars/system/merge-view-bindings";
-import appendTemplatedView from "ember-htmlbars/system/append-templated-view";
-
-/**
- `{{view}}` inserts a new instance of an `Ember.View` into a template passing its
- options to the `Ember.View`'s `create` method and using the supplied block as
- the view's own template.
-
- An empty `` and the following template:
-
- ```handlebars
- A span:
- {{#view tagName="span"}}
- hello.
- {{/view}}
- ```
-
- Will result in HTML structure:
-
- ```html
-
-
-
-
- A span:
-
- Hello.
-
-
-
- ```
-
- ### `parentView` setting
-
- The `parentView` property of the new `Ember.View` instance created through
- `{{view}}` will be set to the `Ember.View` instance of the template where
- `{{view}}` was called.
-
- ```javascript
- aView = Ember.View.create({
- template: Ember.Handlebars.compile("{{#view}} my parent: {{parentView.elementId}} {{/view}}")
- });
-
- aView.appendTo('body');
- ```
-
- Will result in HTML structure:
-
- ```html
-
-
- ```
-
- ### Setting CSS id and class attributes
-
- The HTML `id` attribute can be set on the `{{view}}`'s resulting element with
- the `id` option. This option will _not_ be passed to `Ember.View.create`.
-
- ```handlebars
- {{#view tagName="span" id="a-custom-id"}}
- hello.
- {{/view}}
- ```
-
- Results in the following HTML structure:
-
- ```html
-
- my parent: ember1
-
-
-
- hello.
-
-
- ```
-
- The HTML `class` attribute can be set on the `{{view}}`'s resulting element
- with the `class` or `classNameBindings` options. The `class` option will
- directly set the CSS `class` attribute and will not be passed to
- `Ember.View.create`. `classNameBindings` will be passed to `create` and use
- `Ember.View`'s class name binding functionality:
-
- ```handlebars
- {{#view tagName="span" class="a-custom-class"}}
- hello.
- {{/view}}
- ```
-
- Results in the following HTML structure:
-
- ```html
-
-
- hello.
-
-
- ```
-
- ### Supplying a different view class
-
- `{{view}}` can take an optional first argument before its supplied options to
- specify a path to a custom view class.
-
- ```handlebars
- {{#view "custom"}}{{! will look up App.CustomView }}
- hello.
- {{/view}}
- ```
-
- The first argument can also be a relative path accessible from the current
- context.
-
- ```javascript
- MyApp = Ember.Application.create({});
- MyApp.OuterView = Ember.View.extend({
- innerViewClass: Ember.View.extend({
- classNames: ['a-custom-view-class-as-property']
- }),
- template: Ember.Handlebars.compile('{{#view view.innerViewClass}} hi {{/view}}')
- });
-
- MyApp.OuterView.create().appendTo('body');
- ```
-
- Will result in the following HTML:
-
- ```html
-
-
- ```
-
- ### Blockless use
-
- If you supply a custom `Ember.View` subclass that specifies its own template
- or provide a `templateName` option to `{{view}}` it can be used without
- supplying a block. Attempts to use both a `templateName` option and supply a
- block will throw an error.
-
- ```javascript
- var App = Ember.Application.create();
- App.WithTemplateDefinedView = Ember.View.extend({
- templateName: 'defined-template'
- });
- ```
-
- ```handlebars
- {{! application.hbs }}
- {{view 'with-template-defined'}}
- ```
-
- ```handlebars
- {{! defined-template.hbs }}
- Some content for the defined template view.
- ```
-
- ### `viewName` property
-
- You can supply a `viewName` option to `{{view}}`. The `Ember.View` instance
- will be referenced as a property of its parent view by this name.
-
- ```javascript
- aView = Ember.View.create({
- template: Ember.Handlebars.compile('{{#view viewName="aChildByName"}} hi {{/view}}')
- });
-
- aView.appendTo('body');
- aView.get('aChildByName') // the instance of Ember.View created by {{view}} helper
- ```
-
- @method view
- @for Ember.Handlebars.helpers
-*/
-export function viewHelper(params, hash, options, env) {
- Ember.assert(
- "The `view` helper expects zero or one arguments.",
- params.length <= 2
- );
-
- var view = env.data.view;
- var container = view.container || read(view._keywords.view).container;
- var viewClassOrInstance;
- if (params.length === 0) {
- if (container) {
- viewClassOrInstance = container.lookupFactory('view:toplevel');
- } else {
- viewClassOrInstance = View;
- }
- } else {
- viewClassOrInstance = readViewFactory(params[0], container);
- }
-
- var props = {
- helperName: options.helperName || 'view'
- };
-
- if (options.template) {
- props.template = options.template;
- }
-
- mergeViewBindings(view, props, hash);
- appendTemplatedView(view, options.morph, viewClassOrInstance, props);
-}
diff --git a/packages/ember-htmlbars/lib/helpers/with.js b/packages/ember-htmlbars/lib/helpers/with.js
index b9e6188f7ff..26a5d75e083 100644
--- a/packages/ember-htmlbars/lib/helpers/with.js
+++ b/packages/ember-htmlbars/lib/helpers/with.js
@@ -3,90 +3,65 @@
@submodule ember-htmlbars
*/
-import Ember from "ember-metal/core"; // Ember.assert
-import WithView from "ember-views/views/with_view";
+import normalizeSelf from "ember-htmlbars/utils/normalize-self";
/**
Use the `{{with}}` helper when you want to aliases the to a new name. It's helpful
for semantic clarity and to retain default scope or to reference from another
`{{with}}` block.
-
```handlebars
// posts might not be
{{#with user.posts as |blogPosts|}}
- hi
-
-
There are {{blogPosts.length}} blog posts written by {{user.name}}.
-
- {{#each blogPosts as |post|}}
+ {{#each post in blogPosts}}
{{yield}}
'),
- template: Ember.Handlebars.compile('I am wrapped')
- });
-
- aView = AView.create();
- aView.appendTo('body');
- ```
-
- Will result in the following HTML output:
-
- ```html
-
-
-
-
- ```
-
- The `yield` helper cannot be used outside of a template assigned to an
- `Ember.View`'s `layout` property and will throw an error if attempted.
-
- ```javascript
- BView = Ember.View.extend({
- classNames: ['a-view-with-layout'],
- template: Ember.Handlebars.compile('{{yield}}')
- });
-
- bView = BView.create();
- bView.appendTo('body');
-
- // throws
- // Uncaught Error: assertion failed:
- // You called yield in a template that was not a layout
- ```
-
- ### Use with Ember.Component
- When designing components `{{yield}}` is used to denote where, inside the component's
- template, an optional block passed to the component should render:
-
- ```handlebars
-
- {{#labeled-textfield value=someProperty}}
- First name:
- {{/labeled-textfield}}
- ```
-
- ```handlebars
-
-
- ```
-
- Result:
-
- ```html
-
- ```
-
- @method yield
- @for Ember.Handlebars.helpers
- @param {Hash} options
- @return {String} HTML string
-*/
-export function yieldHelper(params, hash, options, env) {
- var view = env.data.view;
- var layoutView = view;
-
- // Yea gods
- while (layoutView && !get(layoutView, 'layout')) {
- if (layoutView._contextView) {
- layoutView = layoutView._contextView;
- } else {
- layoutView = layoutView._parentView;
- }
- }
-
- Ember.assert("You called yield in a template that was not a layout", !!layoutView);
-
- return layoutView._yield(view, env, options.morph, params);
-}
diff --git a/packages/ember-htmlbars/lib/hooks/attribute.js b/packages/ember-htmlbars/lib/hooks/attribute.js
deleted file mode 100644
index 9350949b3b5..00000000000
--- a/packages/ember-htmlbars/lib/hooks/attribute.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import AttrNode from "ember-views/attr_nodes/attr_node";
-import EmberError from "ember-metal/error";
-import { isStream } from "ember-metal/streams/utils";
-import sanitizeAttributeValue from "morph-attr/sanitize-attribute-value";
-
-var boundAttributesEnabled = false;
-
-if (Ember.FEATURES.isEnabled('ember-htmlbars-attribute-syntax')) {
- boundAttributesEnabled = true;
-}
-
-export default function attribute(env, morph, element, attrName, attrValue) {
- if (boundAttributesEnabled) {
- var attrNode = new AttrNode(attrName, attrValue);
- attrNode._morph = morph;
- env.data.view.appendChild(attrNode);
- } else {
- if (isStream(attrValue)) {
- throw new EmberError('Bound attributes are not yet supported in Ember.js');
- } else {
- var sanitizedValue = sanitizeAttributeValue(env.dom, element, attrName, attrValue);
- env.dom.setProperty(element, attrName, sanitizedValue);
- }
- }
-}
diff --git a/packages/ember-htmlbars/lib/hooks/bind-local.js b/packages/ember-htmlbars/lib/hooks/bind-local.js
new file mode 100644
index 00000000000..9327cabee62
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/bind-local.js
@@ -0,0 +1,24 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+import Stream from "ember-metal/streams/stream";
+import ProxyStream from "ember-metal/streams/proxy-stream";
+
+export default function bindLocal(env, scope, key, value) {
+ var isExisting = scope.locals.hasOwnProperty(key);
+
+ if (isExisting) {
+ var existing = scope.locals[key];
+
+ if (existing !== value) {
+ existing.setSource(value);
+ }
+
+ existing.notify();
+ } else {
+ var newValue = Stream.wrap(value, ProxyStream, key);
+ scope.locals[key] = newValue;
+ }
+}
diff --git a/packages/ember-htmlbars/lib/hooks/bind-scope.js b/packages/ember-htmlbars/lib/hooks/bind-scope.js
new file mode 100644
index 00000000000..6993a19c498
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/bind-scope.js
@@ -0,0 +1,2 @@
+export default function bindScope(env, scope) {
+}
diff --git a/packages/ember-htmlbars/lib/hooks/bind-self.js b/packages/ember-htmlbars/lib/hooks/bind-self.js
new file mode 100644
index 00000000000..52a38ccc409
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/bind-self.js
@@ -0,0 +1,38 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+import ProxyStream from "ember-metal/streams/proxy-stream";
+import subscribe from "ember-htmlbars/utils/subscribe";
+
+export default function bindSelf(env, scope, _self) {
+ let self = _self;
+
+ if (self && self.hasBoundController) {
+ let { controller } = self;
+ self = self.self;
+
+ newStream(scope.locals, 'controller', controller || self);
+ }
+
+ if (self && self.isView) {
+ scope.view = self;
+ newStream(scope.locals, 'view', self, null);
+ newStream(scope.locals, 'controller', scope.locals.view.getKey('controller'));
+ newStream(scope, 'self', scope.locals.view.getKey('context'), null, true);
+ return;
+ }
+
+ newStream(scope, 'self', self, null, true);
+
+ if (!scope.locals.controller) {
+ scope.locals.controller = scope.self;
+ }
+}
+
+function newStream(scope, key, newValue, renderNode, isSelf) {
+ var stream = new ProxyStream(newValue, isSelf ? '' : key);
+ if (renderNode) { subscribe(renderNode, scope, stream); }
+ scope[key] = stream;
+}
diff --git a/packages/ember-htmlbars/lib/hooks/bind-shadow-scope.js b/packages/ember-htmlbars/lib/hooks/bind-shadow-scope.js
new file mode 100644
index 00000000000..b1ba05015d8
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/bind-shadow-scope.js
@@ -0,0 +1,49 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+import Component from 'ember-views/views/component';
+
+export default function bindShadowScope(env, parentScope, shadowScope, options) {
+ if (!options) { return; }
+
+ let didOverrideController = false;
+
+ if (parentScope && parentScope.overrideController) {
+ didOverrideController = true;
+ shadowScope.locals.controller = parentScope.locals.controller;
+ }
+
+ var view = options.view;
+ if (view && !(view instanceof Component)) {
+ newStream(shadowScope.locals, 'view', view, null);
+
+ if (!didOverrideController) {
+ newStream(shadowScope.locals, 'controller', shadowScope.locals.view.getKey('controller'));
+ }
+
+ if (view.isView) {
+ newStream(shadowScope, 'self', shadowScope.locals.view.getKey('context'), null, true);
+ }
+ }
+
+ shadowScope.view = view;
+
+ if (view && options.attrs) {
+ shadowScope.component = view;
+ }
+
+ shadowScope.attrs = options.attrs;
+
+ return shadowScope;
+}
+
+import ProxyStream from "ember-metal/streams/proxy-stream";
+import subscribe from "ember-htmlbars/utils/subscribe";
+
+function newStream(scope, key, newValue, renderNode, isSelf) {
+ var stream = new ProxyStream(newValue, isSelf ? '' : key);
+ if (renderNode) { subscribe(renderNode, scope, stream); }
+ scope[key] = stream;
+}
diff --git a/packages/ember-htmlbars/lib/hooks/block.js b/packages/ember-htmlbars/lib/hooks/block.js
deleted file mode 100644
index f76e36cee8d..00000000000
--- a/packages/ember-htmlbars/lib/hooks/block.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import { appendSimpleBoundView } from "ember-views/views/simple_bound_view";
-import { isStream } from "ember-metal/streams/utils";
-import lookupHelper from "ember-htmlbars/system/lookup-helper";
-
-export default function block(env, morph, view, path, params, hash, template, inverse) {
- var helper = lookupHelper(path, view, env);
-
- Ember.assert("A helper named `"+path+"` could not be found", helper);
-
- var options = {
- morph: morph,
- template: template,
- inverse: inverse,
- isBlock: true
- };
- var result = helper.helperFunction.call(undefined, params, hash, options, env);
-
- if (isStream(result)) {
- appendSimpleBoundView(view, morph, result);
- } else {
- morph.setContent(result);
- }
-}
diff --git a/packages/ember-htmlbars/lib/hooks/classify.js b/packages/ember-htmlbars/lib/hooks/classify.js
new file mode 100644
index 00000000000..9fb0bbfb45c
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/classify.js
@@ -0,0 +1,14 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+import isComponent from "ember-htmlbars/utils/is-component";
+
+export default function classify(env, scope, path) {
+ if (isComponent(env, scope, path)) {
+ return 'component';
+ }
+
+ return null;
+}
diff --git a/packages/ember-htmlbars/lib/hooks/cleanup-render-node.js b/packages/ember-htmlbars/lib/hooks/cleanup-render-node.js
new file mode 100644
index 00000000000..e0cce31c781
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/cleanup-render-node.js
@@ -0,0 +1,8 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+export default function cleanupRenderNode(renderNode) {
+ if (renderNode.cleanup) { renderNode.cleanup(); }
+}
diff --git a/packages/ember-htmlbars/lib/hooks/component.js b/packages/ember-htmlbars/lib/hooks/component.js
index 7099ac296cf..3df745ce558 100644
--- a/packages/ember-htmlbars/lib/hooks/component.js
+++ b/packages/ember-htmlbars/lib/hooks/component.js
@@ -1,16 +1,26 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
+import ComponentNodeManager from "ember-htmlbars/node-managers/component-node-manager";
-import Ember from "ember-metal/core";
-import lookupHelper from "ember-htmlbars/system/lookup-helper";
+export default function componentHook(renderNode, env, scope, tagName, attrs, template, visitor) {
+ var state = renderNode.state;
-export default function component(env, morph, view, tagName, attrs, template) {
- var helper = lookupHelper(tagName, view, env);
+ // Determine if this is an initial render or a re-render
+ if (state.manager) {
+ state.manager.rerender(env, attrs, visitor);
+ return;
+ }
- Ember.assert('You specified `' + tagName + '` in your template, but a component for `' + tagName + '` could not be found.', !!helper);
+ var read = env.hooks.getValue;
+ var parentView = read(env.view);
- return helper.helperFunction.call(undefined, [], attrs, { morph: morph, template: template }, env);
-}
+ var manager = ComponentNodeManager.create(renderNode, env, {
+ tagName,
+ attrs,
+ parentView,
+ template,
+ parentScope: scope
+ });
+
+ state.manager = manager;
+ manager.render(env, visitor);
+}
diff --git a/packages/ember-htmlbars/lib/hooks/content.js b/packages/ember-htmlbars/lib/hooks/content.js
deleted file mode 100644
index c79b1d72d82..00000000000
--- a/packages/ember-htmlbars/lib/hooks/content.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import { appendSimpleBoundView } from "ember-views/views/simple_bound_view";
-import { isStream } from "ember-metal/streams/utils";
-import lookupHelper from "ember-htmlbars/system/lookup-helper";
-
-export default function content(env, morph, view, path) {
- var helper = lookupHelper(path, view, env);
- var result;
-
- if (helper) {
- var options = {
- morph: morph,
- isInline: true
- };
- result = helper.helperFunction.call(undefined, [], {}, options, env);
- } else {
- result = view.getStream(path);
- }
-
- if (isStream(result)) {
- appendSimpleBoundView(view, morph, result);
- } else {
- morph.setContent(result);
- }
-}
diff --git a/packages/ember-htmlbars/lib/hooks/create-fresh-scope.js b/packages/ember-htmlbars/lib/hooks/create-fresh-scope.js
new file mode 100644
index 00000000000..6ff0aacc675
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/create-fresh-scope.js
@@ -0,0 +1,11 @@
+export default function createFreshScope() {
+ return {
+ self: null,
+ block: null,
+ component: null,
+ view: null,
+ attrs: null,
+ locals: {},
+ localPresent: {}
+ };
+}
diff --git a/packages/ember-htmlbars/lib/hooks/destroy-render-node.js b/packages/ember-htmlbars/lib/hooks/destroy-render-node.js
new file mode 100644
index 00000000000..02eb5776c1f
--- /dev/null
+++ b/packages/ember-htmlbars/lib/hooks/destroy-render-node.js
@@ -0,0 +1,17 @@
+/**
+@module ember
+@submodule ember-htmlbars
+*/
+
+export default function destroyRenderNode(renderNode) {
+ if (renderNode.emberView) {
+ renderNode.emberView.destroy();
+ }
+
+ var streamUnsubscribers = renderNode.streamUnsubscribers;
+ if (streamUnsubscribers) {
+ for (let i=0, l=streamUnsubscribers.length; i
- I am wrapped
-
- {{prop}}
")
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ controller: { prop: "isThing" },
+ template: compile("{{prop}}
")
+ });
});
runAppend(view);
@@ -205,12 +207,44 @@ QUnit.test("bound helper should support this keyword", function() {
equal(view.$().text(), 'AB', "helper output is correct");
});
-QUnit.test("bound helpers should support bound options", function() {
+QUnit.test("bound helpers should support bound options via `fooBinding` [DEPRECATED]", function() {
registerRepeatHelper();
+ var template;
+
+ expectDeprecation(function() {
+ template = compile('{{repeat text countBinding="numRepeats"}}');
+ }, /You're using legacy binding syntax: countBinding="numRepeats"/);
+
view = EmberView.create({
controller: EmberObject.create({ text: 'ab', numRepeats: 3 }),
- template: compile('{{repeat text countBinding="numRepeats"}}')
+ template: template
+ });
+
+ runAppend(view);
+
+ equal(view.$().text(), 'ababab', "helper output is correct");
+
+ run(function() {
+ view.set('controller.numRepeats', 4);
+ });
+
+ equal(view.$().text(), 'abababab', "helper correctly re-rendered after bound option was changed");
+
+ run(function() {
+ view.set('controller.numRepeats', 2);
+ view.set('controller.text', "YES");
+ });
+
+ equal(view.$().text(), 'YESYES', "helper correctly re-rendered after both bound option and property changed");
+});
+
+QUnit.test("bound helpers should support bound hash options", function() {
+ registerRepeatHelper();
+
+ view = EmberView.create({
+ controller: EmberObject.create({ text: 'ab', numRepeats: 3 }),
+ template: compile('{{repeat text count=numRepeats}}')
});
runAppend(view);
@@ -440,6 +474,8 @@ QUnit.test("shouldn't treat quoted strings as bound paths", function() {
QUnit.test("bound helpers can handle nulls in array (with primitives) [DEPRECATED]", function() {
expectDeprecationInHTMLBars();
+ // The problem here is that `undefined` is treated as "use the parent scope" in yieldItem
+
helper('reverse', function(val) {
return val ? val.split('').reverse().join('') : "NOPE";
});
@@ -453,7 +489,7 @@ QUnit.test("bound helpers can handle nulls in array (with primitives) [DEPRECATE
expectDeprecation(function() {
runAppend(view);
- }, 'Using the context switching form of {{each}} is deprecated. Please use the block param form (`{{#each bar as |foo|}}`) instead.');
+ }, eachDeprecation);
equal(view.$().text(), '|NOPE 0|NOPE |NOPE false|NOPE OMG|GMO |NOPE 0|NOPE |NOPE false|NOPE OMG|GMO ', "helper output is correct");
@@ -481,7 +517,7 @@ QUnit.test("bound helpers can handle nulls in array (with objects)", function()
expectDeprecation(function() {
runAppend(view);
- }, 'Using the context switching form of {{each}} is deprecated. Please use the block param form (`{{#each bar as |foo|}}`) instead.');
+ }, eachDeprecation);
equal(view.$().text(), '|NOPE 5|5 |NOPE 5|5 ', "helper output is correct");
@@ -504,26 +540,26 @@ QUnit.test("bound helpers can handle `this` keyword when it's a non-object", fun
runAppend(view);
- equal(view.$().text(), 'alex!', "helper output is correct");
+ equal(view.$().text(), 'alex!', "helper output is correct first");
run(function() {
set(view, 'context', '');
});
- equal(view.$().text(), '!', "helper output is correct");
+ equal(view.$().text(), '!', "helper output is correct after updating to empty");
run(function() {
set(view, 'context', 'wallace');
});
- equal(view.$().text(), 'wallace!', "helper output is correct");
+ equal(view.$().text(), 'wallace!', "helper output is correct after updating to wallace");
});
QUnit.test("should have correct argument types", function() {
expectDeprecationInHTMLBars();
helper('getType', function(value) {
- return typeof value;
+ return value === null ? 'null' : typeof value;
});
view = EmberView.create({
@@ -533,52 +569,5 @@ QUnit.test("should have correct argument types", function() {
runAppend(view);
- equal(view.$().text(), 'undefined, undefined, string, number, object', "helper output is correct");
-});
-
-QUnit.test("when no parameters are bound, no new views are created", function() {
- registerRepeatHelper();
- var originalRender = SimpleBoundView.prototype.render;
- var renderWasCalled = false;
- SimpleBoundView.prototype.render = function() {
- renderWasCalled = true;
- return originalRender.apply(this, arguments);
- };
-
- try {
- view = EmberView.create({
- template: compile('{{repeat "a"}}'),
- controller: EmberObject.create()
- });
- runAppend(view);
- } finally {
- SimpleBoundView.prototype.render = originalRender;
- }
-
- ok(!renderWasCalled, 'simple bound view should not have been created and rendered');
- equal(view.$().text(), 'a');
-});
-
-
-QUnit.test('when no hash parameters are bound, no new views are created', function() {
- registerRepeatHelper();
- var originalRender = SimpleBoundView.prototype.render;
- var renderWasCalled = false;
- SimpleBoundView.prototype.render = function() {
- renderWasCalled = true;
- return originalRender.apply(this, arguments);
- };
-
- try {
- view = EmberView.create({
- template: compile('{{repeat "a" count=3}}'),
- controller: EmberObject.create()
- });
- runAppend(view);
- } finally {
- SimpleBoundView.prototype.render = originalRender;
- }
-
- ok(!renderWasCalled, 'simple bound view should not have been created and rendered');
- equal(view.$().text(), 'aaa');
+ equal(view.$().text(), 'null, undefined, string, number, object', "helper output is correct");
});
diff --git a/packages/ember-htmlbars/tests/compat/precompile_test.js b/packages/ember-htmlbars/tests/compat/precompile_test.js
index 27fa8245e7c..87b81fc18d8 100644
--- a/packages/ember-htmlbars/tests/compat/precompile_test.js
+++ b/packages/ember-htmlbars/tests/compat/precompile_test.js
@@ -4,7 +4,7 @@ var precompile = EmberHandlebars.precompile;
var template = 'Hello World';
var result;
-QUnit.module("ember-htmlbars: Ember.Handlebars.precompile");
+QUnit.module("ember-htmlbars: compat - Ember.Handlebars.precompile");
QUnit.test("precompile creates an object when asObject isn't defined", function() {
result = precompile(template);
diff --git a/packages/ember-htmlbars/tests/helpers/bind_attr_test.js b/packages/ember-htmlbars/tests/helpers/bind_attr_test.js
index a2b246f41f4..295276d7e9a 100644
--- a/packages/ember-htmlbars/tests/helpers/bind_attr_test.js
+++ b/packages/ember-htmlbars/tests/helpers/bind_attr_test.js
@@ -5,7 +5,6 @@ import Ember from "ember-metal/core"; // Ember.lookup
import run from "ember-metal/run_loop";
import Namespace from "ember-runtime/system/namespace";
import EmberView from "ember-views/views/view";
-import _MetamorphView from "ember-views/views/metamorph_view";
import EmberObject from "ember-runtime/system/object";
import { A } from "ember-runtime/system/native_array";
import { computed } from "ember-metal/computed";
@@ -13,10 +12,8 @@ import { observersFor } from "ember-metal/observer";
import { Registry } from "ember-runtime/system/container";
import { set } from "ember-metal/property_set";
import { runAppend, runDestroy } from "ember-runtime/tests/utils";
-import { styleWarning } from "ember-views/attr_nodes/attr_node";
import { SafeString } from "ember-htmlbars/utils/string";
-
-import helpers from "ember-htmlbars/helpers";
+import { styleWarning } from "ember-htmlbars/morphs/attr-morph";
import compile from "ember-template-compiler/system/compile";
var view;
@@ -30,14 +27,13 @@ var TemplateTests, registry, container, lookup, warnings, originalWarn;
If you add additional template support to View, you should create a new
file in which to test.
*/
-QUnit.module("ember-htmlbars: {{bind-attr}}", {
+QUnit.module("ember-htmlbars: {{bind-attr}} [DEPRECATED]", {
setup() {
Ember.lookup = lookup = {};
lookup.TemplateTests = TemplateTests = Namespace.create();
registry = new Registry();
container = registry.container();
registry.optionsForType('template', { instantiate: false });
- registry.register('view:default', _MetamorphView);
registry.register('view:toplevel', EmberView.extend());
warnings = [];
@@ -61,14 +57,14 @@ QUnit.module("ember-htmlbars: {{bind-attr}}", {
});
QUnit.test("should be able to bind element attributes using {{bind-attr}}", function() {
- var template = compile('
')
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ value: 'Test',
+ template: compile('')
+ });
});
runAppend(view);
@@ -129,26 +127,31 @@ QUnit.test("should be able to bind to view attributes with {{bind-attr}}", funct
equal(view.$('img').attr('alt'), "Updated", "updates value");
});
-QUnit.test("should be able to bind to globals with {{bind-attr}} (DEPRECATED)", function() {
+QUnit.test("should be able to bind to globals with {{bind-attr}}", function() {
TemplateTests.set('value', 'Test');
- view = EmberView.create({
- template: compile('')
+
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ template: compile('')
+ });
});
expectDeprecation(function() {
runAppend(view);
- }, /Global lookup of TemplateTests.value from a Handlebars template is deprecated/);
+ }, /Global lookup of TemplateTests from a Handlebars template is deprecated/);
equal(view.$('img').attr('alt'), "Test", "renders initial value");
});
QUnit.test("should not allow XSS injection via {{bind-attr}}", function() {
- view = EmberView.create({
- template: compile(''),
- content: {
- value: 'Trololol" onmouseover="alert(\'HAX!\');'
- }
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ template: compile(''),
+ content: {
+ value: 'Trololol" onmouseover="alert(\'HAX!\');'
+ }
+ });
});
runAppend(view);
@@ -159,14 +162,14 @@ QUnit.test("should not allow XSS injection via {{bind-attr}}", function() {
});
QUnit.test("should be able to bind use {{bind-attr}} more than once on an element", function() {
- var template = compile('')
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ value: 'Test',
+ template: compile('')
+ });
});
- expectDeprecation(function() {
- runAppend(view);
- }, /The 'bindAttr' view helper is deprecated in favor of 'bind-attr'/);
+ runAppend(view);
equal(view.$('img').attr('alt'), "Test", "renders initial value");
@@ -259,14 +236,14 @@ QUnit.test("{{bindAttr}} can be used to bind attributes [DEPRECATED]", function(
});
QUnit.test("should be able to bind element attributes using {{bind-attr}} inside a block", function() {
- var template = compile('{{#with view.content as |image|}}
{{/with}}');
-
- view = EmberView.create({
- template: template,
- content: EmberObject.create({
- url: "http://www.emberjs.com/assets/images/logo.png",
- title: "The SproutCore Logo"
- })
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ template: compile('{{#with view.content as image}}{{/with}}'),
+ content: EmberObject.create({
+ url: "http://www.emberjs.com/assets/images/logo.png",
+ title: "The SproutCore Logo"
+ })
+ });
});
runAppend(view);
@@ -282,11 +259,11 @@ QUnit.test("should be able to bind element attributes using {{bind-attr}} inside
});
QUnit.test("should be able to bind class attribute with {{bind-attr}}", function() {
- var template = compile('')
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ template: compile('')
+ });
});
expectDeprecation(function() {
runAppend(view);
- }, /Global lookup of TemplateTests.isOpen from a Handlebars template is deprecated/);
+ }, /Global lookup of TemplateTests from a Handlebars template is deprecated/);
ok(view.$('img').hasClass('is-open'), "sets classname to the dasherized value of the global property");
});
-QUnit.test("should be able to bind-attr to 'this' in an {{#each}} block [DEPRECATED]", function() {
- expectDeprecation('Using the context switching form of {{each}} is deprecated. Please use the block param form (`{{#each bar as |foo|}}`) instead.');
-
- view = EmberView.create({
- template: compile('{{#each view.images}}{{#if view.shouldDisplay}}{{view view.InnerViewClass}}{{/if}}
'), shouldDisplay: true, InnerViewClass: EmberView.extend({ - template: compile('bam'), - - render() { - renderCount++; - return this._super.apply(this, arguments); - } + template: compile('bam') }) }); runAppend(view); - equal(renderCount, 1, 'precond - should have rendered once'); equal(view.$('#first').text(), 'bam', 'renders block when condition is true'); + equal(view.$('#first div').text(), 'bam', 'inserts a div into the DOM'); run(function() { set(view, 'shouldDisplay', 1); }); - equal(renderCount, 1, 'should not have rerendered'); equal(view.$('#first').text(), 'bam', 'renders block when condition is true'); }); @@ -282,7 +253,6 @@ QUnit.test('should update the block when object passed to #unless helper changes }); equal(view.$('h1').text(), 'Eat your vegetables', fmt('renders block when conditional is "%@"; %@', [String(val), typeOf(val)])); - run(function() { set(view, 'onDrugs', true); }); @@ -383,7 +353,10 @@ QUnit.test('should update the block when object passed to #if helper changes and QUnit.test('views within an if statement should be sane on re-render', function() { view = EmberView.create({ - template: compile('{{#if view.display}}{{input}}{{/if}}'), + template: compile('{{#if view.display}}{{view view.MyView}}{{/if}}'), + MyView: Ember.View.extend({ + tagName: 'input' + }), display: false }); @@ -590,8 +563,8 @@ QUnit.test('edge case: child conditional should not render children if parent co }); // TODO: Priority Queue, for now ensure correct result. - //ok(!childCreated, 'child should not be created'); - ok(child.isDestroyed, 'child should be gone'); + ok(!childCreated, 'child should not be created'); + //ok(child.isDestroyed, 'child should be gone'); equal(view.$().text(), ''); }); diff --git a/packages/ember-htmlbars/tests/helpers/input_test.js b/packages/ember-htmlbars/tests/helpers/input_test.js index c0a4aeaf6b5..839afa8a3a1 100644 --- a/packages/ember-htmlbars/tests/helpers/input_test.js +++ b/packages/ember-htmlbars/tests/helpers/input_test.js @@ -3,12 +3,26 @@ import { set } from "ember-metal/property_set"; import View from "ember-views/views/view"; import { runAppend, runDestroy } from "ember-runtime/tests/utils"; import compile from "ember-template-compiler/system/compile"; +import Registry from "container/registry"; +import ComponentLookup from "ember-views/component_lookup"; +import TextField from 'ember-views/views/text_field'; +import Checkbox from 'ember-views/views/checkbox'; var view; -var controller; +var controller, registry, container; + +function commonSetup() { + registry = new Registry(); + registry.register('component:-text-field', TextField); + registry.register('component:-checkbox', Checkbox); + registry.register('component-lookup:main', ComponentLookup); + container = registry.container(); +} QUnit.module("{{input type='text'}}", { setup() { + commonSetup(); + controller = { val: "hello", place: "Enter some text", @@ -19,6 +33,7 @@ QUnit.module("{{input type='text'}}", { }; view = View.extend({ + container: container, controller: controller, template: compile('{{input type="text" disabled=disabled value=val placeholder=place name=name maxlength=max size=size tabindex=tab}}') }).create(); @@ -47,8 +62,13 @@ QUnit.test("should become disabled if the disabled attribute is true", function( QUnit.test("input value is updated when setting value property of view", function() { equal(view.$('input').val(), "hello", "renders text field with value"); + + let id = view.$('input').prop('id'); + run(null, set, controller, 'val', 'bye!'); equal(view.$('input').val(), "bye!", "updates text field after value changes"); + + equal(view.$('input').prop('id'), id, "the component hasn't changed"); }); QUnit.test("input placeholder is updated when setting placeholder property of view", function() { @@ -90,10 +110,10 @@ QUnit.test("cursor position is not lost when updating content", function() { // set the cursor position to 3 (no selection) run(function() { input.value = 'derp'; + view.childViews[0]._elementValueDidChange(); input.selectionStart = 3; input.selectionEnd = 3; }); - run(null, set, controller, 'val', 'derp'); equal(view.$('input').val(), "derp", "updates text field after value changes"); @@ -125,9 +145,12 @@ QUnit.test("input can be updated multiple times", function() { QUnit.module("{{input type='text'}} - static values", { setup() { + commonSetup(); + controller = {}; view = View.extend({ + container: container, controller: controller, template: compile('{{input type="text" disabled=true value="hello" placeholder="Enter some text" name="some-name" maxlength=30 size=30 tabindex=5}}') }).create(); @@ -174,11 +197,14 @@ QUnit.test("input tabindex is updated when setting tabindex property of view", f QUnit.module("{{input type='text'}} - dynamic type", { setup() { + commonSetup(); + controller = { someProperty: 'password' }; view = View.extend({ + container: container, controller: controller, template: compile('{{input type=someProperty}}') }).create(); @@ -195,11 +221,24 @@ QUnit.test("should insert a text field into DOM", function() { equal(view.$('input').attr('type'), 'password', "a bound property can be used to determine type."); }); +QUnit.test("should change if the type changes", function() { + equal(view.$('input').attr('type'), 'password', "a bound property can be used to determine type."); + + run(function() { + set(controller, 'someProperty', 'text'); + }); + + equal(view.$('input').attr('type'), 'text', "it changes after the type changes"); +}); + QUnit.module("{{input}} - default type", { setup() { + commonSetup(); + controller = {}; view = View.extend({ + container: container, controller: controller, template: compile('{{input}}') }).create(); @@ -218,6 +257,8 @@ QUnit.test("should have the default type", function() { QUnit.module("{{input type='checkbox'}}", { setup() { + commonSetup(); + controller = { tab: 6, name: 'hello', @@ -225,6 +266,7 @@ QUnit.module("{{input type='checkbox'}}", { }; view = View.extend({ + container: container, controller: controller, template: compile('{{input type="checkbox" disabled=disabled tabindex=tab name=name checked=val}}') }).create(); @@ -267,7 +309,10 @@ QUnit.test("checkbox checked property is updated", function() { QUnit.module("{{input type='checkbox'}} - prevent value= usage", { setup() { + commonSetup(); + view = View.extend({ + container: container, controller: controller, template: compile('{{input type="checkbox" disabled=disabled tabindex=tab name=name value=val}}') }).create(); @@ -286,12 +331,15 @@ QUnit.test("It asserts the presence of checked=", function() { QUnit.module("{{input type=boundType}}", { setup() { + commonSetup(); + controller = { inputType: "checkbox", isChecked: true }; view = View.extend({ + container: container, controller: controller, template: compile('{{input type=inputType checked=isChecked}}') }).create(); @@ -316,6 +364,8 @@ QUnit.test("checkbox checked property is updated", function() { QUnit.module("{{input type='checkbox'}} - static values", { setup() { + commonSetup(); + controller = { tab: 6, name: 'hello', @@ -323,6 +373,7 @@ QUnit.module("{{input type='checkbox'}} - static values", { }; view = View.extend({ + container: container, controller: controller, template: compile('{{input type="checkbox" disabled=true tabindex=6 name="hello" checked=false}}') }).create(); @@ -352,6 +403,10 @@ QUnit.test("checkbox checked property is updated", function() { }); QUnit.module("{{input type='text'}} - null/undefined values", { + setup() { + commonSetup(); + }, + teardown() { runDestroy(view); } @@ -359,6 +414,7 @@ QUnit.module("{{input type='text'}} - null/undefined values", { QUnit.test("placeholder attribute bound to undefined is not present", function() { view = View.extend({ + container: container, controller: {}, template: compile('{{input placeholder=someThingNotThere}}') }).create(); @@ -374,6 +430,7 @@ QUnit.test("placeholder attribute bound to undefined is not present", function() QUnit.test("placeholder attribute bound to null is not present", function() { view = View.extend({ + container: container, controller: { someNullProperty: null }, diff --git a/packages/ember-htmlbars/tests/helpers/loc_test.js b/packages/ember-htmlbars/tests/helpers/loc_test.js index 9b1677b882b..0bcf22be95b 100644 --- a/packages/ember-htmlbars/tests/helpers/loc_test.js +++ b/packages/ember-htmlbars/tests/helpers/loc_test.js @@ -50,27 +50,3 @@ QUnit.test('localize takes passed formats into an account', function() { runDestroy(view); }); - -QUnit.test('localize throws an assertion if the second parameter is a binding', function() { - var view = buildView('{{loc "Hello %@" name}}', { - name: 'Bob Foster' - }); - - expectAssertion(function() { - runAppend(view); - }, /You cannot pass bindings to `loc` helper/); - - runDestroy(view); -}); - -QUnit.test('localize a binding throws an assertion', function() { - var view = buildView('{{loc localizationKey}}', { - localizationKey: 'villain' - }); - - expectAssertion(function() { - runAppend(view); - }, /You cannot pass bindings to `loc` helper/); - - runDestroy(view); -}); diff --git a/packages/ember-htmlbars/tests/helpers/sanitized_bind_attr_test.js b/packages/ember-htmlbars/tests/helpers/sanitized_bind_attr_test.js deleted file mode 100644 index 5abcf2ac34b..00000000000 --- a/packages/ember-htmlbars/tests/helpers/sanitized_bind_attr_test.js +++ /dev/null @@ -1,92 +0,0 @@ -/* jshint scripturl:true */ - -import EmberView from "ember-views/views/view"; -import compile from "ember-template-compiler/system/compile"; -import run from "ember-metal/run_loop"; -import { SafeString } from "ember-htmlbars/utils/string"; -import { runAppend, runDestroy } from "ember-runtime/tests/utils"; -import environment from "ember-metal/environment"; - -var view; - -QUnit.module("ember-htmlbars: sanitized attribute", { - teardown() { - runDestroy(view); - } -}); - -var badTags = [ - { tag: 'a', attr: 'href', - template: compile('') }, - { tag: 'body', attr: 'background', - // IE8 crashes when setting background with - // a javascript: protocol - skip: (environment.hasDOM && document.documentMode && document.documentMode <= 8), - template: compile('') }, - { tag: 'link', attr: 'href', - template: compile('') }, - { tag: 'img', attr: 'src', - template: compile('{{view.borf}}
{{/view}}"), + template: compiled, snork: "nerd" }).create(); - expectDeprecation(function() { - runAppend(view); - }, /You're attempting to render a view by passing borfBinding to a view helper without a quoted value, but this syntax is ambiguous. You should either surround borfBinding's value in quotes or remove `Binding` from borfBinding./); + runAppend(view); equal(jQuery('#lol').text(), "nerd", "awkward mixed syntax treated like binding"); @@ -280,8 +255,6 @@ QUnit.test("mixing old and new styles of property binding fires a warning, treat }); QUnit.test('"Binding"-suffixed bindings are runloop-synchronized [DEPRECATED]', function() { - expect(6); - var subview; var Subview = EmberView.extend({ @@ -292,17 +265,20 @@ QUnit.test('"Binding"-suffixed bindings are runloop-synchronized [DEPRECATED]', template: compile('{{view.color}}
')
});
+ let compiled;
+ expectDeprecation(function() {
+ compiled = compile('{{view view.Subview colorBinding="view.color"}}
'); + }, `You're using legacy binding syntax: colorBinding="view.color" @ 1:24 in (inline). Please replace with color=view.color`); + var View = EmberView.extend({ color: "mauve", Subview: Subview, - template: compile('{{view view.Subview colorBinding="view.color"}}
') + template: compiled }); view = View.create(); - 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./); + runAppend(view); equal(view.$('h1 .color').text(), 'mauve', 'renders bound value'); @@ -314,6 +290,10 @@ QUnit.test('"Binding"-suffixed bindings are runloop-synchronized [DEPRECATED]', view.set('color', 'persian rose'); run.schedule('sync', function() { + equal(get(subview, 'color'), 'mauve', 'bound property is correctly scheduled into the sync queue'); + }); + + run.schedule('afterRender', function() { equal(get(subview, 'color'), 'persian rose', 'bound property is correctly scheduled into the sync queue'); }); @@ -324,8 +304,6 @@ QUnit.test('"Binding"-suffixed bindings are runloop-synchronized [DEPRECATED]', }); QUnit.test('Non-"Binding"-suffixed bindings are runloop-synchronized', function() { - expect(5); - var subview; var Subview = EmberView.extend({ @@ -333,7 +311,7 @@ QUnit.test('Non-"Binding"-suffixed bindings are runloop-synchronized', function( subview = this; return this._super.apply(this, arguments); }, - template: compile('{{view.color}}
')
+ template: compile('{{view.attrs.color}}
')
});
var View = EmberView.extend({
@@ -355,6 +333,10 @@ QUnit.test('Non-"Binding"-suffixed bindings are runloop-synchronized', function(
view.set('color', 'persian rose');
run.schedule('sync', function() {
+ equal(get(subview, 'color'), 'mauve', 'bound property is correctly scheduled into the sync queue');
+ });
+
+ run.schedule('afterRender', function() {
equal(get(subview, 'color'), 'persian rose', 'bound property is correctly scheduled into the sync queue');
});
@@ -385,10 +367,12 @@ QUnit.test("allows you to pass attributes that will be assigned to the class ins
});
QUnit.test("Should apply class without condition always", function() {
- view = EmberView.create({
- controller: Ember.Object.create(),
- template: compile('{{#view id="foo" classBinding=":foo"}} Foo{{/view}}')
- });
+ expectDeprecation(function() {
+ view = EmberView.create({
+ controller: Ember.Object.create(),
+ template: compile('{{#view id="foo" classBinding=":foo"}} Foo{{/view}}')
+ });
+ }, /legacy class binding syntax/);
runAppend(view);
@@ -501,16 +485,10 @@ QUnit.test("Should update classes from a bound property", function() {
QUnit.test("bound properties should be available in the view", function() {
var FuView = viewClass({
elementId: 'fu',
- template: compile("{{view.foo}}")
+ template: compile("{{view.attrs.foo}}")
});
- function lookupFactory(fullName) {
- return FuView;
- }
-
- var container = {
- lookupFactory: lookupFactory
- };
+ registry.register('view:fu', FuView);
view = EmberView.extend({
template: compile("{{view 'fu' foo=view.someProp}}"),
@@ -700,7 +678,7 @@ QUnit.test('child views can be inserted using the {{view}} helper', function() {
ok(view.$().text().match(/Hello world!.*Goodbye cruel world\!/), 'parent view should appear before the child view');
});
-QUnit.test('should be able to explicitly set a view\'s context', function() {
+QUnit.test("should be able to explicitly set a view's context", function() {
var context = EmberObject.create({
test: 'test'
});
@@ -845,7 +823,7 @@ QUnit.test('{{view}} should not allow attributeBindings to be set', function() {
template: compile('{{view attributeBindings="one two"}}')
});
runAppend(view);
- }, /Setting 'attributeBindings' via template helpers is not allowed/);
+ }, "Setting 'attributeBindings' via template helpers is not allowed @ 1:7 in (inline)");
});
QUnit.test('{{view}} should be able to point to a local view', function() {
@@ -874,10 +852,12 @@ QUnit.test('{{view}} should evaluate class bindings set to global paths DEPRECAT
});
});
- view = EmberView.create({
- textField: TextField,
- template: compile('{{view view.textField class="unbound" classBinding="App.isGreat:great App.directClass App.isApp App.isEnabled:enabled:disabled"}}')
- });
+ expectDeprecation(function() {
+ view = EmberView.create({
+ textField: TextField,
+ template: compile('{{view view.textField class="unbound" classBinding="App.isGreat:great App.directClass App.isApp App.isEnabled:enabled:disabled"}}')
+ });
+ }, /legacy class binding/);
expectDeprecation(function() {
runAppend(view);
@@ -903,14 +883,16 @@ QUnit.test('{{view}} should evaluate class bindings set to global paths DEPRECAT
});
QUnit.test('{{view}} should evaluate class bindings set in the current context', function() {
- view = EmberView.create({
- isView: true,
- isEditable: true,
- directClass: 'view-direct',
- isEnabled: true,
- textField: TextField,
- template: compile('{{view view.textField class="unbound" classBinding="view.isEditable:editable view.directClass view.isView view.isEnabled:enabled:disabled"}}')
- });
+ expectDeprecation(function() {
+ view = EmberView.create({
+ isView: true,
+ isEditable: true,
+ directClass: 'view-direct',
+ isEnabled: true,
+ textField: TextField,
+ template: compile('{{view view.textField class="unbound" classBinding="view.isEditable:editable view.directClass view.isView view.isEnabled:enabled:disabled"}}')
+ });
+ }, /legacy class binding syntax/);
runAppend(view);
@@ -941,10 +923,12 @@ QUnit.test('{{view}} should evaluate class bindings set with either classBinding
});
});
- view = EmberView.create({
- textField: TextField,
- template: compile('{{view view.textField class="unbound" classBinding="App.isGreat:great App.isEnabled:enabled:disabled" classNameBindings="App.isGreat:really-great App.isEnabled:really-enabled:really-disabled"}}')
- });
+ expectDeprecation(function() {
+ view = EmberView.create({
+ textField: TextField,
+ template: compile('{{view view.textField class="unbound" classBinding="App.isGreat:great App.isEnabled:enabled:disabled" classNameBindings="App.isGreat:really-great App.isEnabled:really-enabled:really-disabled"}}')
+ });
+ }, /legacy class binding/);
expectDeprecation(function() {
runAppend(view);
@@ -970,21 +954,26 @@ QUnit.test('{{view}} should evaluate class bindings set with either classBinding
runDestroy(lookup.App);
});
-QUnit.test('{{view}} should evaluate other attribute bindings set to global paths', function() {
+QUnit.test('{{view}} should evaluate other attribute bindings set to global paths [DEPRECATED]', function() {
run(function() {
lookup.App = Namespace.create({
name: 'myApp'
});
});
+ var template;
+ expectDeprecation(function() {
+ template = compile('{{view view.textField valueBinding="App.name"}}');
+ }, /You're using legacy binding syntax: valueBinding/);
+
view = EmberView.create({
textField: TextField,
- template: compile('{{view view.textField valueBinding="App.name"}}')
+ template
});
expectDeprecation(function() {
runAppend(view);
- }, 'Global lookup of App.name from a Handlebars template is deprecated.');
+ }, 'Global lookup of App from a Handlebars template is deprecated.');
equal(view.$('input').val(), 'myApp', 'evaluates attributes bound to global paths');
@@ -1004,7 +993,9 @@ QUnit.test('{{view}} should evaluate other attributes bindings set in the curren
});
QUnit.test('{{view}} should be able to bind class names to truthy properties', function() {
- registry.register('template:template', compile('{{#view view.classBindingView classBinding="view.number:is-truthy"}}foo{{/view}}'));
+ expectDeprecation(function() {
+ registry.register('template:template', compile('{{#view view.classBindingView classBinding="view.number:is-truthy"}}foo{{/view}}'));
+ }, /legacy class binding syntax/);
var ClassBindingView = EmberView.extend();
@@ -1027,7 +1018,9 @@ QUnit.test('{{view}} should be able to bind class names to truthy properties', f
});
QUnit.test('{{view}} should be able to bind class names to truthy or falsy properties', function() {
- registry.register('template:template', compile('{{#view view.classBindingView classBinding="view.number:is-truthy:is-falsy"}}foo{{/view}}'));
+ expectDeprecation(function() {
+ registry.register('template:template', compile('{{#view view.classBindingView classBinding="view.number:is-truthy:is-falsy"}}foo{{/view}}'));
+ }, /legacy class binding syntax/);
var ClassBindingView = EmberView.extend();
@@ -1053,12 +1046,12 @@ QUnit.test('{{view}} should be able to bind class names to truthy or falsy prope
QUnit.test('a view helper\'s bindings are to the parent context', function() {
var Subview = EmberView.extend({
- classNameBindings: ['color'],
+ classNameBindings: ['attrs.color'],
controller: EmberObject.create({
color: 'green',
name: 'bar'
}),
- template: compile('{{view.someController.name}} {{name}}')
+ template: compile('{{attrs.someController.name}} {{name}}')
});
var View = EmberView.extend({
@@ -1136,6 +1129,30 @@ QUnit.test('should expose a controller keyword that can be used in conditionals'
equal(view.$().text(), '', 'updates the DOM when the controller is changed');
});
+QUnit.test('should expose a controller that can be used in the view instance', function() {
+ var templateString = '{{#view view.childThing tagName="div"}}Stuff{{/view}}';
+ var controller = {
+ foo: 'bar'
+ };
+ var childThingController;
+ view = EmberView.create({
+ container,
+ controller,
+
+ childThing: EmberView.extend({
+ didInsertElement() {
+ childThingController = get(this, 'controller');
+ }
+ }),
+
+ template: compile(templateString)
+ });
+
+ runAppend(view);
+
+ equal(controller, childThingController, 'childThing should get the same controller as the outer scope');
+});
+
QUnit.test('should expose a controller keyword that persists through Ember.ContainerView', function() {
var templateString = '{{view view.containerView}}';
view = EmberView.create({
@@ -1192,15 +1209,13 @@ QUnit.test('bindings should be relative to the current context [DEPRECATED]', fu
}),
museumView: EmberView.extend({
- template: compile('Name: {{view.name}} Price: ${{view.dollars}}')
+ template: compile('Name: {{view.attrs.name}} Price: ${{view.attrs.dollars}}')
}),
- template: compile('{{#if view.museumOpen}} {{view view.museumView nameBinding="view.museumDetails.name" dollarsBinding="view.museumDetails.price"}} {{/if}}')
+ template: compile('{{#if view.museumOpen}} {{view view.museumView name=view.museumDetails.name dollars=view.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/);
+ runAppend(view);
equal(trim(view.$().text()), 'Name: SFMoMA Price: $20', 'should print baz twice');
});
@@ -1218,15 +1233,13 @@ QUnit.test('bindings should respect keywords [DEPRECATED]', function() {
},
museumView: EmberView.extend({
- template: compile('Name: {{view.name}} Price: ${{view.dollars}}')
+ template: compile('Name: {{view.attrs.name}} Price: ${{view.attrs.dollars}}')
}),
- template: compile('{{#if view.museumOpen}}{{view view.museumView nameBinding="controller.museumDetails.name" dollarsBinding="controller.museumDetails.price"}}{{/if}}')
+ template: compile('{{#if view.museumOpen}}{{view view.museumView name=controller.museumDetails.name dollars=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/);
+ runAppend(view);
equal(trim(view.$().text()), 'Name: SFMoMA Price: $20', 'should print baz twice');
});
@@ -1244,7 +1257,7 @@ QUnit.test('should respect keywords', function() {
},
museumView: EmberView.extend({
- template: compile('Name: {{view.name}} Price: ${{view.dollars}}')
+ template: compile('Name: {{view.attrs.name}} Price: ${{view.attrs.dollars}}')
}),
template: compile('{{#if view.museumOpen}}{{view view.museumView name=controller.museumDetails.name dollars=controller.museumDetails.price}}{{/if}}')
diff --git a/packages/ember-htmlbars/tests/helpers/with_test.js b/packages/ember-htmlbars/tests/helpers/with_test.js
index a57b88b4bab..9919c34d09d 100644
--- a/packages/ember-htmlbars/tests/helpers/with_test.js
+++ b/packages/ember-htmlbars/tests/helpers/with_test.js
@@ -87,16 +87,6 @@ testWithAs("ember-htmlbars: {{#with}} helper", "{{#with person as tom}}{{title}}
QUnit.module("Multiple Handlebars {{with foo as bar}} helpers", {
setup() {
Ember.lookup = lookup = { Ember: Ember };
-
- view = EmberView.create({
- template: compile("Admin: {{#with admin as |person|}}{{person.name}}{{/with}} User: {{#with user as |person|}}{{person.name}}{{/with}}"),
- context: {
- admin: { name: "Tom Dale" },
- user: { name: "Yehuda Katz" }
- }
- });
-
- runAppend(view);
},
teardown() {
@@ -107,31 +97,42 @@ QUnit.module("Multiple Handlebars {{with foo as bar}} helpers", {
});
QUnit.test("re-using the same variable with different #with blocks does not override each other", function() {
+ view = EmberView.create({
+ template: compile("Admin: {{#with admin as |person|}}{{person.name}}{{/with}} User: {{#with user as |person|}}{{person.name}}{{/with}}"),
+ context: {
+ admin: { name: "Tom Dale" },
+ user: { name: "Yehuda Katz" }
+ }
+ });
+
+ runAppend(view);
equal(view.$().text(), "Admin: Tom Dale User: Yehuda Katz", "should be properly scoped");
});
QUnit.test("the scoped variable is not available outside the {{with}} block.", function() {
- run(function() {
- view.set('template', compile("{{name}}-{{#with other as |name|}}{{name}}{{/with}}-{{name}}"));
- view.set('context', {
+ view = EmberView.create({
+ template: compile("{{name}}-{{#with other as |name|}}{{name}}{{/with}}-{{name}}"),
+ context: {
name: 'Stef',
other: 'Yehuda'
- });
+ }
});
+ runAppend(view);
equal(view.$().text(), "Stef-Yehuda-Stef", "should be properly scoped after updating");
});
QUnit.test("nested {{with}} blocks shadow the outer scoped variable properly.", function() {
- run(function() {
- view.set('template', compile("{{#with first as |ring|}}{{ring}}-{{#with fifth as |ring|}}{{ring}}-{{#with ninth as |ring|}}{{ring}}-{{/with}}{{ring}}-{{/with}}{{ring}}{{/with}}"));
- view.set('context', {
+ view = EmberView.create({
+ template: compile("{{#with first as |ring|}}{{ring}}-{{#with fifth as |ring|}}{{ring}}-{{#with ninth as |ring|}}{{ring}}-{{/with}}{{ring}}-{{/with}}{{ring}}{{/with}}"),
+ context: {
first: 'Limbo',
fifth: 'Wrath',
ninth: 'Treachery'
- });
+ }
});
+ runAppend(view);
equal(view.$().text(), "Limbo-Wrath-Treachery-Wrath-Limbo", "should be properly scoped after updating");
});
@@ -154,7 +155,7 @@ QUnit.module("Handlebars {{#with}} globals helper [DEPRECATED]", {
QUnit.test("it should support #with Foo.bar as qux [DEPRECATED]", function() {
expectDeprecation(function() {
runAppend(view);
- }, /Global lookup of Foo.bar from a Handlebars template is deprecated/);
+ }, /Global lookup of Foo from a Handlebars template is deprecated/);
equal(view.$().text(), "baz", "should be properly scoped");
@@ -185,7 +186,7 @@ QUnit.test("it should support #with view as foo", function() {
runDestroy(view);
});
-QUnit.test("it should support #with name as food, then #with foo as bar", function() {
+QUnit.test("it should support #with name as foo, then #with foo as bar", function() {
var view = EmberView.create({
template: compile("{{#with name as |foo|}}{{#with foo as |bar|}}{{bar}}{{/with}}{{/with}}"),
context: { name: "caterpillar" }
@@ -226,12 +227,17 @@ QUnit.test("it should support #with this as qux", function() {
QUnit.module("Handlebars {{#with foo}} with defined controller");
QUnit.test("it should wrap context with object controller [DEPRECATED]", function() {
- expectDeprecation(objectControllerDeprecation);
+ var childController;
var Controller = ObjectController.extend({
+ init() {
+ if (childController) { throw new Error("Did not expect controller.init to be invoked twice"); }
+ childController = this;
+ this._super();
+ },
controllerName: computed(function() {
return "controller:"+this.get('model.name') + ' and ' + this.get('parentController.name');
- })
+ }).property('model.name', 'parentController.name')
});
var person = EmberObject.create({ name: 'Steve Holt' });
@@ -252,9 +258,10 @@ QUnit.test("it should wrap context with object controller [DEPRECATED]", functio
registry.register('controller:person', Controller);
- expectDeprecation(function() {
- runAppend(view);
- }, 'Using the context switching form of `{{with}}` is deprecated. Please use the block param form (`{{#with bar as |foo|}}`) instead.');
+ expectDeprecation(objectControllerDeprecation);
+ expectDeprecation('Using the context switching form of `{{with}}` is deprecated. Please use the block param form (`{{#with bar as |foo|}}`) instead.');
+
+ runAppend(view);
equal(view.$().text(), "controller:Steve Holt and Bob Loblaw");
@@ -278,7 +285,7 @@ QUnit.test("it should wrap context with object controller [DEPRECATED]", functio
equal(view.$().text(), "controller:Gob and Carl Weathers");
- strictEqual(view._childViews[0].get('controller.target'), parentController, "the target property of the child controllers are set correctly");
+ strictEqual(childController.get('target'), parentController, "the target property of the child controllers are set correctly");
runDestroy(view);
});
@@ -472,15 +479,6 @@ QUnit.module("Multiple Handlebars {{with foo as |bar|}} helpers", {
setup() {
Ember.lookup = lookup = { Ember: Ember };
- view = EmberView.create({
- template: compile("Admin: {{#with admin as |person|}}{{person.name}}{{/with}} User: {{#with user as |person|}}{{person.name}}{{/with}}"),
- context: {
- admin: { name: "Tom Dale" },
- user: { name: "Yehuda Katz" }
- }
- });
-
- runAppend(view);
},
teardown() {
@@ -490,30 +488,42 @@ QUnit.module("Multiple Handlebars {{with foo as |bar|}} helpers", {
});
QUnit.test("re-using the same variable with different #with blocks does not override each other", function() {
+ view = EmberView.create({
+ template: compile("Admin: {{#with admin as |person|}}{{person.name}}{{/with}} User: {{#with user as |person|}}{{person.name}}{{/with}}"),
+ context: {
+ admin: { name: "Tom Dale" },
+ user: { name: "Yehuda Katz" }
+ }
+ });
+
+ runAppend(view);
equal(view.$().text(), "Admin: Tom Dale User: Yehuda Katz", "should be properly scoped");
});
QUnit.test("the scoped variable is not available outside the {{with}} block.", function() {
- run(function() {
- view.set('template', compile("{{name}}-{{#with other as |name|}}{{name}}{{/with}}-{{name}}"));
- view.set('context', {
+ view = EmberView.create({
+ template: compile("{{name}}-{{#with other as |name|}}{{name}}{{/with}}-{{name}}"),
+ context: {
name: 'Stef',
other: 'Yehuda'
- });
+ }
});
+ runAppend(view);
+
equal(view.$().text(), "Stef-Yehuda-Stef", "should be properly scoped after updating");
});
QUnit.test("nested {{with}} blocks shadow the outer scoped variable properly.", function() {
- run(function() {
- view.set('template', compile("{{#with first as |ring|}}{{ring}}-{{#with fifth as |ring|}}{{ring}}-{{#with ninth as |ring|}}{{ring}}-{{/with}}{{ring}}-{{/with}}{{ring}}{{/with}}"));
- view.set('context', {
+ view = EmberView.create({
+ template: compile("{{#with first as |ring|}}{{ring}}-{{#with fifth as |ring|}}{{ring}}-{{#with ninth as |ring|}}{{ring}}-{{/with}}{{ring}}-{{/with}}{{ring}}{{/with}}"),
+ context: {
first: 'Limbo',
fifth: 'Wrath',
ninth: 'Treachery'
- });
+ }
});
+ runAppend(view);
equal(view.$().text(), "Limbo-Wrath-Treachery-Wrath-Limbo", "should be properly scoped after updating");
});
diff --git a/packages/ember-htmlbars/tests/helpers/yield_test.js b/packages/ember-htmlbars/tests/helpers/yield_test.js
index 440f70cb74e..af8fec0b938 100644
--- a/packages/ember-htmlbars/tests/helpers/yield_test.js
+++ b/packages/ember-htmlbars/tests/helpers/yield_test.js
@@ -3,11 +3,9 @@ import run from "ember-metal/run_loop";
import EmberView from "ember-views/views/view";
import { computed } from "ember-metal/computed";
import { Registry } from "ember-runtime/system/container";
-import { get } from "ember-metal/property_get";
-import { set } from "ember-metal/property_set";
+//import { set } from "ember-metal/property_set";
import { A } from "ember-runtime/system/native_array";
import Component from "ember-views/views/component";
-import EmberError from "ember-metal/error";
import helpers from "ember-htmlbars/helpers";
import {
registerHelper
@@ -37,7 +35,7 @@ QUnit.module("ember-htmlbars: Support for {{yield}} helper", {
QUnit.test("a view with a layout set renders its template where the {{yield}} helper appears", function() {
var ViewWithLayout = EmberView.extend({
- layout: compile('{{title}}
{{yield}}{{attrs.title}}
{{yield}}{{title}}
{{yield}}{{attrs.title}}
{{yield}}Show something interesting here
{{/view}}'));
registry.register('view:with-layout', EmberView.extend({
@@ -72,10 +70,10 @@ QUnit.test("block should work properly even when templates are not hard-coded",
QUnit.test("templates should yield to block, when the yield is embedded in a hierarchy of virtual views", function() {
var TimesView = EmberView.extend({
- layout: compile('{{#each item in view.index}}{{yield}}{{/each}}
'),
+ layout: compile('{{#each view.index as |item|}}{{yield}}{{/each}}
'),
n: null,
index: computed(function() {
- var n = get(this, 'n');
+ var n = this.attrs.n;
var indexArray = A();
for (var i=0; i < n; i++) {
indexArray[i] = i;
@@ -195,8 +193,7 @@ QUnit.test("inner keyword doesn't mask yield property", function() {
QUnit.test("can bind a keyword to a component and use it in yield", function() {
var component = Component.extend({
- content: null,
- layout: compile("{{content}}
{{yield}}
") + layout: compile("{{attrs.content}}
{{yield}}
") }); view = EmberView.create({ @@ -240,37 +237,7 @@ QUnit.test("yield view should be a virtual view", function() { }); -QUnit.test("adding a layout should not affect the context of normal views", function() { - var parentView = EmberView.create({ - context: "ParentContext" - }); - - view = EmberView.create({ - template: compile("View context: {{this}}"), - context: "ViewContext", - _parentView: parentView - }); - - run(function() { - view.createElement(); - }); - - equal(view.$().text(), "View context: ViewContext"); - - - set(view, 'layout', compile("Layout: {{yield}}")); - - run(function() { - view.destroyElement(); - view.createElement(); - }); - - equal(view.$().text(), "Layout: View context: ViewContext"); - - runDestroy(parentView); -}); - -QUnit.test("yield should work for views even if _parentView is null", function() { +QUnit.test("yield should work for views even if parentView is null", function() { view = EmberView.create({ layout: compile('Layout: {{yield}}'), template: compile("View Content") @@ -322,17 +289,8 @@ QUnit.module("ember-htmlbars: Component {{yield}}", { }); QUnit.test("yield with nested components (#3220)", function() { - var count = 0; var InnerComponent = Component.extend({ - layout: compile("{{yield}}"), - _yield(context, options, morph) { - count++; - if (count > 1) { - throw new EmberError('is looping'); - } - - return this._super(context, options, morph); - } + layout: compile("{{yield}}") }); registerHelper('inner-component', makeViewHelper(InnerComponent)); @@ -343,33 +301,17 @@ QUnit.test("yield with nested components (#3220)", function() { registerHelper('outer-component', makeViewHelper(OuterComponent)); - view = EmberView.create({ + view = EmberView.extend({ template: compile( "{{#outer-component}}Hello world{{/outer-component}}" ) - }); + }).create(); runAppend(view); equal(view.$('div > span').text(), "Hello world"); }); -QUnit.test("yield works inside a conditional in a component that has Ember._Metamorph mixed in", function() { - var component = Component.extend(Ember._Metamorph, { - item: "inner", - layout: compile("{{item}}
{{#if item}}{{yield}}
{{/if}}") - }); - - view = Ember.View.create({ - controller: { item: "outer", component: component }, - template: compile('{{#view component}}{{item}}{{/view}}') - }); - - runAppend(view); - - equal(view.$().text(), 'innerouter', "{{yield}} renders yielded content inside metamorph component"); -}); - QUnit.test("view keyword works inside component yield", function () { var component = Component.extend({ layout: compile("{{yield}}
") diff --git a/packages/ember-htmlbars/tests/hooks/component_test.js b/packages/ember-htmlbars/tests/hooks/component_test.js index b3d09d5e6e7..584668af867 100644 --- a/packages/ember-htmlbars/tests/hooks/component_test.js +++ b/packages/ember-htmlbars/tests/hooks/component_test.js @@ -44,6 +44,6 @@ if (Ember.FEATURES.isEnabled('ember-htmlbars-component-generation')) { expectAssertion(function() { runAppend(view); - }, 'You specified `foo-bar` in your template, but a component for `foo-bar` could not be found.'); + }, /Could not find component named "foo-bar" \(no component or template with that name was found\)/); }); } diff --git a/packages/ember-htmlbars/tests/htmlbars_test.js b/packages/ember-htmlbars/tests/htmlbars_test.js index 6b194ceb78a..12a39cfbe7b 100644 --- a/packages/ember-htmlbars/tests/htmlbars_test.js +++ b/packages/ember-htmlbars/tests/htmlbars_test.js @@ -11,6 +11,6 @@ QUnit.test("HTMLBars is present and can be executed", function() { var env = merge({ dom: domHelper }, defaultEnv); - var output = template.render({}, env, document.body); + var output = template.render({}, env, { contextualElement: document.body }).fragment; equalHTML(output, "ohai"); }); diff --git a/packages/ember-htmlbars/tests/integration/binding_integration_test.js b/packages/ember-htmlbars/tests/integration/binding_integration_test.js index 121495030aa..9f61290b4a4 100644 --- a/packages/ember-htmlbars/tests/integration/binding_integration_test.js +++ b/packages/ember-htmlbars/tests/integration/binding_integration_test.js @@ -99,7 +99,7 @@ QUnit.test('should cleanup bound properties on rerender', function() { run(view, 'rerender'); - equal(view._childViews.length, 1); + equal(view.$().text(), 'wycats', 'rendered binding'); }); QUnit.test("should update bound values after view's parent is removed and then re-appended", function() { diff --git a/packages/ember-htmlbars/tests/integration/block_params_test.js b/packages/ember-htmlbars/tests/integration/block_params_test.js index 927bff0225e..ae808b0acea 100644 --- a/packages/ember-htmlbars/tests/integration/block_params_test.js +++ b/packages/ember-htmlbars/tests/integration/block_params_test.js @@ -9,15 +9,8 @@ import { runAppend, runDestroy } from "ember-runtime/tests/utils"; var registry, container, view; -function aliasHelper(params, hash, options, env) { - var view = env.data.view; - - view.appendChild(View, { - isVirtual: true, - _morph: options.morph, - template: options.template, - _blockArguments: params - }); +function aliasHelper(params, hash, options) { + this.yield(params); } QUnit.module("ember-htmlbars: block params", { @@ -45,12 +38,13 @@ QUnit.module("ember-htmlbars: block params", { QUnit.test("should raise error if helper not available", function() { view = View.create({ + container: container, template: compile('{{#shouldfail}}{{/shouldfail}}') }); expectAssertion(function() { runAppend(view); - }, 'A helper named `shouldfail` could not be found'); + }, `A helper named 'shouldfail' could not be found`); }); @@ -103,7 +97,7 @@ QUnit.test("nested block params shadow correctly", function() { }); QUnit.test("components can yield values", function() { - registry.register('template:components/x-alias', compile('{{yield param.name}}')); + registry.register('template:components/x-alias', compile('{{yield attrs.param.name}}')); view = View.create({ container: container, diff --git a/packages/ember-htmlbars/tests/integration/component_invocation_test.js b/packages/ember-htmlbars/tests/integration/component_invocation_test.js index 7ea93f7917b..18d48780399 100644 --- a/packages/ember-htmlbars/tests/integration/component_invocation_test.js +++ b/packages/ember-htmlbars/tests/integration/component_invocation_test.js @@ -3,7 +3,9 @@ import Registry from "container/registry"; import jQuery from "ember-views/system/jquery"; import compile from "ember-template-compiler/system/compile"; import ComponentLookup from 'ember-views/component_lookup'; +import Component from "ember-views/views/component"; import { runAppend, runDestroy } from "ember-runtime/tests/utils"; +import run from "ember-metal/run_loop"; var registry, container, view; @@ -55,9 +57,79 @@ QUnit.test('block without properties', function() { equal(jQuery('#qunit-fixture').text(), 'In layout - In template'); }); -QUnit.test('non-block with properties', function() { +QUnit.test('non-block with properties on attrs', function() { expect(1); + registry.register('template:components/non-block', compile('In layout - someProp: {{attrs.someProp}}')); + + view = EmberView.extend({ + template: compile('{{non-block someProp="something here"}}'), + container: container + }).create(); + + runAppend(view); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here'); +}); + +QUnit.test('non-block with properties on attrs and component class', function() { + registry.register('component:non-block', Component.extend()); + registry.register('template:components/non-block', compile('In layout - someProp: {{attrs.someProp}}')); + + view = EmberView.extend({ + template: compile('{{non-block someProp="something here"}}'), + container: container + }).create(); + + runAppend(view); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here'); +}); + +QUnit.test('rerendering component with attrs from parent', function() { + var willUpdate = 0; + var willReceiveAttrs = 0; + + registry.register('component:non-block', Component.extend({ + willReceiveAttrs() { + willReceiveAttrs++; + }, + + willUpdate() { + willUpdate++; + } + })); + registry.register('template:components/non-block', compile('In layout - someProp: {{attrs.someProp}}')); + + view = EmberView.extend({ + template: compile('{{non-block someProp=view.someProp}}'), + container: container, + someProp: "wycats" + }).create(); + + runAppend(view); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: wycats'); + + run(function() { + view.set('someProp', 'tomdale'); + }); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: tomdale'); + equal(willReceiveAttrs, 1, "The willReceiveAttrs hook fired"); + equal(willUpdate, 1, "The willUpdate hook fired once"); + + Ember.run(view, 'rerender'); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: tomdale'); + equal(willReceiveAttrs, 2, "The willReceiveAttrs hook fired again"); + equal(willUpdate, 2, "The willUpdate hook fired again"); +}); + + +QUnit.test('[DEPRECATED] non-block with properties on self', function() { + expectDeprecation("You accessed the `someProp` attribute directly. Please use `attrs.someProp` instead."); + registry.register('template:components/non-block', compile('In layout - someProp: {{someProp}}')); view = EmberView.extend({ @@ -70,9 +142,24 @@ QUnit.test('non-block with properties', function() { equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here'); }); -QUnit.test('block with properties', function() { +QUnit.test('block with properties on attrs', function() { expect(1); + registry.register('template:components/with-block', compile('In layout - someProp: {{attrs.someProp}} - {{yield}}')); + + view = EmberView.extend({ + template: compile('{{#with-block someProp="something here"}}In template{{/with-block}}'), + container: container + }).create(); + + runAppend(view); + + equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here - In template'); +}); + +QUnit.test('[DEPRECATED] block with properties on self', function() { + expectDeprecation("You accessed the `someProp` attribute directly. Please use `attrs.someProp` instead."); + registry.register('template:components/with-block', compile('In layout - someProp: {{someProp}} - {{yield}}')); view = EmberView.extend({ @@ -86,7 +173,7 @@ QUnit.test('block with properties', function() { }); if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) { - QUnit.test('`Component.prototype.hasBlock` when block supplied', function() { + QUnit.test('hasBlock is true when block supplied', function() { expect(1); registry.register('template:components/with-block', compile('{{#if hasBlock}}{{yield}}{{else}}No Block!{{/if}}')); @@ -101,7 +188,7 @@ if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) { equal(jQuery('#qunit-fixture').text(), 'In template'); }); - QUnit.test('`Component.prototype.hasBlock` when no block supplied', function() { + QUnit.test('hasBlock is false when no block supplied', function() { expect(1); registry.register('template:components/with-block', compile('{{#if hasBlock}}{{yield}}{{else}}No Block!{{/if}}')); @@ -116,7 +203,7 @@ if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) { equal(jQuery('#qunit-fixture').text(), 'No Block!'); }); - QUnit.test('`Component.prototype.hasBlockParams` when block param supplied', function() { + QUnit.test('hasBlockParams is true when block param supplied', function() { expect(1); registry.register('template:components/with-block', compile('{{#if hasBlockParams}}{{yield this}} - In Component{{else}}{{yield}} No Block!{{/if}}')); @@ -131,7 +218,7 @@ if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) { equal(jQuery('#qunit-fixture').text(), 'In template - In Component'); }); - QUnit.test('`Component.prototype.hasBlockParams` when no block param supplied', function() { + QUnit.test('hasBlockParams is false when no block param supplied', function() { expect(1); registry.register('template:components/with-block', compile('{{#if hasBlockParams}}{{yield this}}{{else}}{{yield}} No Block Param!{{/if}}')); diff --git a/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js b/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js new file mode 100644 index 00000000000..772a92b8996 --- /dev/null +++ b/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js @@ -0,0 +1,369 @@ +import Registry from "container/registry"; +import jQuery from "ember-views/system/jquery"; +import compile from "ember-template-compiler/system/compile"; +import ComponentLookup from 'ember-views/component_lookup'; +import Component from "ember-views/views/component"; +import { runAppend, runDestroy } from "ember-runtime/tests/utils"; +import run from "ember-metal/run_loop"; +import EmberView from "ember-views/views/view"; + +var registry, container, view; +var hooks; + +QUnit.module('component - lifecycle hooks', { + setup() { + registry = new Registry(); + container = registry.container(); + registry.optionsForType('component', { singleton: false }); + registry.optionsForType('view', { singleton: false }); + registry.optionsForType('template', { instantiate: false }); + registry.optionsForType('helper', { instantiate: false }); + registry.register('component-lookup:main', ComponentLookup); + + hooks = []; + }, + + teardown() { + runDestroy(container); + runDestroy(view); + registry = container = view = null; + } +}); + +function pushHook(view, type, arg) { + hooks.push(hook(view, type, arg)); +} + +function hook(view, type, arg) { + return { type: type, view: view, arg: arg }; +} + +QUnit.test('lifecycle hooks are invoked in a predictable order', function() { + var components = {}; + + function component(label) { + return Component.extend({ + init() { + this.label = label; + pushHook(label, 'init'); + components[label] = this; + this._super.apply(this, arguments); + }, + willReceiveAttrs(nextAttrs) { + pushHook(label, 'willReceiveAttrs', nextAttrs); + }, + willUpdate() { + pushHook(label, 'willUpdate'); + }, + didUpdate() { + pushHook(label, 'didUpdate'); + }, + didInsertElement() { + pushHook(label, 'didInsertElement'); + }, + willRender() { + pushHook(label, 'willRender'); + }, + didRender() { + pushHook(label, 'didRender'); + } + }); + } + + registry.register('component:the-top', component('top')); + registry.register('component:the-middle', component('middle')); + registry.register('component:the-bottom', component('bottom')); + + registry.register('template:components/the-top', compile('Twitter: {{attrs.twitter}} {{the-middle name="Tom Dale"}}')); + registry.register('template:components/the-middle', compile('Name: {{attrs.name}} {{the-bottom website="tomdale.net"}}')); + registry.register('template:components/the-bottom', compile('Website: {{attrs.website}}')); + + view = EmberView.extend({ + template: compile('{{the-top twitter=(readonly view.twitter)}}'), + twitter: "@tomdale", + container: container + }).create(); + + runAppend(view); + + ok(component, "The component was inserted"); + equal(jQuery('#qunit-fixture').text(), 'Twitter: @tomdale Name: Tom Dale Website: tomdale.net'); + + deepEqual(hooks, [ + hook('top', 'init'), hook('top', 'willRender'), + hook('middle', 'init'), hook('middle', 'willRender'), + hook('bottom', 'init'), hook('bottom', 'willRender'), + hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'), + hook('middle', 'didInsertElement'), hook('middle', 'didRender'), + hook('top', 'didInsertElement'), hook('top', 'didRender') + ]); + + hooks = []; + + run(function() { + components.bottom.rerender(); + }); + + deepEqual(hooks, [ + hook('bottom', 'willUpdate'), hook('bottom', 'willRender'), + hook('bottom', 'didUpdate'), hook('bottom', 'didRender') + ]); + + hooks = []; + + run(function() { + components.middle.rerender(); + }); + + deepEqual(hooks, [ + hook('middle', 'willUpdate'), hook('middle', 'willRender'), + hook('bottom', 'willUpdate'), + + hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }), + + hook('bottom', 'willRender'), + + hook('bottom', 'didUpdate'), hook('bottom', 'didRender'), + hook('middle', 'didUpdate'), hook('middle', 'didRender') + ]); + + hooks = []; + + run(function() { + components.top.rerender(); + }); + + deepEqual(hooks, [ + hook('top', 'willUpdate'), hook('top', 'willRender'), + + hook('middle', 'willUpdate'), + hook('middle', 'willReceiveAttrs', { name: "Tom Dale" }), + hook('middle', 'willRender'), + + hook('bottom', 'willUpdate'), + hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }), + hook('bottom', 'willRender'), + + hook('bottom', 'didUpdate'), hook('bottom', 'didRender'), + hook('middle', 'didUpdate'), hook('middle', 'didRender'), + hook('top', 'didUpdate'), hook('top', 'didRender') + ]); + + hooks = []; + + run(function() { + view.set('twitter', '@hipstertomdale'); + }); + + // Because the `twitter` attr is only used by the topmost component, + // and not passed down, we do not expect to see lifecycle hooks + // called for child components. If the `willReceiveAttrs` hook used + // the new attribute to rerender itself imperatively, that would result + // in lifecycle hooks being invoked for the child. + + deepEqual(hooks, [ + hook('top', 'willUpdate'), + hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }), + hook('top', 'willRender'), + hook('top', 'didUpdate'), hook('top', 'didRender') + ]); +}); + +QUnit.test('passing values through attrs causes lifecycle hooks to fire if the attribute values have changed', function() { + var components = {}; + + function component(label) { + return Component.extend({ + init() { + this.label = label; + pushHook(label, 'init'); + components[label] = this; + this._super.apply(this, arguments); + }, + willReceiveAttrs(nextAttrs) { + pushHook(label, 'willReceiveAttrs', nextAttrs); + }, + willUpdate() { + pushHook(label, 'willUpdate'); + }, + didUpdate() { + pushHook(label, 'didUpdate'); + }, + didInsertElement() { + pushHook(label, 'didInsertElement'); + }, + willRender() { + pushHook(label, 'willRender'); + }, + didRender() { + pushHook(label, 'didRender'); + } + }); + } + + registry.register('component:the-top', component('top')); + registry.register('component:the-middle', component('middle')); + registry.register('component:the-bottom', component('bottom')); + + registry.register('template:components/the-top', compile('Top: {{the-middle twitterTop=(readonly attrs.twitter)}}')); + registry.register('template:components/the-middle', compile('Middle: {{the-bottom twitterMiddle=(readonly attrs.twitterTop)}}')); + registry.register('template:components/the-bottom', compile('Bottom: {{attrs.twitterMiddle}}')); + + view = EmberView.extend({ + template: compile('{{the-top twitter=(readonly view.twitter)}}'), + twitter: "@tomdale", + container: container + }).create(); + + runAppend(view); + + ok(component, "The component was inserted"); + equal(jQuery('#qunit-fixture').text(), 'Top: Middle: Bottom: @tomdale'); + + deepEqual(hooks, [ + hook('top', 'init'), hook('top', 'willRender'), + hook('middle', 'init'), hook('middle', 'willRender'), + hook('bottom', 'init'), hook('bottom', 'willRender'), + hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'), + hook('middle', 'didInsertElement'), hook('middle', 'didRender'), + hook('top', 'didInsertElement'), hook('top', 'didRender') + ]); + + hooks = []; + + run(function() { + view.set('twitter', '@hipstertomdale'); + }); + + // Because the `twitter` attr is used by the all of the components, + // the lifecycle hooks are invoked for all components. + + deepEqual(hooks, [ + hook('top', 'willUpdate'), + hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }), + hook('top', 'willRender'), + + hook('middle', 'willUpdate'), + hook('middle', 'willReceiveAttrs', { twitterTop: "@hipstertomdale" }), + hook('middle', 'willRender'), + + hook('bottom', 'willUpdate'), + hook('bottom', 'willReceiveAttrs', { twitterMiddle: "@hipstertomdale" }), + hook('bottom', 'willRender'), + + hook('bottom', 'didUpdate'), hook('bottom', 'didRender'), + hook('middle', 'didUpdate'), hook('middle', 'didRender'), + hook('top', 'didUpdate'), hook('top', 'didRender') + ]); +}); + +QUnit.test("changing a component's displayed properties inside didInsertElement() is deprecated", function(assert) { + let component = Component.extend({ + layout: compile('{{handle}}'), + handle: "@wycats", + container: container, + + didInsertElement() { + this.set('handle', "@tomdale"); + } + }).create(); + + expectDeprecation(() => { + runAppend(component); + }, /modified inside the didInsertElement hook/); + + assert.strictEqual(component.$().text(), "@tomdale"); + + run(() => { + component.destroy(); + }); +}); + +QUnit.test('manually re-rendering in `willReceiveAttrs` triggers lifecycle hooks on the child even if the nodes were not dirty', function() { + var components = {}; + + function component(label) { + return Component.extend({ + init() { + this.label = label; + pushHook(label, 'init'); + components[label] = this; + this._super.apply(this, arguments); + }, + willReceiveAttrs(nextAttrs) { + this.rerender(); + pushHook(label, 'willReceiveAttrs', nextAttrs); + }, + willUpdate() { + pushHook(label, 'willUpdate'); + }, + didUpdate() { + pushHook(label, 'didUpdate'); + }, + didInsertElement() { + pushHook(label, 'didInsertElement'); + }, + willRender() { + pushHook(label, 'willRender'); + }, + didRender() { + pushHook(label, 'didRender'); + } + }); + } + + registry.register('component:the-top', component('top')); + registry.register('component:the-middle', component('middle')); + registry.register('component:the-bottom', component('bottom')); + + registry.register('template:components/the-top', compile('Twitter: {{attrs.twitter}} {{the-middle name="Tom Dale"}}')); + registry.register('template:components/the-middle', compile('Name: {{attrs.name}} {{the-bottom website="tomdale.net"}}')); + registry.register('template:components/the-bottom', compile('Website: {{attrs.website}}')); + + view = EmberView.extend({ + template: compile('{{the-top twitter=(readonly view.twitter)}}'), + twitter: "@tomdale", + container: container + }).create(); + + runAppend(view); + + ok(component, "The component was inserted"); + equal(jQuery('#qunit-fixture').text(), 'Twitter: @tomdale Name: Tom Dale Website: tomdale.net'); + + deepEqual(hooks, [ + hook('top', 'init'), hook('top', 'willRender'), + hook('middle', 'init'), hook('middle', 'willRender'), + hook('bottom', 'init'), hook('bottom', 'willRender'), + hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'), + hook('middle', 'didInsertElement'), hook('middle', 'didRender'), + hook('top', 'didInsertElement'), hook('top', 'didRender') + ]); + + hooks = []; + + run(function() { + view.set('twitter', '@hipstertomdale'); + }); + + // Because each `willReceiveAttrs` hook triggered a downstream + // rerender, lifecycle hooks are invoked on all child components. + + deepEqual(hooks, [ + hook('top', 'willUpdate'), + hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }), + hook('top', 'willRender'), + + hook('middle', 'willUpdate'), + hook('middle', 'willReceiveAttrs', { name: "Tom Dale" }), + hook('middle', 'willRender'), + + hook('bottom', 'willUpdate'), + hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }), + hook('bottom', 'willRender'), + + hook('bottom', 'didUpdate'), hook('bottom', 'didRender'), + hook('middle', 'didUpdate'), hook('middle', 'didRender'), + hook('top', 'didUpdate'), hook('top', 'didRender') + ]); +}); diff --git a/packages/ember-htmlbars/tests/integration/globals_integration_test.js b/packages/ember-htmlbars/tests/integration/globals_integration_test.js index d25b9448871..4725fa52623 100644 --- a/packages/ember-htmlbars/tests/integration/globals_integration_test.js +++ b/packages/ember-htmlbars/tests/integration/globals_integration_test.js @@ -41,7 +41,7 @@ QUnit.test('should read from globals with a path (DEPRECATED)', function() { expectDeprecation(function() { runAppend(view); - }, 'Global lookup of Global.Space from a Handlebars template is deprecated.'); + }, 'Global lookup of Global from a Handlebars template is deprecated.'); equal(view.$().text(), Ember.lookup.Global.Space); }); @@ -67,6 +67,6 @@ QUnit.test('with context, should read from globals with a path (DEPRECATED)', fu expectDeprecation(function() { runAppend(view); - }, 'Global lookup of Global.Space from a Handlebars template is deprecated.'); + }, 'Global lookup of Global from a Handlebars template is deprecated.'); equal(view.$().text(), Ember.lookup.Global.Space); }); diff --git a/packages/ember-htmlbars/tests/integration/mutable_binding_test.js b/packages/ember-htmlbars/tests/integration/mutable_binding_test.js new file mode 100644 index 00000000000..64361fef75b --- /dev/null +++ b/packages/ember-htmlbars/tests/integration/mutable_binding_test.js @@ -0,0 +1,255 @@ +import EmberView from "ember-views/views/view"; +import Registry from "container/registry"; +//import jQuery from "ember-views/system/jquery"; +import compile from "ember-template-compiler/system/compile"; +import ComponentLookup from 'ember-views/component_lookup'; +import Component from "ember-views/views/component"; +import { runAppend, runDestroy } from "ember-runtime/tests/utils"; +import run from "ember-metal/run_loop"; + +var registry, container, view; + +QUnit.module('component - mutable bindings', { + setup() { + registry = new Registry(); + container = registry.container(); + registry.optionsForType('component', { singleton: false }); + registry.optionsForType('view', { singleton: false }); + registry.optionsForType('template', { instantiate: false }); + registry.optionsForType('helper', { instantiate: false }); + registry.register('component-lookup:main', ComponentLookup); + }, + + teardown() { + runDestroy(container); + runDestroy(view); + registry = container = view = null; + } +}); + +QUnit.test('a simple mutable binding propagates properly [DEPRECATED]', function(assert) { + expectDeprecation(); + + var bottom; + + registry.register('component:middle-mut', Component.extend({ + layout: compile('{{bottom-mut setMe=value}}') + })); + + registry.register('component:bottom-mut', Component.extend({ + didInsertElement() { + bottom = this; + } + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value=view.val}}'), + val: 12 + }); + + runAppend(view); + + assert.strictEqual(bottom.get('setMe'), 12, "precond - the data propagated"); + + run(() => bottom.set('setMe', 13)); + + assert.strictEqual(bottom.get('setMe'), 13, "precond - the set took effect"); + assert.strictEqual(view.get('val'), 13, "the set propagated back up"); +}); + +QUnit.test('a simple mutable binding using `mut` propagates properly', function(assert) { + var bottom; + + registry.register('component:middle-mut', Component.extend({ + layout: compile('{{bottom-mut setMe=(mut attrs.value)}}') + })); + + registry.register('component:bottom-mut', Component.extend({ + didInsertElement() { + bottom = this; + } + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value=(mut view.val)}}'), + val: 12 + }); + + runAppend(view); + + assert.strictEqual(bottom.attrs.setMe.value, 12, "precond - the data propagated"); + + run(() => bottom.attrs.setMe.update(13)); + + assert.strictEqual(bottom.attrs.setMe.value, 13, "precond - the set took effect"); + assert.strictEqual(view.get('val'), 13, "the set propagated back up"); +}); + +QUnit.test('using a string value through middle tier does not trigger assertion', function(assert) { + var bottom; + + registry.register('component:middle-mut', Component.extend({ + layout: compile('{{bottom-mut stuff=attrs.value}}') + })); + + registry.register('component:bottom-mut', Component.extend({ + layout: compile('{{attrs.stuff}}
'), + didInsertElement() { + bottom = this; + } + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value="foo"}}'), + val: 12 + }); + + runAppend(view); + + assert.strictEqual(bottom.attrs.stuff.value, 'foo', "precond - the data propagated"); + assert.strictEqual(view.$('p.bottom').text(), "foo"); +}); + +QUnit.test('a simple mutable binding using `mut` inserts into the DOM', function(assert) { + var bottom; + + registry.register('component:middle-mut', Component.extend({ + layout: compile('{{bottom-mut setMe=(mut attrs.value)}}') + })); + + registry.register('component:bottom-mut', Component.extend({ + layout: compile('{{attrs.setMe}}
'), + didInsertElement() { + bottom = this; + } + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value=(mut view.val)}}'), + val: 12 + }); + + runAppend(view); + + assert.strictEqual(view.$('p.bottom').text(), "12"); + assert.strictEqual(bottom.attrs.setMe.value, 12, "precond - the data propagated"); + + run(() => bottom.attrs.setMe.update(13)); + + assert.strictEqual(bottom.attrs.setMe.value, 13, "precond - the set took effect"); + assert.strictEqual(view.get('val'), 13, "the set propagated back up"); +}); + +QUnit.test('a simple mutable binding using `mut` can be converted into an immutable binding', function(assert) { + var middle; + + registry.register('component:middle-mut', Component.extend({ + // no longer mutable + layout: compile('{{bottom-mut setMe=attrs.value}}'), + + didInsertElement() { + middle = this; + } + })); + + registry.register('component:bottom-mut', Component.extend({ + layout: compile('{{attrs.setMe}}
') + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value=(mut view.val)}}'), + val: 12 + }); + + runAppend(view); + + assert.strictEqual(view.$('p.bottom').text(), "12"); + + run(() => middle.attrs.value.update(13)); + + assert.strictEqual(middle.attrs.value.value, 13, "precond - the set took effect"); + assert.strictEqual(view.$('p.bottom').text(), "13"); + assert.strictEqual(view.get('val'), 13, "the set propagated back up"); +}); + +QUnit.test('a simple mutable binding using `mut` is available in hooks', function(assert) { + var bottom; + var willRender = []; + var didInsert = []; + + registry.register('component:middle-mut', Component.extend({ + layout: compile('{{bottom-mut setMe=(mut attrs.value)}}') + })); + + registry.register('component:bottom-mut', Component.extend({ + willRender() { + willRender.push(this.attrs.setMe.value); + }, + didInsertElement() { + didInsert.push(this.attrs.setMe.value); + bottom = this; + } + })); + + view = EmberView.create({ + container: container, + template: compile('{{middle-mut value=(mut view.val)}}'), + val: 12 + }); + + runAppend(view); + + assert.deepEqual(willRender, [12], "willReceive is [12]"); + assert.deepEqual(didInsert, [12], "didInsert is [12]"); + + assert.strictEqual(bottom.attrs.setMe.value, 12, "precond - the data propagated"); + + run(() => bottom.attrs.setMe.update(13)); + + assert.strictEqual(bottom.attrs.setMe.value, 13, "precond - the set took effect"); + assert.strictEqual(view.get('val'), 13, "the set propagated back up"); +}); + +// jscs:disable validateIndentation +if (Ember.FEATURES.isEnabled('ember-htmlbars-component-generation')) { + +QUnit.test('mutable bindings work as angle-bracket component attributes', function(assert) { + var middle; + + registry.register('component:middle-mut', Component.extend({ + // no longer mutable + layout: compile('{{attrs.setMe}}
') + })); + + view = EmberView.create({ + container: container, + template: compile('{{prop}}
")
+ ignoreDeprecation(function() {
+ view = EmberView.create({
+ container: container,
+ controller: { prop: "isThing" },
+ template: compile("{{prop}}
")
+ });
});
runAppend(view);
@@ -110,18 +110,24 @@ QUnit.test("bound helpers should support keywords", function() {
equal(view.$().text(), 'AB', "helper output is correct");
});
-QUnit.test("bound helpers should not process `fooBinding` style hash properties", function() {
+QUnit.test("bound helpers should process `fooBinding` style hash properties [DEPRECATED]", function() {
registry.register('helper:x-repeat', makeBoundHelper(function(params, hash, options, env) {
- equal(hash.timesBinding, "numRepeats");
+ equal(hash.times, 3);
}));
+ var template;
+
+ expectDeprecation(function() {
+ template = compile('{{x-repeat text timesBinding="numRepeats"}}');
+ }, /You're using legacy binding syntax: timesBinding="numRepeats"/);
+
view = EmberView.create({
container: container,
controller: {
text: 'ab',
numRepeats: 3
},
- template: compile('{{x-repeat text timesBinding="numRepeats"}}')
+ template
});
runAppend(view);
@@ -211,7 +217,9 @@ QUnit.test("shouldn't treat raw numbers as bound paths", function() {
QUnit.test("should have correct argument types", function() {
registry.register('helper:get-type', makeBoundHelper(function(params) {
- return typeof params[0];
+ var value = params[0];
+
+ return value === null ? 'null' : typeof value;
}));
view = EmberView.create({
@@ -222,54 +230,5 @@ QUnit.test("should have correct argument types", function() {
runAppend(view);
- equal(view.$().text(), 'undefined, undefined, string, number, object', "helper output is correct");
-});
-
-QUnit.test("when no parameters are bound, no new views are created", function() {
- registerRepeatHelper();
- var originalRender = SimpleBoundView.prototype.render;
- var renderWasCalled = false;
- SimpleBoundView.prototype.render = function() {
- renderWasCalled = true;
- return originalRender.apply(this, arguments);
- };
-
- try {
- view = EmberView.create({
- template: compile('{{x-repeat "a"}}'),
- controller: EmberObject.create(),
- container: container
- });
- runAppend(view);
- } finally {
- SimpleBoundView.prototype.render = originalRender;
- }
-
- ok(!renderWasCalled, 'simple bound view should not have been created and rendered');
- equal(view.$().text(), 'a');
-});
-
-
-QUnit.test('when no hash parameters are bound, no new views are created', function() {
- registerRepeatHelper();
- var originalRender = SimpleBoundView.prototype.render;
- var renderWasCalled = false;
- SimpleBoundView.prototype.render = function() {
- renderWasCalled = true;
- return originalRender.apply(this, arguments);
- };
-
- try {
- view = EmberView.create({
- template: compile('{{x-repeat "a" times=3}}'),
- controller: EmberObject.create(),
- container: container
- });
- runAppend(view);
- } finally {
- SimpleBoundView.prototype.render = originalRender;
- }
-
- ok(!renderWasCalled, 'simple bound view should not have been created and rendered');
- equal(view.$().text(), 'aaa');
+ equal(view.$().text(), 'null, undefined, string, number, object', "helper output is correct");
});
diff --git a/packages/ember-htmlbars/tests/system/make_view_helper_test.js b/packages/ember-htmlbars/tests/system/make_view_helper_test.js
index 123a1716003..02c4ffbd8bf 100644
--- a/packages/ember-htmlbars/tests/system/make_view_helper_test.js
+++ b/packages/ember-htmlbars/tests/system/make_view_helper_test.js
@@ -1,13 +1,58 @@
import makeViewHelper from "ember-htmlbars/system/make-view-helper";
+import EmberView from "ember-views/views/view";
+import { compile } from "ember-template-compiler";
+import Registry from "container/registry";
+import { runAppend, runDestroy } from "ember-runtime/tests/utils";
-QUnit.module("ember-htmlbars: makeViewHelper");
+var registry, container, view;
+
+QUnit.module("ember-htmlbars: makeViewHelper", {
+ setup() {
+ registry = new Registry();
+ container = registry.container();
+ registry.optionsForType('helper', { instantiate: false });
+ },
+ teardown() {
+ runDestroy(view);
+ }
+});
QUnit.test("makes helpful assertion when called with invalid arguments", function() {
- var viewClass = { toString() { return 'Some Random Class'; } };
+ var SomeRandom = EmberView.extend({
+ template: compile("Some Random Class")
+ });
+
+ SomeRandom.toString = function() {
+ return 'Some Random Class';
+ };
- var helper = makeViewHelper(viewClass);
+ var helper = makeViewHelper(SomeRandom);
+ registry.register('helper:some-random', helper);
+
+ view = EmberView.create({
+ template: compile("{{some-random 'sending-params-to-view-is-invalid'}}"),
+ container
+ });
expectAssertion(function() {
- helper.helperFunction(['foo'], {}, {}, {});
+ runAppend(view);
}, "You can only pass attributes (such as name=value) not bare values to a helper for a View found in 'Some Random Class'");
});
+
+QUnit.test("can properly yield", function() {
+ var SomeRandom = EmberView.extend({
+ layout: compile("Some Random Class - {{yield}}")
+ });
+
+ var helper = makeViewHelper(SomeRandom);
+ registry.register('helper:some-random', helper);
+
+ view = EmberView.create({
+ template: compile("{{#some-random}}Template{{/some-random}}"),
+ container
+ });
+
+ runAppend(view);
+
+ equal(view.$().text(), 'Some Random Class - Template');
+});
diff --git a/packages/ember-htmlbars/tests/system/render_view_test.js b/packages/ember-htmlbars/tests/system/render_view_test.js
deleted file mode 100644
index 0d34c3d27aa..00000000000
--- a/packages/ember-htmlbars/tests/system/render_view_test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { runAppend, runDestroy } from "ember-runtime/tests/utils";
-import EmberView from 'ember-views/views/view';
-import defaultEnv from "ember-htmlbars/env";
-import keys from 'ember-metal/keys';
-
-var view;
-QUnit.module('ember-htmlbars: renderView', {
- teardown() {
- runDestroy(view);
- }
-});
-
-QUnit.test('default environment values are passed through', function() {
- var keyNames = keys(defaultEnv);
- expect(keyNames.length);
-
- view = EmberView.create({
- template: {
- isHTMLBars: true,
- revision: 'Ember@VERSION_STRING_PLACEHOLDER',
- render(view, env, contextualElement, blockArguments) {
- for (var i = 0, l = keyNames.length; i < l; i++) {
- var keyName = keyNames[i];
-
- deepEqual(env[keyName], defaultEnv[keyName], 'passes ' + keyName + ' from the default env');
- }
- }
- }
- });
-
- runAppend(view);
-});
-
-QUnit.test('Provides a helpful assertion if revisions do not match.', function() {
- view = EmberView.create({
- template: {
- isHTMLBars: true,
- revision: 'Foo-Bar-Baz',
- render() { }
- }
- });
-
- expectAssertion(function() {
- runAppend(view);
- },
- /was compiled with `Foo-Bar-Baz`/);
-});
diff --git a/packages/ember-metal-views/lib/renderer.js b/packages/ember-metal-views/lib/renderer.js
index 62628fb92aa..007ead2b290 100755
--- a/packages/ember-metal-views/lib/renderer.js
+++ b/packages/ember-metal-views/lib/renderer.js
@@ -1,309 +1,252 @@
-import DOMHelper from "dom-helper";
-import environment from "ember-metal/environment";
-
-var domHelper = environment.hasDOM ? new DOMHelper() : null;
-
-function Renderer(_helper, _destinedForDOM) {
- this._uuid = 0;
-
- // These sizes and values are somewhat arbitrary (but sensible)
- // pre-allocation defaults.
- this._views = new Array(2000);
- this._queue = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
- this._parents = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
- this._elements = new Array(17);
- this._inserts = {};
- this._dom = _helper || domHelper;
- this._destinedForDOM = _destinedForDOM === undefined ? true : _destinedForDOM;
+import run from "ember-metal/run_loop";
+import { get } from "ember-metal/property_get";
+import { set } from "ember-metal/property_set";
+import {
+ _instrumentStart,
+ subscribers
+} from "ember-metal/instrumentation";
+import buildComponentTemplate from "ember-views/system/build-component-template";
+import { indexOf } from "ember-metal/enumerable_utils";
+//import { deprecation } from "ember-views/compat/attrs-proxy";
+
+function Renderer(_helper) {
+ this._dom = _helper;
}
-function Renderer_renderTree(_view, _parentView, _refMorph) {
- var views = this._views;
- views[0] = _view;
- var index = 0;
- var total = 1;
- var levelBase = _parentView ? _parentView._level+1 : 0;
-
- var root = _parentView == null ? _view : _parentView._root;
-
- // if root view has a _morph assigned
- var willInsert = !!root._morph;
-
- var queue = this._queue;
- queue[0] = 0;
- var length = 1;
-
- var parentIndex = -1;
- var parents = this._parents;
- var parent = _parentView || null;
- var elements = this._elements;
- var element = null;
- var contextualElement = null;
- var level = 0;
-
- var view = _view;
- var children, i, child;
- while (length) {
- elements[level] = element;
- if (!view._morph) {
- // ensure props we add are in same order
- view._morph = null;
- }
- view._root = root;
- this.uuid(view);
- view._level = levelBase + level;
- if (view._elementCreated) {
- this.remove(view, false, true);
+Renderer.prototype.prerenderTopLevelView =
+ function Renderer_prerenderTopLevelView(view, renderNode) {
+ if (view._state === 'inDOM') {
+ throw new Error("You cannot insert a View that has already been rendered");
}
+ view.ownerView = renderNode.emberView = view;
+ view.renderNode = renderNode;
- this.willCreateElement(view);
+ var layout = get(view, 'layout');
+ var template = get(view, 'template');
- contextualElement = view._morph && view._morph.contextualElement;
- if (!contextualElement && parent && parent._childViewsMorph) {
- contextualElement = parent._childViewsMorph.contextualElement;
- }
- if (!contextualElement && view._didCreateElementWithoutMorph) {
- // This code path is used by view.createElement(), which has two purposes:
- //
- // 1. Legacy usage of `createElement()`. Nobody really knows what the point
- // of that is. This usage may be removed in Ember 2.0.
- // 2. FastBoot, which creates an element and has no DOM to insert it into.
- //
- // For FastBoot purposes, rendering the DOM without a contextual element
- // should work fine, because it essentially re-emits the original markup
- // as a String, which will then be parsed again by the browser, which will
- // apply the appropriate parsing rules.
- contextualElement = typeof document !== 'undefined' ? document.body : null;
+ var componentInfo = { component: view, layout: layout };
+
+ var block = buildComponentTemplate(componentInfo, {}, {
+ self: view,
+ template: template && template.raw
+ }).block;
+
+ view.renderBlock(block, renderNode);
+ view.lastResult = renderNode.lastResult;
+ this.clearRenderedViews(view.env);
+ };
+
+Renderer.prototype.renderTopLevelView =
+ function Renderer_renderTopLevelView(view, renderNode) {
+ // Check to see if insertion has been canceled
+ if (view._willInsert) {
+ view._willInsert = false;
+ this.prerenderTopLevelView(view, renderNode);
+ this.dispatchLifecycleHooks(view.env);
}
- element = this.createElement(view, contextualElement);
-
- parents[level++] = parentIndex;
- parentIndex = index;
- parent = view;
-
- // enqueue for end
- queue[length++] = index;
- // enqueue children
- children = this.childViews(view);
- if (children) {
- for (i=children.length-1;i>=0;i--) {
- child = children[i];
- index = total++;
- views[index] = child;
- queue[length++] = index;
- view = child;
+ };
+
+Renderer.prototype.revalidateTopLevelView =
+ function Renderer_revalidateTopLevelView(view) {
+ // This guard prevents revalidation on an already-destroyed view.
+ if (view.renderNode.lastResult) {
+ view.renderNode.lastResult.revalidate(view.env);
+ // supports createElement, which operates without moving the view into
+ // the inDOM state.
+ if (view._state === 'inDOM') {
+ this.dispatchLifecycleHooks(view.env);
}
+ this.clearRenderedViews(view.env);
}
+ };
- index = queue[--length];
- view = views[index];
+Renderer.prototype.dispatchLifecycleHooks =
+ function Renderer_dispatchLifecycleHooks(env) {
+ var ownerView = env.view;
- while (parentIndex === index) {
- level--;
- view._elementCreated = true;
- this.didCreateElement(view);
- if (willInsert) {
- this.willInsertElement(view);
- }
+ var lifecycleHooks = env.lifecycleHooks;
+ var i, hook;
- if (level === 0) {
- length--;
- break;
+ for (i=0; i- ohai
- ohai
ohai <a>derp</a>
");
-});
-
-// Test the behavior of the helper createElement stub
-QUnit.test("innerHTML can be specified", function() {
- view = {
- isView: true,
- innerHTML: 'ohai derp'
- };
-
- appendTo(view);
-
- equalHTML('qunit-fixture', "ohai derp
");
-});
-
-// Test the behavior of the helper createElement stub
-QUnit.test("innerHTML tr can be specified", function() {
- view = {
- isView: true,
- tagName: 'table',
- innerHTML: '| ohai |
you gone and done inserted that element
");
-});
-
-QUnit.test("didInsertElement hook", function() {
- expect(3);
-
- view = {
- isView: true,
-
- didInsertElement() {
- ok(this.element && this.element.nodeType === 1, "We have an element");
- equal(this.element.parentElement, document.getElementById('qunit-fixture'), "The element's parent is correct");
- setElementText(this.element, 'you gone and done inserted that element');
- }
- };
-
- appendTo(view);
-
- equalHTML('qunit-fixture', "you gone and done inserted that element
");
-});
-
-QUnit.test("classNames - array", function() {
- view = {
- isView: true,
- classNames: ['foo', 'bar'],
- textContent: 'ohai'
- };
-
- appendTo(view);
- equalHTML('qunit-fixture', '');
-});
-
-QUnit.test("classNames - string", function() {
- view = {
- isView: true,
- classNames: 'foo bar',
- textContent: 'ohai'
- };
-
- appendTo(view);
- equalHTML('qunit-fixture', '');
-});
diff --git a/packages/ember-metal-views/tests/test_helpers.js b/packages/ember-metal-views/tests/test_helpers.js
deleted file mode 100755
index 7f7433f8856..00000000000
--- a/packages/ember-metal-views/tests/test_helpers.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import create from 'ember-metal/platform/create';
-import { Renderer } from "ember-metal-views";
-
-var renderer;
-
-function MetalRenderer() {
- MetalRenderer._super.call(this);
-}
-MetalRenderer._super = Renderer;
-MetalRenderer.prototype = create(Renderer.prototype, {
- constructor: {
- value: MetalRenderer,
- enumerable: false,
- writable: true,
- configurable: true
- }
-});
-
-MetalRenderer.prototype.childViews = function (view) {
- return view.childViews;
-};
-MetalRenderer.prototype.willCreateElement = function(view) {
-};
-MetalRenderer.prototype.createElement = function (view, contextualElement) {
- var el;
- if (view.element) {
- el = view.element;
- } else {
- el = view.element = this._dom.createElement(view.tagName || 'div', contextualElement);
- }
- var classNames = view.classNames;
- if (typeof classNames === 'string') {
- el.setAttribute('class', classNames);
- } else if (classNames && classNames.length) {
- if (classNames.length === 1) { // PERF: avoid join'ing unnecessarily
- el.setAttribute('class', classNames[0]);
- } else {
- el.setAttribute('class', classNames.join(' ')); // TODO: faster way to do this?
- }
- }
- var attributeBindings = view.attributeBindings;
- if (attributeBindings && attributeBindings.length) {
- for (var i=0,l=attributeBindings.length; iMy great app
- {{render "navigation"}} - ``` - - ```html -My great app
-
- Hello, world.
-
- ```
-
- Optionally you may provide a second argument: a property path
- that will be bound to the `model` property of the controller.
-
- If a `model` property path is specified, then a new instance of the
- controller will be created and `{{render}}` can be used multiple times
- with the same name.
-
- For example if you had this `author` template.
-
- ```handlebars
-
-```
-
-You could render it inside the `post` template using the `render` helper.
-
-```handlebars
-
-
- ```
-
- @method render
- @for Ember.Handlebars.helpers
- @param {String} name
- @param {Object?} context
- @param {Hash} options
- @return {String} HTML string
-*/
-export function renderHelper(params, hash, options, env) {
- var currentView = env.data.view;
- var container, router, controller, view, initialContext;
-
- var name = params[0];
- var context = params[1];
-
- container = currentView._keywords.controller.value().container;
- router = container.lookup('router:main');
-
- Ember.assert(
- "The first argument of {{render}} must be quoted, e.g. {{render \"sidebar\"}}.",
- typeof name === 'string'
- );
-
- Ember.assert(
- "The second argument of {{render}} must be a path, e.g. {{render \"post\" post}}.",
- params.length < 2 || isStream(params[1])
- );
-
-
- if (params.length === 1) {
- // use the singleton controller
- Ember.assert(
- "You can only use the {{render}} helper once without a model object as " +
- "its second argument, as in {{render \"post\" post}}.",
- !router || !router._lookupActiveView(name)
- );
- } else if (params.length === 2) {
- // create a new controller
- initialContext = context.value();
- } else {
- throw new EmberError("You must pass a templateName to render");
- }
-
- // # legacy namespace
- name = name.replace(/\//g, '.');
- // \ legacy slash as namespace support
-
- var templateName = 'template:' + name;
- Ember.assert(
- "You used `{{render '" + name + "'}}`, but '" + name + "' can not be " +
- "found as either a template or a view.",
- container._registry.has("view:" + name) || container._registry.has(templateName) || !!options.template
- );
-
- var template = options.template;
- view = container.lookup('view:' + name);
- if (!view) {
- view = container.lookup('view:default');
- }
- var viewHasTemplateSpecified = !!get(view, 'template');
- if (!viewHasTemplateSpecified) {
- template = template || container.lookup(templateName);
- }
-
- // provide controller override
- var controllerName;
- var controllerFullName;
-
- if (hash.controller) {
- controllerName = hash.controller;
- controllerFullName = 'controller:' + controllerName;
- delete hash.controller;
-
- Ember.assert(
- "The controller name you supplied '" + controllerName + "' " +
- "did not resolve to a controller.",
- container._registry.has(controllerFullName)
- );
- } else {
- controllerName = name;
- controllerFullName = 'controller:' + controllerName;
- }
-
- var parentController = currentView._keywords.controller.value();
-
- // choose name
- if (params.length > 1) {
- var factory = container.lookupFactory(controllerFullName) ||
- generateControllerFactory(container, controllerName, initialContext);
-
- controller = factory.create({
- modelBinding: context, // TODO: Use a StreamBinding
- parentController: parentController,
- target: parentController
- });
-
- view.one('willDestroyElement', function() {
- controller.destroy();
- });
- } else {
- controller = container.lookup(controllerFullName) ||
- generateController(container, controllerName);
-
- controller.setProperties({
- target: parentController,
- parentController: parentController
- });
- }
-
- hash.viewName = camelize(name);
-
- if (router && !initialContext) {
- router._connectActiveView(name, view);
- }
-
- var props = {
- template: template,
- controller: controller,
- helperName: 'render "' + name + '"'
- };
-
- impersonateAnOutlet(currentView, view, name);
- mergeViewBindings(currentView, props, hash);
- appendTemplatedView(currentView, options.morph, view, props);
-}
-
-// Megahax to make outlets inside the render helper work, until we
-// can kill that behavior at 2.0.
-function impersonateAnOutlet(currentView, view, name) {
- view._childOutlets = Ember.A();
- view._isOutlet = true;
- view._outletName = '__ember_orphans__';
- view._matchOutletName = name;
- view._parentOutlet = function() {
- var parent = this._parentView;
- while (parent && !parent._isOutlet) {
- parent = parent._parentView;
- }
- return parent;
- };
- view.setOutletState = function(state) {
- var ownState;
- if (state && (ownState = state.outlets[this._matchOutletName])) {
- this._outletState = {
- render: { name: 'render helper stub' },
- outlets: create(null)
- };
- this._outletState.outlets[ownState.render.outlet] = ownState;
- ownState.wasUsed = true;
- } else {
- this._outletState = null;
- }
- for (var i = 0; i < this._childOutlets.length; i++) {
- var child = this._childOutlets[i];
- child.setOutletState(this._outletState && this._outletState.outlets[child._outletName]);
- }
- };
-
- var pointer = currentView;
- var po;
- while (pointer && !pointer._isOutlet) {
- pointer = pointer._parentView;
- }
- while (pointer && (po = pointer._parentOutlet())) {
- pointer = po;
- }
- if (pointer) {
- // we've found the toplevel outlet. Subscribe to its
- // __ember_orphan__ child outlet, which is our hack convention for
- // stashing outlet state that may target the render helper.
- pointer._childOutlets.push(view);
- if (pointer._outletState) {
- view.setOutletState(pointer._outletState.outlets[view._outletName]);
- }
- }
-}
diff --git a/packages/ember-routing-htmlbars/lib/helpers/action.js b/packages/ember-routing-htmlbars/lib/keywords/action.js
similarity index 64%
rename from packages/ember-routing-htmlbars/lib/helpers/action.js
rename to packages/ember-routing-htmlbars/lib/keywords/action.js
index 990108f473b..28dc8eeff1f 100644
--- a/packages/ember-routing-htmlbars/lib/helpers/action.js
+++ b/packages/ember-routing-htmlbars/lib/keywords/action.js
@@ -1,119 +1,14 @@
/**
@module ember
-@submodule ember-routing-htmlbars
+@submodule ember-htmlbars
*/
-import Ember from "ember-metal/core"; // Handlebars, uuid, FEATURES, assert, deprecate
+import Ember from "ember-metal/core"; // assert
import { uuid } from "ember-metal/utils";
import run from "ember-metal/run_loop";
import { readUnwrappedModel } from "ember-views/streams/utils";
import { isSimpleClick } from "ember-views/system/utils";
import ActionManager from "ember-views/system/action_manager";
-import { isStream } from "ember-metal/streams/utils";
-
-function actionArgs(parameters, actionName) {
- var ret, i, l;
-
- if (actionName === undefined) {
- ret = new Array(parameters.length);
- for (i=0, l=parameters.length;iHI
{{outlet view=containerView}}")); expectAssertion(function () { @@ -119,16 +111,18 @@ QUnit.test("outlet should assert view is specified as a string", function() { }); -QUnit.test("outlet should assert view path is successfully resolved", function() { +QUnit.test("outlet should assert view path is successfully resolved [DEPRECATED]", function() { + expectDeprecation(/Passing `view` or `viewClass` to {{outlet}} is deprecated/); top.setOutletState(withTemplate("HI
{{outlet view='someViewNameHere'}}")); expectAssertion(function () { runAppend(top); - }, "The view name you supplied 'someViewNameHere' did not resolve to a view."); + }, /someViewNameHere must be a subclass or an instance of Ember.View/); }); -QUnit.test("outlet should support an optional view class", function() { +QUnit.test("outlet should support an optional view class [DEPRECATED]", function() { + expectDeprecation(/Passing `view` or `viewClass` to {{outlet}} is deprecated/); var CoreOutlet = container.lookupFactory('view:core-outlet'); var SpecialOutlet = CoreOutlet.extend({ classNames: ['very-special'] @@ -205,7 +199,8 @@ QUnit.test("Outlets bind to the current template's view, not inner contexts [DEP equal(output, "BOTTOM", "all templates were rendered"); }); -QUnit.test("should support layouts", function() { +QUnit.test("should support layouts [DEPRECATED]", function() { + expectDeprecation(/Using deprecated `template` property on a View/); var template = "{{outlet}}"; var layout = "HI
{{yield}}"; var routerState = { diff --git a/packages/ember-routing-htmlbars/tests/helpers/render_test.js b/packages/ember-routing-htmlbars/tests/helpers/render_test.js index 4c9fb9018d4..482304a6152 100644 --- a/packages/ember-routing-htmlbars/tests/helpers/render_test.js +++ b/packages/ember-routing-htmlbars/tests/helpers/render_test.js @@ -9,18 +9,12 @@ import Namespace from "ember-runtime/system/namespace"; import EmberController from "ember-runtime/controllers/controller"; import EmberArrayController from "ember-runtime/controllers/array_controller"; -import { registerHelper } from "ember-htmlbars/helpers"; -import helpers from "ember-htmlbars/helpers"; import compile from "ember-template-compiler/system/compile"; import EmberView from "ember-views/views/view"; import jQuery from "ember-views/system/jquery"; import ActionManager from "ember-views/system/action_manager"; -import { renderHelper } from "ember-routing-htmlbars/helpers/render"; -import { actionHelper } from "ember-routing-htmlbars/helpers/action"; -import { outletHelper } from "ember-routing-htmlbars/helpers/outlet"; - import { buildRegistry } from "ember-routing-htmlbars/tests/utils"; import { runAppend, runDestroy } from "ember-runtime/tests/utils"; @@ -30,35 +24,16 @@ function runSet(object, key, value) { }); } -var view, container, originalRenderHelper, originalActionHelper, originalOutletHelper; +var view, container; QUnit.module("ember-routing-htmlbars: {{render}} helper", { setup() { - originalOutletHelper = helpers['outlet']; - registerHelper('outlet', outletHelper); - - originalRenderHelper = helpers['render']; - registerHelper('render', renderHelper); - - originalActionHelper = helpers['action']; - registerHelper('action', actionHelper); - - var namespace = Namespace.create(); var registry = buildRegistry(namespace); container = registry.container(); }, teardown() { - delete helpers['render']; - helpers['render'] = originalRenderHelper; - - delete helpers['action']; - helpers['action'] = originalActionHelper; - - delete helpers['outlet']; - helpers['outlet'] = originalOutletHelper; - runDestroy(container); runDestroy(view); @@ -70,6 +45,7 @@ QUnit.test("{{render}} helper should render given template", function() { var template = "HI
{{render 'home'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -79,13 +55,16 @@ QUnit.test("{{render}} helper should render given template", function() { runAppend(view); equal(view.$().text(), 'HIBYE'); - ok(container.lookup('router:main')._lookupActiveView('home'), 'should register home as active view'); + // This is a poor assertion. What is really being tested is that + // a second render with the same name will throw an assert. + ok(container.lookup('router:main')._lookupActiveComponentNode('home'), 'should register home as active view'); }); QUnit.test("{{render}} helper should render nested helpers", function() { var template = "HI
{{render 'foo'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -103,6 +82,7 @@ QUnit.test("{{render}} helper should have assertion if neither template nor view var template = "HI
{{render 'oops'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -117,6 +97,7 @@ QUnit.test("{{render}} helper should not have assertion if template is supplied var controller = EmberController.extend({ container: container }); container._registry.register('controller:good', EmberController.extend({ name: 'Rob' })); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -130,6 +111,7 @@ QUnit.test("{{render}} helper should not have assertion if view exists without a var template = "HI
{{render 'oops'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -156,19 +138,24 @@ QUnit.test("{{render}} helper should render given template with a supplied model }); view = EmberView.create({ + container: container, controller: controller, template: compile(template) }); - var PostController = EmberController.extend(); + var postController; + var PostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + postController = this; + } + }); container._registry.register('controller:post', PostController); Ember.TEMPLATES['post'] = compile("{{model.title}}
"); runAppend(view); - var postController = view._childViews[0].get('controller'); - equal(view.$().text(), 'HIRails is omakase'); equal(postController.get('model'), post); @@ -189,6 +176,7 @@ QUnit.test("{{render}} helper with a supplied model should not fire observers on }; view = EmberView.create({ + container: container, controller: EmberController.create({ container: container, post: post @@ -217,6 +205,7 @@ QUnit.test("{{render}} helper should raise an error when a given controller name var controller = EmberController.extend({ container: container }); container._registry.register('controller:posts', EmberArrayController.extend()); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -229,26 +218,35 @@ QUnit.test("{{render}} helper should raise an error when a given controller name }); QUnit.test("{{render}} helper should render with given controller", function() { - var template = 'HI
{{render "home" controller="posts"}}'; + var template = '{{render "home" controller="posts"}}'; var controller = EmberController.extend({ container: container }); - container._registry.register('controller:posts', EmberArrayController.extend()); + var id = 0; + container._registry.register('controller:posts', EmberArrayController.extend({ + init() { + this._super.apply(this, arguments); + this.uniqueId = id++; + } + })); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); - Ember.TEMPLATES['home'] = compile("BYE
"); + Ember.TEMPLATES['home'] = compile("{{uniqueId}}"); runAppend(view); - var renderedView = container.lookup('router:main')._lookupActiveView('home'); - equal(container.lookup('controller:posts'), renderedView.get('controller'), 'rendered with correct controller'); + var uniqueId = container.lookup('controller:posts').get('uniqueId'); + equal(uniqueId, 0, 'precond - first uniqueId is used for singleton'); + equal(uniqueId, view.$().html(), 'rendered with singleton controller'); }); QUnit.test("{{render}} helper should render a template without a model only once", function() { var template = "HI
{{render 'home'}}{{render 'home'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -278,20 +276,28 @@ QUnit.test("{{render}} helper should render templates with models multiple times var controller = Controller.create(); view = EmberView.create({ + container: container, controller: controller, template: compile(template) }); - var PostController = EmberController.extend(); + var postController1, postController2; + var PostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + if (!postController1) { + postController1 = this; + } else if (!postController2) { + postController2 = this; + } + } + }); container._registry.register('controller:post', PostController, { singleton: false }); Ember.TEMPLATES['post'] = compile("
{{model.title}}
"); runAppend(view); - var postController1 = view._childViews[0].get('controller'); - var postController2 = view._childViews[1].get('controller'); - ok(view.$().text().match(/^HI ?Me first ?Then me$/)); equal(postController1.get('model'), post1); equal(postController2.get('model'), post2); @@ -320,28 +326,34 @@ QUnit.test("{{render}} helper should not leak controllers", function() { var controller = Controller.create(); view = EmberView.create({ + container: container, controller: controller, template: compile(template) }); - var PostController = EmberController.extend(); + var postController; + var PostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + postController = this; + } + }); container._registry.register('controller:post', PostController); Ember.TEMPLATES['post'] = compile("{{title}}
"); runAppend(view); - var postController1 = view._childViews[0].get('controller'); - runDestroy(view); - ok(postController1.isDestroyed, 'expected postController to be destroyed'); + ok(postController.isDestroyed, 'expected postController to be destroyed'); }); QUnit.test("{{render}} helper should not treat invocations with falsy contexts as context-less", function() { var template = "HI
{{render 'post' zero}} {{render 'post' nonexistent}}"; view = EmberView.create({ + container: container, controller: EmberController.createWithMixins({ container: container, zero: false @@ -349,16 +361,23 @@ QUnit.test("{{render}} helper should not treat invocations with falsy contexts a template: compile(template) }); - var PostController = EmberController.extend(); + var postController1, postController2; + var PostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + if (!postController1) { + postController1 = this; + } else if (!postController2) { + postController2 = this; + } + } + }); container._registry.register('controller:post', PostController, { singleton: false }); Ember.TEMPLATES['post'] = compile("{{#unless model}}NOTHING{{/unless}}
"); runAppend(view); - var postController1 = view._childViews[0].get('controller'); - var postController2 = view._childViews[1].get('controller'); - ok(view.$().text().match(/^HI ?NOTHING ?NOTHING$/)); equal(postController1.get('model'), 0); equal(postController2.get('model'), undefined); @@ -378,20 +397,28 @@ QUnit.test("{{render}} helper should render templates both with and without mode var controller = Controller.create(); view = EmberView.create({ + container: container, controller: controller, template: compile(template) }); - var PostController = EmberController.extend(); + var postController1, postController2; + var PostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + if (!postController1) { + postController1 = this; + } else if (!postController2) { + postController2 = this; + } + } + }); container._registry.register('controller:post', PostController, { singleton: false }); Ember.TEMPLATES['post'] = compile("Title:{{model.title}}
"); runAppend(view); - var postController1 = view._childViews[0].get('controller'); - var postController2 = view._childViews[1].get('controller'); - ok(view.$().text().match(/^HI ?Title: ?Title:Rails is omakase$/)); equal(postController1.get('model'), null); equal(postController2.get('model'), post); @@ -423,6 +450,7 @@ QUnit.test("{{render}} helper should link child controllers to the parent contro container._registry.register('controller:posts', EmberArrayController.extend()); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -446,8 +474,9 @@ QUnit.test("{{render}} helper should link child controllers to the parent contro QUnit.test("{{render}} helper should be able to render a template again when it was removed", function() { var controller = EmberController.extend({ container: container }); var CoreOutlet = container.lookupFactory('view:core-outlet'); - view = CoreOutlet.create(); - runAppend(view); + view = CoreOutlet.create({ + container: container + }); Ember.TEMPLATES['home'] = compile("BYE
"); @@ -467,6 +496,7 @@ QUnit.test("{{render}} helper should be able to render a template again when it }; view.setOutletState(liveRoutes); }); + runAppend(view); equal(view.$().text(), 'HI1BYE'); @@ -484,49 +514,70 @@ QUnit.test("{{render}} helper should be able to render a template again when it }); QUnit.test("{{render}} works with dot notation", function() { - var template = 'BLOG
{{render "blog.post"}}'; - - var controller = EmberController.extend({ container: container }); - container._registry.register('controller:blog.post', EmberController.extend()); + var template = '{{render "blog.post"}}'; + + var ContextController = EmberController.extend({ container: container }); + + var controller; + var id = 0; + var BlogPostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + controller = this; + this.uniqueId = id++; + } + }); + container._registry.register('controller:blog.post', BlogPostController); view = EmberView.create({ - controller: controller.create(), + container: container, + controller: ContextController.create(), template: compile(template) }); - Ember.TEMPLATES['blog.post'] = compile("POST
"); + Ember.TEMPLATES['blog.post'] = compile("{{uniqueId}}"); runAppend(view); - var renderedView = container.lookup('router:main')._lookupActiveView('blog.post'); - equal(renderedView.get('viewName'), 'blogPost', 'camelizes the view name'); - equal(container.lookup('controller:blog.post'), renderedView.get('controller'), 'rendered with correct controller'); + var singletonController = container.lookup('controller:blog.post'); + equal(singletonController.uniqueId, view.$().html(), 'rendered with correct singleton controller'); }); QUnit.test("{{render}} works with slash notation", function() { - var template = 'BLOG
{{render "blog/post"}}'; - - var controller = EmberController.extend({ container: container }); - container._registry.register('controller:blog.post', EmberController.extend()); + var template = '{{render "blog/post"}}'; + + var ContextController = EmberController.extend({ container: container }); + + var controller; + var id = 0; + var BlogPostController = EmberController.extend({ + init() { + this._super.apply(this, arguments); + controller = this; + this.uniqueId = id++; + } + }); + container._registry.register('controller:blog.post', BlogPostController); view = EmberView.create({ - controller: controller.create(), + container: container, + controller: ContextController.create(), template: compile(template) }); - Ember.TEMPLATES['blog.post'] = compile("POST
"); + Ember.TEMPLATES['blog.post'] = compile("{{uniqueId}}"); runAppend(view); - var renderedView = container.lookup('router:main')._lookupActiveView('blog.post'); - equal(renderedView.get('viewName'), 'blogPost', 'camelizes the view name'); - equal(container.lookup('controller:blog.post'), renderedView.get('controller'), 'rendered with correct controller'); + var singletonController = container.lookup('controller:blog.post'); + equal(singletonController.uniqueId, view.$().html(), 'rendered with correct singleton controller'); }); QUnit.test("throws an assertion if {{render}} is called with an unquoted template name", function() { var template = 'HI
{{render home}}'; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -542,6 +593,7 @@ QUnit.test("throws an assertion if {{render}} is called with a literal for a mod var template = 'HI
{{render "home" "model"}}'; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -557,6 +609,7 @@ QUnit.test("{{render}} helper should let view provide its own template", functio var template = "{{render 'fish'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); @@ -577,6 +630,7 @@ QUnit.test("{{render}} helper should not require view to provide its own templat var template = "{{render 'fish'}}"; var controller = EmberController.extend({ container: container }); view = EmberView.create({ + container: container, controller: controller.create(), template: compile(template) }); diff --git a/packages/ember-routing-htmlbars/tests/utils.js b/packages/ember-routing-htmlbars/tests/utils.js index 98dce7c8a9c..65464409e95 100644 --- a/packages/ember-routing-htmlbars/tests/utils.js +++ b/packages/ember-routing-htmlbars/tests/utils.js @@ -10,7 +10,6 @@ import Controller from "ember-runtime/controllers/controller"; import ObjectController from "ember-runtime/controllers/object_controller"; import ArrayController from "ember-runtime/controllers/array_controller"; -import _MetamorphView from "ember-views/views/metamorph_view"; import EmberView from "ember-views/views/view"; import EmberRouter from "ember-routing/system/router"; import { @@ -56,7 +55,6 @@ function buildRegistry(namespace) { registry.register("controller:object", ObjectController, { instantiate: false }); registry.register("controller:array", ArrayController, { instantiate: false }); - registry.register("view:default", _MetamorphView); registry.register("view:toplevel", EmberView.extend()); registry.register("view:-outlet", OutletView); registry.register("view:core-outlet", CoreOutletView); diff --git a/packages/ember-routing-views/lib/initializers/link-to-component.js b/packages/ember-routing-views/lib/initializers/link-to-component.js new file mode 100644 index 00000000000..7348dd7e062 --- /dev/null +++ b/packages/ember-routing-views/lib/initializers/link-to-component.js @@ -0,0 +1,12 @@ +import { onLoad } from "ember-runtime/system/lazy_load"; +import linkToComponent from "ember-routing-views/views/link"; + +onLoad('Ember.Application', function(Application) { + Application.initializer({ + name: 'link-to-component', + initialize(registry) { + registry.register('component:-link-to', linkToComponent); + } + }); +}); + diff --git a/packages/ember-routing-views/lib/main.js b/packages/ember-routing-views/lib/main.js index e6522621507..28f68de2917 100644 --- a/packages/ember-routing-views/lib/main.js +++ b/packages/ember-routing-views/lib/main.js @@ -7,8 +7,9 @@ Ember Routing Views */ import Ember from "ember-metal/core"; +import "ember-routing-views/initializers/link-to-component"; -import { LinkView } from "ember-routing-views/views/link"; +import LinkView from "ember-routing-views/views/link"; import { OutletView, CoreOutletView diff --git a/packages/ember-routing-views/lib/views/link.js b/packages/ember-routing-views/lib/views/link.js index 5f669527ef4..24456ba5a83 100644 --- a/packages/ember-routing-views/lib/views/link.js +++ b/packages/ember-routing-views/lib/views/link.js @@ -6,27 +6,15 @@ import Ember from "ember-metal/core"; // FEATURES, Logger, assert import { get } from "ember-metal/property_get"; -import merge from "ember-metal/merge"; -import run from "ember-metal/run_loop"; +import { set } from "ember-metal/property_set"; import { computed } from "ember-metal/computed"; -import { fmt } from "ember-runtime/system/string"; -import keys from "ember-metal/keys"; import { isSimpleClick } from "ember-views/system/utils"; import EmberComponent from "ember-views/views/component"; -import { routeArgs } from "ember-routing/utils"; -import { read, subscribe } from "ember-metal/streams/utils"; - -var numberOfContextsAcceptedByHandler = function(handler, handlerInfos) { - var req = 0; - for (var i = 0, l = handlerInfos.length; i < l; i++) { - req = req + handlerInfos[i].names.length; - if (handlerInfos[i].handler === handler) { - break; - } - } +import inject from "ember-runtime/inject"; +import ControllerMixin from "ember-runtime/mixins/controller"; - return req; -}; +import linkToTemplate from "ember-htmlbars/templates/link-to"; +linkToTemplate.revision = 'Ember@VERSION_STRING_PLACEHOLDER'; var linkViewClassNameBindings = ['active', 'loading', 'disabled']; if (Ember.FEATURES.isEnabled('ember-routing-transitioning-classes')) { @@ -47,7 +35,9 @@ if (Ember.FEATURES.isEnabled('ember-routing-transitioning-classes')) { @extends Ember.View @see {Handlebars.helpers.link-to} **/ -var LinkView = EmberComponent.extend({ +var LinkComponent = EmberComponent.extend({ + defaultLayout: linkToTemplate, + tagName: 'a', /** @@ -144,7 +134,7 @@ var LinkView = EmberComponent.extend({ @property attributeBindings @type Array | String - @default ['href', 'title', 'rel', 'tabindex', 'target'] + @default ['title', 'rel', 'tabindex', 'target'] **/ attributeBindings: ['href', 'title', 'rel', 'tabindex', 'target'], @@ -216,54 +206,9 @@ var LinkView = EmberComponent.extend({ this.on(eventName, this, this._invoke); }, - /** - This method is invoked by observers installed during `init` that fire - whenever the params change - - @private - @method _paramsChanged - @since 1.3.0 - */ - _paramsChanged() { - this.notifyPropertyChange('resolvedParams'); - }, - - /** - This is called to setup observers that will trigger a rerender. - - @private - @method _setupPathObservers - @since 1.3.0 - **/ - _setupPathObservers() { - var params = this.params; - - var scheduledParamsChanged = this._wrapAsScheduled(this._paramsChanged); - - for (var i = 0; i < params.length; i++) { - subscribe(params[i], scheduledParamsChanged, this); - } - - var queryParamsObject = this.queryParamsObject; - if (queryParamsObject) { - var values = queryParamsObject.values; - for (var k in values) { - if (!values.hasOwnProperty(k)) { - continue; - } - - subscribe(values[k], scheduledParamsChanged, this); - } - } - }, - - afterRender() { - this._super(...arguments); - this._setupPathObservers(); - }, + _routing: inject.service('-routing'), /** - Accessed as a classname binding to apply the `LinkView`'s `disabledClass` CSS `class` to the element when the link is disabled. @@ -294,17 +239,15 @@ var LinkView = EmberComponent.extend({ @property active **/ - active: computed('loadedParams', function computeLinkViewActive() { - var router = get(this, 'router'); - if (!router) { return; } - return computeActive(this, router.currentState); + active: computed('attrs.params', '_routing.currentState', function computeLinkViewActive() { + var currentState = get(this, '_routing.currentState'); + return computeActive(this, currentState); }), - willBeActive: computed('router.targetState', function() { - var router = get(this, 'router'); - if (!router) { return; } - var targetState = router.targetState; - if (router.currentState === targetState) { return; } + willBeActive: computed('_routing.targetState', function() { + var routing = get(this, '_routing'); + var targetState = get(routing, 'targetState'); + if (get(routing, 'currentState') === targetState) { return; } return !!computeActive(this, targetState); }), @@ -323,34 +266,6 @@ var LinkView = EmberComponent.extend({ return get(this, 'active') && !willBeActive && 'ember-transitioning-out'; }), - /** - Accessed as a classname binding to apply the `LinkView`'s `loadingClass` - CSS `class` to the element when the link is loading. - - A `LinkView` is considered loading when it has at least one - parameter whose value is currently null or undefined. During - this time, clicking the link will perform no transition and - emit a warning that the link is still in a loading state. - - @property loading - **/ - loading: computed('loadedParams', function computeLinkViewLoading() { - if (!get(this, 'loadedParams')) { return get(this, 'loadingClass'); } - }), - - /** - Returns the application's main router from the container. - - @private - @property router - **/ - router: computed(function() { - var controller = get(this, 'controller'); - if (controller && controller.container) { - return controller.container.lookup('router:main'); - } - }), - /** Event handler that invokes the link, activating the associated route. @@ -361,14 +276,14 @@ var LinkView = EmberComponent.extend({ _invoke(event) { if (!isSimpleClick(event)) { return true; } - if (this.preventDefault !== false) { - var targetAttribute = get(this, 'target'); + if (this.attrs.preventDefault !== false) { + var targetAttribute = this.attrs.target; if (!targetAttribute || targetAttribute === '_self') { event.preventDefault(); } } - if (this.bubbles === false) { event.stopPropagation(); } + if (this.attrs.bubbles === false) { event.stopPropagation(); } if (get(this, '_isDisabled')) { return false; } @@ -377,248 +292,186 @@ var LinkView = EmberComponent.extend({ return false; } - var targetAttribute2 = get(this, 'target'); + var targetAttribute2 = this.attrs.target; if (targetAttribute2 && targetAttribute2 !== '_self') { return false; } - var router = get(this, 'router'); - var loadedParams = get(this, 'loadedParams'); - - var transition = router._doTransition(loadedParams.targetRouteName, loadedParams.models, loadedParams.queryParams); - if (get(this, 'replace')) { - transition.method('replace'); - } - - if (Ember.FEATURES.isEnabled('ember-routing-transitioning-classes')) { - return; - } - - // Schedule eager URL update, but after we've given the transition - // a chance to synchronously redirect. - // We need to always generate the URL instead of using the href because - // the href will include any rootURL set, but the router expects a URL - // without it! Note that we don't use the first level router because it - // calls location.formatURL(), which also would add the rootURL! - var args = routeArgs(loadedParams.targetRouteName, loadedParams.models, transition.state.queryParams); - var url = router.router.generate.apply(router.router, args); - - run.scheduleOnce('routerTransitions', this, this._eagerUpdateUrl, transition, url); + get(this, '_routing').transitionTo(get(this, 'targetRouteName'), get(this, 'models'), get(this, 'queryParams.values'), get(this, 'attrs.replace')); }, - /** - @private - @method _eagerUpdateUrl - @param transition - @param href - */ - _eagerUpdateUrl(transition, href) { - if (!transition.isActive || !transition.urlMethod) { - // transition was aborted, already ran to completion, - // or it has a null url-updated method. - return; - } - - if (href.indexOf('#') === 0) { - href = href.slice(1); - } - - // Re-use the routerjs hooks set up by the Ember router. - var routerjs = get(this, 'router.router'); - if (transition.urlMethod === 'update') { - routerjs.updateURL(href); - } else if (transition.urlMethod === 'replace') { - routerjs.replaceURL(href); - } - - // Prevent later update url refire. - transition.method(null); - }, + queryParams: null, /** - Computed property that returns an array of the - resolved parameters passed to the `link-to` helper, - e.g.: - - ```hbs - {{link-to a b '123' c}} - ``` + Sets the element's `href` attribute to the url for + the `LinkView`'s targeted route. - will generate a `resolvedParams` of: + If the `LinkView`'s `tagName` is changed to a value other + than `a`, this property will be ignored. - ```js - [aObject, bObject, '123', cObject] - ``` + @property href + **/ + href: computed('models', 'targetRouteName', '_routing.currentState', function computeLinkViewHref() { + if (get(this, 'tagName') !== 'a') { return; } - @private - @property - @return {Array} - */ - resolvedParams: computed('router.url', function() { - var params = this.params; - var targetRouteName; - var models = []; - var onlyQueryParamsSupplied = (params.length === 0); + var targetRouteName = get(this, 'targetRouteName'); + var models = get(this, 'models'); - if (onlyQueryParamsSupplied) { - var appController = this.container.lookup('controller:application'); - targetRouteName = get(appController, 'currentRouteName'); - } else { - targetRouteName = read(params[0]); + if (get(this, 'loading')) { return get(this, 'loadingHref'); } - for (var i = 1; i < params.length; i++) { - models.push(read(params[i])); - } - } + var routing = get(this, '_routing'); + return routing.generateURL(targetRouteName, models, get(this, 'queryParams.values')); + }), - var suppliedQueryParams = getResolvedQueryParams(this, targetRouteName); + loading: computed('models', 'targetRouteName', function() { + var targetRouteName = get(this, 'targetRouteName'); + var models = get(this, 'models'); - return { - targetRouteName: targetRouteName, - models: models, - queryParams: suppliedQueryParams - }; + if (!modelsAreLoaded(models) || targetRouteName == null) { + return get(this, 'loadingClass'); + } }), /** - Computed property that returns the current route name, - dynamic segments, and query params. Returns falsy if - for null/undefined params to indicate that the link view - is still in a loading state. + The default href value to use while a link-to is loading. + Only applies when tagName is 'a' - @private - @property - @return {Array} An array with the route name and any dynamic segments - **/ - loadedParams: computed('resolvedParams', function computeLinkViewRouteArgs() { - var router = get(this, 'router'); - if (!router) { return; } + @property loadingHref + @type String + @default # + */ + loadingHref: '#', - var resolvedParams = get(this, 'resolvedParams'); - var namedRoute = resolvedParams.targetRouteName; + willRender() { + var queryParams; - if (!namedRoute) { return; } + var attrs = this.attrs; - Ember.assert(fmt("The attempt to link-to route '%@' failed. " + - "The router did not find '%@' in its possible routes: '%@'", - [namedRoute, namedRoute, keys(router.router.recognizer.names).join("', '")]), - router.hasRoute(namedRoute)); + // Do not mutate params in place + var params = attrs.params.slice(); - if (!paramsAreLoaded(resolvedParams.models)) { return; } + Ember.assert("You must provide one or more parameters to the link-to helper.", params.length); - return resolvedParams; - }), + var lastParam = params[params.length - 1]; - queryParamsObject: null, + if (lastParam && lastParam.isQueryParams) { + queryParams = params.pop(); + } else { + queryParams = {}; + } - /** - Sets the element's `href` attribute to the url for - the `LinkView`'s targeted route. + if (attrs.disabledClass) { + this.set('disabledClass', attrs.disabledClass); + } - If the `LinkView`'s `tagName` is changed to a value other - than `a`, this property will be ignored. + if (attrs.activeClass) { + this.set('activeClass', attrs.activeClass); + } - @property href - **/ - href: computed('loadedParams', function computeLinkViewHref() { - if (get(this, 'tagName') !== 'a') { return; } + if (attrs.disabledWhen) { + this.set('disabled', attrs.disabledWhen); + } - var router = get(this, 'router'); - var loadedParams = get(this, 'loadedParams'); + var currentWhen = attrs['current-when']; - if (!loadedParams) { - return get(this, 'loadingHref'); + if (attrs.currentWhen) { + Ember.deprecate('Using currentWhen with {{link-to}} is deprecated in favor of `current-when`.', !attrs.currentWhen); + currentWhen = attrs.currentWhen; } - var visibleQueryParams = {}; - merge(visibleQueryParams, loadedParams.queryParams); - router._prepareQueryParams(loadedParams.targetRouteName, loadedParams.models, visibleQueryParams); - - var args = routeArgs(loadedParams.targetRouteName, loadedParams.models, visibleQueryParams); - var result = router.generate.apply(router, args); - return result; - }), + if (currentWhen) { + this.set('currentWhen', currentWhen); + } - /** - The default href value to use while a link-to is loading. - Only applies when tagName is 'a' + // TODO: Change to built-in hasBlock once it's available + if (!attrs.hasBlock) { + this.set('linkTitle', params.shift()); + } - @property loadingHref - @type String - @default # - */ - loadingHref: '#' -}); + if (attrs.loadingClass) { + set(this, 'loadingClass', attrs.loadingClass); + } -LinkView.toString = function() { return "LinkView"; }; + for (let i = 0; i < params.length; i++) { + var value = params[i]; -function getResolvedQueryParams(linkView, targetRouteName) { - var queryParamsObject = linkView.queryParamsObject; - var resolvedQueryParams = {}; + while (ControllerMixin.detect(value)) { + Ember.deprecate('Providing `{{link-to}}` with a param that is wrapped in a controller is deprecated. Please update `' + attrs.view + '` to use `{{link-to "post" someController.model}}` instead.'); + value = value.get('model'); + } - if (!queryParamsObject) { return resolvedQueryParams; } + params[i] = value; + } - var values = queryParamsObject.values; - for (var key in values) { - if (!values.hasOwnProperty(key)) { continue; } - resolvedQueryParams[key] = read(values[key]); - } + let targetRouteName; + let models = []; + let onlyQueryParamsSupplied = (params.length === 0); - return resolvedQueryParams; -} + if (onlyQueryParamsSupplied) { + var appController = this.container.lookup('controller:application'); + if (appController) { + targetRouteName = get(appController, 'currentRouteName'); + } + } else { + targetRouteName = params[0]; -function paramsAreLoaded(params) { - for (var i = 0, len = params.length; i < len; ++i) { - var param = params[i]; - if (param === null || typeof param === 'undefined') { - return false; + for (let i = 1; i < params.length; i++) { + models.push(params[i]); + } } + + let resolvedQueryParams = getResolvedQueryParams(queryParams, targetRouteName); + + this.set('targetRouteName', targetRouteName); + this.set('models', models); + this.set('queryParams', queryParams); + this.set('resolvedQueryParams', resolvedQueryParams); } - return true; -} +}); + +LinkComponent.toString = function() { return "LinkComponent"; }; -function computeActive(route, routerState) { - if (get(route, 'loading')) { return false; } +function computeActive(view, routerState) { + if (get(view, 'loading')) { return false; } - var currentWhen = route['current-when'] || route.currentWhen; + var currentWhen = get(view, 'currentWhen'); var isCurrentWhenSpecified = !!currentWhen; - currentWhen = currentWhen || get(route, 'loadedParams').targetRouteName; + currentWhen = currentWhen || get(view, 'targetRouteName'); currentWhen = currentWhen.split(' '); for (var i = 0, len = currentWhen.length; i < len; i++) { - if (isActiveForRoute(route, currentWhen[i], isCurrentWhenSpecified, routerState)) { - return get(route, 'activeClass'); + if (isActiveForRoute(view, currentWhen[i], isCurrentWhenSpecified, routerState)) { + return get(view, 'activeClass'); } } return false; } -function isActiveForRoute(route, routeName, isCurrentWhenSpecified, routerState) { - var router = get(route, 'router'); - var loadedParams = get(route, 'loadedParams'); - var contexts = loadedParams.models; - - var handlers = router.router.recognizer.handlersFor(routeName); - var leafName = handlers[handlers.length-1].handler; - var maximumContexts = numberOfContextsAcceptedByHandler(routeName, handlers); - - // NOTE: any ugliness in the calculation of activeness is largely - // due to the fact that we support automatic normalizing of - // `resource` -> `resource.index`, even though there might be - // dynamic segments / query params defined on `resource.index` - // which complicates (and makes somewhat ambiguous) the calculation - // of activeness for links that link to `resource` instead of - // directly to `resource.index`. - - // if we don't have enough contexts revert back to full route name - // this is because the leaf route will use one of the contexts - if (contexts.length > maximumContexts) { - routeName = leafName; +function modelsAreLoaded(models) { + for (var i=0, l=models.length; i{{person.firstName}}
{{/each}}")
+ defaultTemplate: compile("{{#each model as |person|}}{{person.firstName}}
{{/each}}")
});
App.PeopleController = ArrayController.extend({});
diff --git a/packages/ember-views/lib/attr_nodes/attr_node.js b/packages/ember-views/lib/attr_nodes/attr_node.js
deleted file mode 100644
index eaaa356032c..00000000000
--- a/packages/ember-views/lib/attr_nodes/attr_node.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import Ember from 'ember-metal/core';
-import {
- read,
- subscribe,
- unsubscribe
-} from "ember-metal/streams/utils";
-import run from "ember-metal/run_loop";
-
-export default function AttrNode(attrName, attrValue) {
- this.init(attrName, attrValue);
-}
-
-export var styleWarning = 'Binding style attributes may introduce cross-site scripting vulnerabilities; ' +
- 'please ensure that values being bound are properly escaped. For more information, ' +
- 'including how to disable this warning, see ' +
- 'http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes.';
-
-AttrNode.prototype.init = function init(attrName, simpleAttrValue) {
- this.isAttrNode = true;
- this.isView = true;
-
- this.tagName = '';
- this.isVirtual = true;
-
- this.attrName = attrName;
- this.attrValue = simpleAttrValue;
- this.isDirty = true;
- this.isDestroying = false;
- this.lastValue = null;
- this.hasRenderedInitially = false;
-
- subscribe(this.attrValue, this.rerender, this);
-};
-
-AttrNode.prototype.renderIfDirty = function renderIfDirty() {
- if (this.isDirty && !this.isDestroying) {
- var value = read(this.attrValue);
- if (value !== this.lastValue) {
- this._renderer.renderTree(this, this._parentView);
- } else {
- this.isDirty = false;
- }
- }
-};
-
-AttrNode.prototype.render = function render(buffer) {
- this.isDirty = false;
- if (this.isDestroying) {
- return;
- }
-
- var value = read(this.attrValue);
-
- if (this.attrName === 'value' && (value === null || value === undefined)) {
- value = '';
- }
-
- if (value === undefined) {
- value = null;
- }
-
-
- // If user is typing in a value we don't want to rerender and loose cursor position.
- if (this.hasRenderedInitially && this.attrName === 'value' && this._morph.element.value === value) {
- this.lastValue = value;
- return;
- }
-
- if (this.lastValue !== null || value !== null) {
- this._deprecateEscapedStyle(value);
- this._morph.setContent(value);
- this.lastValue = value;
- this.hasRenderedInitially = true;
- }
-};
-
-AttrNode.prototype._deprecateEscapedStyle = function AttrNode_deprecateEscapedStyle(value) {
- Ember.warn(
- styleWarning,
- (function(name, value, escaped) {
- // SafeString
- if (value && value.toHTML) {
- return true;
- }
-
- if (name !== 'style') {
- return true;
- }
-
- return !escaped;
- }(this.attrName, value, this._morph.escaped))
- );
-};
-
-AttrNode.prototype.rerender = function AttrNode_render() {
- this.isDirty = true;
- run.schedule('render', this, this.renderIfDirty);
-};
-
-AttrNode.prototype.destroy = function AttrNode_destroy() {
- this.isDestroying = true;
- this.isDirty = false;
-
- unsubscribe(this.attrValue, this.rerender, this);
-
- if (!this.removedFromDOM && this._renderer) {
- this._renderer.remove(this, true);
- }
-};
-
-AttrNode.prototype.propertyDidChange = function render() {
-};
-
-AttrNode.prototype._notifyBecameHidden = function render() {
-};
-
-AttrNode.prototype._notifyBecameVisible = function render() {
-};
diff --git a/packages/ember-views/lib/attr_nodes/legacy_bind.js b/packages/ember-views/lib/attr_nodes/legacy_bind.js
deleted file mode 100644
index c69c6ad5806..00000000000
--- a/packages/ember-views/lib/attr_nodes/legacy_bind.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
-@module ember
-@submodule ember-htmlbars
-*/
-
-import AttrNode from "./attr_node";
-import { fmt } from "ember-runtime/system/string";
-import { read } from "ember-metal/streams/utils";
-import o_create from "ember-metal/platform/create";
-
-function LegacyBindAttrNode(attrName, attrValue) {
- this.init(attrName, attrValue);
-}
-
-LegacyBindAttrNode.prototype = o_create(AttrNode.prototype);
-
-LegacyBindAttrNode.prototype.render = function render(buffer) {
- this.isDirty = false;
- if (this.isDestroying) {
- return;
- }
- var value = read(this.attrValue);
-
- if (value === undefined) {
- value = null;
- }
-
- if ((this.attrName === 'value' || this.attrName === 'src') && value === null) {
- value = '';
- }
-
- Ember.assert(fmt("Attributes must be numbers, strings or booleans, not %@", [value]),
- value === null || value === undefined || typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean' || !!(value && value.toHTML));
-
- if (this.lastValue !== null || value !== null) {
- this._deprecateEscapedStyle(value);
- this._morph.setContent(value);
- this.lastValue = value;
- }
-};
-
-export default LegacyBindAttrNode;
-
diff --git a/packages/ember-views/lib/compat/attrs-proxy.js b/packages/ember-views/lib/compat/attrs-proxy.js
new file mode 100644
index 00000000000..a672320b803
--- /dev/null
+++ b/packages/ember-views/lib/compat/attrs-proxy.js
@@ -0,0 +1,91 @@
+import { get } from "ember-metal/property_get";
+//import { set } from "ember-metal/property_set";
+import { Mixin } from "ember-metal/mixin";
+import { on } from "ember-metal/events";
+import { symbol } from "ember-metal/utils";
+import objectKeys from "ember-metal/keys";
+import { PROPERTY_DID_CHANGE } from "ember-metal/property_events";
+//import run from "ember-metal/run_loop";
+
+export function deprecation(key) {
+ return `You tried to look up an attribute directly on the component. This is deprecated. Use attrs.${key} instead.`;
+}
+
+export let MUTABLE_CELL = symbol("MUTABLE_CELL");
+
+function isCell(val) {
+ return val && val[MUTABLE_CELL];
+}
+
+let AttrsProxyMixin = {
+ attrs: null,
+
+ getAttr(key) {
+ let attrs = this.attrs;
+ if (!attrs) { return; }
+ return this.getAttrFor(attrs, key);
+ },
+
+ getAttrFor(attrs, key) {
+ let val = attrs[key];
+ return isCell(val) ? val.value : val;
+ },
+
+ setAttr(key, value) {
+ let attrs = this.attrs;
+ let val = attrs[key];
+
+ if (!isCell(val)) {
+ throw new Error(`You can't update attrs.${key}, because it's not mutable`);
+ }
+
+ val.update(value);
+ },
+
+ legacyDidReceiveAttrs: on('didReceiveAttrs', function() {
+ var keys = objectKeys(this.attrs);
+
+ for (var i=0, l=keys.length; i
- Ember.View.extend({
- attributeBindings: ['enabled'],
- enabled: true
- });
- ```
-
- @property attributeBindings
- */
- attributeBindings: EMPTY_ARRAY,
-
- _attrNodes: EMPTY_ARRAY,
-
- _unspecifiedAttributeBindings: null,
-
- /**
- Iterates through the view's attribute bindings, sets up observers for each,
- then applies the current value of the attributes to the passed render buffer.
-
- @method _applyAttributeBindings
- @param {Ember.RenderBuffer} buffer
- @param {Array} attributeBindings
- @private
- */
- _applyAttributeBindings(buffer) {
- var attributeBindings = this.attributeBindings;
-
- if (!attributeBindings || !attributeBindings.length) { return; }
-
- var unspecifiedAttributeBindings = this._unspecifiedAttributeBindings = this._unspecifiedAttributeBindings || {};
-
- var binding, colonIndex, property, attrName, attrNode, attrValue;
- var i, l;
- for (i=0, l=attributeBindings.length; i view.notifyPropertyChange('controller'));
+ }),
+
+ _notifyControllerChange: on('parentViewDidChange', function() {
+ this.notifyPropertyChange('controller');
})
});
diff --git a/packages/ember-views/lib/mixins/view_keyword_support.js b/packages/ember-views/lib/mixins/view_keyword_support.js
deleted file mode 100644
index f46b396f2d6..00000000000
--- a/packages/ember-views/lib/mixins/view_keyword_support.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Mixin } from "ember-metal/mixin";
-import create from 'ember-metal/platform/create';
-import KeyStream from "ember-views/streams/key_stream";
-
-var ViewKeywordSupport = Mixin.create({
- init() {
- this._super(...arguments);
-
- if (!this._keywords) {
- this._keywords = create(null);
- }
- this._keywords._view = this;
- this._keywords.view = undefined;
- this._keywords.controller = new KeyStream(this, 'controller');
- this._setupKeywords();
- },
-
- _setupKeywords() {
- var keywords = this._keywords;
- var contextView = this._contextView || this._parentView;
-
- if (contextView) {
- var parentKeywords = contextView._keywords;
-
- keywords.view = this.isVirtual ? parentKeywords.view : this;
-
- for (var name in parentKeywords) {
- if (keywords[name]) {
- continue;
- }
-
- keywords[name] = parentKeywords[name];
- }
- } else {
- keywords.view = this.isVirtual ? null : this;
- }
- }
-});
-
-export default ViewKeywordSupport;
diff --git a/packages/ember-views/lib/mixins/view_stream_support.js b/packages/ember-views/lib/mixins/view_stream_support.js
deleted file mode 100644
index 9e7c492427e..00000000000
--- a/packages/ember-views/lib/mixins/view_stream_support.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Mixin } from "ember-metal/mixin";
-import StreamBinding from "ember-metal/streams/stream_binding";
-import KeyStream from "ember-views/streams/key_stream";
-import ContextStream from "ember-views/streams/context_stream";
-import create from 'ember-metal/platform/create';
-import { isStream } from "ember-metal/streams/utils";
-
-var ViewStreamSupport = Mixin.create({
- init() {
- this._baseContext = undefined;
- this._contextStream = undefined;
- this._streamBindings = undefined;
- this._super(...arguments);
- },
-
- getStream(path) {
- var stream = this._getContextStream().get(path);
-
- stream._label = path;
-
- return stream;
- },
-
- _willDestroyElement() {
- if (this._streamBindings) {
- this._destroyStreamBindings();
- }
- if (this._contextStream) {
- this._destroyContextStream();
- }
- },
-
- _getBindingForStream(pathOrStream) {
- if (this._streamBindings === undefined) {
- this._streamBindings = create(null);
- }
-
- var path = pathOrStream;
- if (isStream(pathOrStream)) {
- path = pathOrStream._label;
-
- if (!path) {
- // if no _label is present on the provided stream
- // it is likely a subexpr and cannot be set (so it
- // does not need a StreamBinding)
- return pathOrStream;
- }
- }
-
- if (this._streamBindings[path] !== undefined) {
- return this._streamBindings[path];
- } else {
- var stream = this._getContextStream().get(path);
- var streamBinding = new StreamBinding(stream);
-
- streamBinding._label = path;
-
- return this._streamBindings[path] = streamBinding;
- }
- },
-
- _destroyStreamBindings() {
- var streamBindings = this._streamBindings;
- for (var path in streamBindings) {
- streamBindings[path].destroy();
- }
- this._streamBindings = undefined;
- },
-
- _getContextStream() {
- if (this._contextStream === undefined) {
- this._baseContext = new KeyStream(this, 'context');
- this._contextStream = new ContextStream(this);
- }
-
- return this._contextStream;
- },
-
- _destroyContextStream() {
- this._baseContext.destroy();
- this._baseContext = undefined;
- this._contextStream.destroy();
- this._contextStream = undefined;
- },
-
- _unsubscribeFromStreamBindings() {
- for (var key in this._streamBindingSubscriptions) {
- var streamBinding = this[key + 'Binding'];
- var callback = this._streamBindingSubscriptions[key];
- streamBinding.unsubscribe(callback);
- }
- }
-});
-
-export default ViewStreamSupport;
diff --git a/packages/ember-views/lib/streams/context_stream.js b/packages/ember-views/lib/streams/context_stream.js
deleted file mode 100644
index 75973877998..00000000000
--- a/packages/ember-views/lib/streams/context_stream.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Ember from 'ember-metal/core';
-
-import merge from "ember-metal/merge";
-import create from 'ember-metal/platform/create';
-import { isGlobal } from "ember-metal/path_cache";
-import Stream from "ember-metal/streams/stream";
-import SimpleStream from "ember-metal/streams/simple";
-
-function ContextStream(view) {
- Ember.assert("ContextStream error: the argument is not a view", view && view.isView);
-
- this.init();
- this.view = view;
-}
-
-ContextStream.prototype = create(Stream.prototype);
-
-merge(ContextStream.prototype, {
- value() {},
-
- _makeChildStream(key, _fullPath) {
- var stream;
-
- if (key === '' || key === 'this') {
- stream = this.view._baseContext;
- } else if (isGlobal(key) && Ember.lookup[key]) {
- Ember.deprecate("Global lookup of " + _fullPath + " from a Handlebars template is deprecated.");
- stream = new SimpleStream(Ember.lookup[key]);
- stream._isGlobal = true;
- } else if (key in this.view._keywords) {
- stream = new SimpleStream(this.view._keywords[key]);
- } else {
- stream = new SimpleStream(this.view._baseContext.get(key));
- }
-
- stream._isRoot = true;
-
- if (key === 'controller') {
- stream._isController = true;
- }
-
- return stream;
- }
-});
-
-export default ContextStream;
diff --git a/packages/ember-views/lib/streams/key_stream.js b/packages/ember-views/lib/streams/key_stream.js
deleted file mode 100644
index fcb32d937bd..00000000000
--- a/packages/ember-views/lib/streams/key_stream.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import Ember from 'ember-metal/core';
-
-import merge from "ember-metal/merge";
-import create from 'ember-metal/platform/create';
-import { get } from "ember-metal/property_get";
-import { set } from "ember-metal/property_set";
-import {
- addObserver,
- removeObserver
-} from "ember-metal/observer";
-import Stream from "ember-metal/streams/stream";
-import { read, isStream } from "ember-metal/streams/utils";
-
-function KeyStream(source, key) {
- Ember.assert("KeyStream error: key must be a non-empty string", typeof key === 'string' && key.length > 0);
- Ember.assert("KeyStream error: key must not have a '.'", key.indexOf('.') === -1);
-
- this.init();
- this.source = source;
- this.obj = undefined;
- this.key = key;
-
- if (isStream(source)) {
- source.subscribe(this._didChange, this);
- }
-}
-
-KeyStream.prototype = create(Stream.prototype);
-
-merge(KeyStream.prototype, {
- valueFn() {
- var prevObj = this.obj;
- var nextObj = read(this.source);
-
- if (nextObj !== prevObj) {
- if (prevObj && typeof prevObj === 'object') {
- removeObserver(prevObj, this.key, this, this._didChange);
- }
-
- if (nextObj && typeof nextObj === 'object') {
- addObserver(nextObj, this.key, this, this._didChange);
- }
-
- this.obj = nextObj;
- }
-
- if (nextObj) {
- return get(nextObj, this.key);
- }
- },
-
- setValue(value) {
- if (this.obj) {
- set(this.obj, this.key, value);
- }
- },
-
- setSource(nextSource) {
- Ember.assert("KeyStream error: source must be an object", typeof nextSource === 'object');
-
- var prevSource = this.source;
-
- if (nextSource !== prevSource) {
- if (isStream(prevSource)) {
- prevSource.unsubscribe(this._didChange, this);
- }
-
- if (isStream(nextSource)) {
- nextSource.subscribe(this._didChange, this);
- }
-
- this.source = nextSource;
- this.notify();
- }
- },
-
- _didChange: function() {
- this.notify();
- },
-
- _super$destroy: Stream.prototype.destroy,
-
- destroy() {
- if (this._super$destroy()) {
- if (isStream(this.source)) {
- this.source.unsubscribe(this._didChange, this);
- }
-
- if (this.obj && typeof this.obj === 'object') {
- removeObserver(this.obj, this.key, this, this._didChange);
- }
-
- this.source = undefined;
- this.obj = undefined;
- return true;
- }
- }
-});
-
-export default KeyStream;
-
-// The transpiler does not resolve cycles, so we export
-// the `_makeChildStream` method onto `Stream` here.
-
-Stream.prototype._makeChildStream = function(key) {
- return new KeyStream(this, key);
-};
diff --git a/packages/ember-views/lib/streams/should_display.js b/packages/ember-views/lib/streams/should_display.js
index f7ac000bc8a..c41f4b2381e 100644
--- a/packages/ember-views/lib/streams/should_display.js
+++ b/packages/ember-views/lib/streams/should_display.js
@@ -1,13 +1,9 @@
-import Stream from "ember-metal/streams/stream";
-import {
- read,
- subscribe,
- unsubscribe,
- isStream
-} from "ember-metal/streams/utils";
import create from 'ember-metal/platform/create';
+import merge from "ember-metal/merge";
import { get } from "ember-metal/property_get";
import { isArray } from "ember-runtime/utils";
+import Stream from "ember-metal/streams/stream";
+import { read, isStream } from "ember-metal/streams/utils";
export default function shouldDisplay(predicate) {
if (isStream(predicate)) {
@@ -24,46 +20,47 @@ export default function shouldDisplay(predicate) {
}
}
-function ShouldDisplayStream(predicateStream) {
+function ShouldDisplayStream(predicate) {
+ Ember.assert("ShouldDisplayStream error: predicate must be a stream", isStream(predicate));
+
+ var isTruthy = predicate.get('isTruthy');
+
this.init();
- this.oldPredicate = undefined;
- this.predicateStream = predicateStream;
- this.isTruthyStream = predicateStream.get('isTruthy');
- this.lengthStream = undefined;
- subscribe(this.predicateStream, this.notify, this);
- subscribe(this.isTruthyStream, this.notify, this);
+ this.predicate = predicate;
+ this.isTruthy = isTruthy;
+ this.lengthDep = null;
+
+ this.addDependency(predicate);
+ this.addDependency(isTruthy);
}
ShouldDisplayStream.prototype = create(Stream.prototype);
-ShouldDisplayStream.prototype.valueFn = function() {
- var oldPredicate = this.oldPredicate;
- var newPredicate = read(this.predicateStream);
- var newIsArray = isArray(newPredicate);
-
- if (newPredicate !== oldPredicate) {
+merge(ShouldDisplayStream.prototype, {
+ compute() {
+ var truthy = read(this.isTruthy);
- if (this.lengthStream && !newIsArray) {
- unsubscribe(this.lengthStream, this.notify, this);
- this.lengthStream = undefined;
+ if (typeof truthy === 'boolean') {
+ return truthy;
}
- if (!this.lengthStream && newIsArray) {
- this.lengthStream = this.predicateStream.get('length');
- subscribe(this.lengthStream, this.notify, this);
+ if (this.lengthDep) {
+ return this.lengthDep.getValue() !== 0;
+ } else {
+ return !!read(this.predicate);
}
- this.oldPredicate = newPredicate;
- }
-
- var truthy = read(this.isTruthyStream);
- if (typeof truthy === 'boolean') {
- return truthy;
- }
+ },
- if (this.lengthStream) {
- var length = read(this.lengthStream);
- return length !== 0;
+ revalidate() {
+ if (isArray(read(this.predicate))) {
+ if (!this.lengthDep) {
+ this.lengthDep = this.addMutableDependency(this.predicate.get('length'));
+ }
+ } else {
+ if (this.lengthDep) {
+ this.lengthDep.destroy();
+ this.lengthDep = null;
+ }
+ }
}
-
- return !!newPredicate;
-};
+});
diff --git a/packages/ember-views/lib/streams/utils.js b/packages/ember-views/lib/streams/utils.js
index 963c356bbf6..57d8063d9f3 100644
--- a/packages/ember-views/lib/streams/utils.js
+++ b/packages/ember-views/lib/streams/utils.js
@@ -41,7 +41,7 @@ export function readUnwrappedModel(object) {
var result = object.value();
// If the path is exactly `controller` then we don't unwrap it.
- if (!object._isController) {
+ if (object.label !== 'controller') {
while (ControllerMixin.detect(result)) {
result = get(result, 'model');
}
diff --git a/packages/ember-views/lib/system/build-component-template.js b/packages/ember-views/lib/system/build-component-template.js
new file mode 100644
index 00000000000..462b717ee98
--- /dev/null
+++ b/packages/ember-views/lib/system/build-component-template.js
@@ -0,0 +1,237 @@
+import { internal, render } from "htmlbars-runtime";
+import getValue from "ember-htmlbars/hooks/get-value";
+import { get } from "ember-metal/property_get";
+import { isGlobal } from "ember-metal/path_cache";
+
+export default function buildComponentTemplate(componentInfo, attrs, content) {
+ var component, layoutTemplate, blockToRender;
+ var createdElementBlock = false;
+
+ component = componentInfo.component;
+
+ if (content.template) {
+ blockToRender = createContentBlock(content.template, content.scope, content.self, component || null);
+ }
+
+ layoutTemplate = componentInfo.layout;
+
+ if (layoutTemplate && layoutTemplate.raw) {
+ blockToRender = createLayoutBlock(layoutTemplate.raw, blockToRender, content.self, component || null, attrs);
+ }
+
+ if (component) {
+ var tagName = tagNameFor(component);
+
+ // If this is not a tagless component, we need to create the wrapping
+ // element. We use `manualElement` to create a template that represents
+ // the wrapping element and yields to the previous block.
+ if (tagName !== '') {
+ var attributes = normalizeComponentAttributes(component, attrs);
+ var elementTemplate = internal.manualElement(tagName, attributes);
+
+ createdElementBlock = true;
+
+ blockToRender = createElementBlock(elementTemplate, blockToRender, component);
+ } else {
+ validateTaglessComponent(component);
+ }
+
+ return { createdElement: tagName !== '', block: blockToRender };
+ }
+
+ return { createdElement: false, block: blockToRender };
+}
+
+function blockFor(template, options) {
+ Ember.assert("BUG: Must pass a template to blockFor", !!template);
+ return internal.blockFor(render, template, options);
+}
+
+function createContentBlock(template, scope, self, component) {
+ Ember.assert("BUG: buildComponentTemplate can take a scope or a self, but not both", !(scope && self));
+
+ return blockFor(template, {
+ scope: scope,
+ self: self,
+ options: { view: component }
+ });
+}
+
+function createLayoutBlock(template, yieldTo, self, component, attrs) {
+ return blockFor(template, {
+ yieldTo: yieldTo,
+
+ // If we have an old-style Controller with a template it will be
+ // passed as our `self` argument, and it should be the context for
+ // the template. Otherwise, we must have a real Component and it
+ // should be its own template context.
+ self: self || component,
+
+ options: { view: component, attrs: attrs }
+ });
+}
+
+function createElementBlock(template, yieldTo, component) {
+ return blockFor(template, {
+ yieldTo: yieldTo,
+ self: component,
+ options: { view: component }
+ });
+}
+
+function tagNameFor(view) {
+ var tagName = view.tagName;
+
+ if (tagName !== null && typeof tagName === 'object' && tagName.isDescriptor) {
+ tagName = get(view, 'tagName');
+ Ember.deprecate('In the future using a computed property to define tagName will not be permitted. That value will be respected, but changing it will not update the element.', !tagName);
+ }
+
+ if (tagName === null || tagName === undefined) {
+ tagName = view._defaultTagName || 'div';
+ }
+
+ return tagName;
+}
+
+// Takes a component and builds a normalized set of attribute
+// bindings consumable by HTMLBars' `attribute` hook.
+function normalizeComponentAttributes(component, attrs) {
+ var normalized = {};
+ var attributeBindings = component.attributeBindings;
+ var i, l;
+
+ if (attributeBindings) {
+ for (i=0, l=attributeBindings.length; i 0);
-
- if (tagName === null || tagName === undefined) {
- tagName = 'div';
- }
-
- Ember.assert('You cannot use `classNameBindings` on a tag-less view: ' + view.toString(), !taglessViewWithClassBindings);
-
- var buffer = view.buffer = this.buffer;
- buffer.reset(tagName, contextualElement);
-
- if (view.beforeRender) {
- view.beforeRender(buffer);
- }
-
- if (tagName !== '') {
- if (view.applyAttributesToBuffer) {
- view.applyAttributesToBuffer(buffer);
- }
- buffer.generateElement();
- }
-
- if (view.render) {
- view.render(buffer);
- }
-
- if (view.afterRender) {
- view.afterRender(buffer);
- }
-
- var element = buffer.element();
-
- view.buffer = null;
- if (element && element.nodeType === 1) {
- view.element = element;
- }
- return element;
- };
-
-EmberRenderer.prototype.destroyView = function destroyView(view) {
- view.removedFromDOM = true;
- view.destroy();
-};
-
-EmberRenderer.prototype.childViews = function childViews(view) {
- if (view._attrNodes && view._childViews) {
- return view._attrNodes.concat(view._childViews);
- }
- return view._attrNodes || view._childViews;
-};
-
-Renderer.prototype.willCreateElement = function (view) {
- if (subscribers.length && view.instrumentDetails) {
- view._instrumentEnd = _instrumentStart('render.'+view.instrumentName, function viewInstrumentDetails() {
- var details = {};
- view.instrumentDetails(details);
- return details;
- });
- }
- if (view._transitionTo) {
- view._transitionTo('inBuffer');
- }
-}; // inBuffer
-Renderer.prototype.didCreateElement = function (view) {
- if (view._transitionTo) {
- view._transitionTo('hasElement');
- }
- if (view._instrumentEnd) {
- view._instrumentEnd();
- }
-}; // hasElement
-Renderer.prototype.willInsertElement = function (view) {
- if (this._destinedForDOM) {
- if (view.trigger) { view.trigger('willInsertElement'); }
- }
-}; // will place into DOM
-Renderer.prototype.didInsertElement = function (view) {
- if (view._transitionTo) {
- view._transitionTo('inDOM');
- }
-
- if (this._destinedForDOM) {
- if (view.trigger) { view.trigger('didInsertElement'); }
- }
-}; // inDOM // placed into DOM
-
-Renderer.prototype.willRemoveElement = function (view) {};
-
-Renderer.prototype.willDestroyElement = function (view) {
- if (this._destinedForDOM) {
- if (view._willDestroyElement) {
- view._willDestroyElement();
- }
- if (view.trigger) {
- view.trigger('willDestroyElement');
- view.trigger('willClearRender');
- }
- }
-};
-
-Renderer.prototype.didDestroyElement = function (view) {
- view.element = null;
- if (view._transitionTo) {
- view._transitionTo('preRender');
- }
-}; // element destroyed so view.destroy shouldn't try to remove it removedFromDOM
-
-export default EmberRenderer;
diff --git a/packages/ember-views/lib/system/utils.js b/packages/ember-views/lib/system/utils.js
index 649453f5f33..1260433378a 100644
--- a/packages/ember-views/lib/system/utils.js
+++ b/packages/ember-views/lib/system/utils.js
@@ -17,8 +17,8 @@ export function isSimpleClick(event) {
*/
function getViewRange(view) {
var range = document.createRange();
- range.setStartBefore(view._morph.firstNode);
- range.setEndAfter(view._morph.lastNode);
+ range.setStartBefore(view.renderNode.firstNode);
+ range.setEndAfter(view.renderNode.lastNode);
return range;
}
diff --git a/packages/ember-views/lib/views/bound_component_view.js b/packages/ember-views/lib/views/bound_component_view.js
deleted file mode 100644
index f3c10fb2034..00000000000
--- a/packages/ember-views/lib/views/bound_component_view.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
-@module ember
-@submodule ember-views
-*/
-
-import { _Metamorph } from "ember-views/views/metamorph_view";
-import { read, subscribe, unsubscribe } from "ember-metal/streams/utils";
-import { readComponentFactory } from "ember-views/streams/utils";
-import mergeViewBindings from "ember-htmlbars/system/merge-view-bindings";
-import EmberError from "ember-metal/error";
-import ContainerView from "ember-views/views/container_view";
-import View from "ember-views/views/view";
-
-export default ContainerView.extend(_Metamorph, {
- init() {
- this._super(...arguments);
- this.componentNameStream = this._boundComponentOptions.componentNameStream;
-
- subscribe(this.componentNameStream, this._updateBoundChildComponent, this);
- this._updateBoundChildComponent();
- },
- willDestroy() {
- unsubscribe(this.componentNameStream, this._updateBoundChildComponent, this);
- this._super(...arguments);
- },
- _updateBoundChildComponent() {
- this.replace(0, 1, [this._createNewComponent()]);
- },
- _createNewComponent() {
- var componentName = read(this.componentNameStream);
- if (!componentName) {
- return this.createChildView(View);
- }
-
- var componentClass = readComponentFactory(componentName, this.container);
- if (!componentClass) {
- throw new EmberError('HTMLBars error: Could not find component named "' + read(this._boundComponentOptions.componentNameStream) + '".');
- }
- var hash = this._boundComponentOptions;
- var hashForComponent = {};
-
- var prop;
- for (prop in hash) {
- if (prop === '_boundComponentOptions' || prop === 'componentNameStream') { continue; }
- hashForComponent[prop] = hash[prop];
- }
-
- var props = {};
- mergeViewBindings(this, props, hashForComponent);
- return this.createChildView(componentClass, props);
- }
-});
diff --git a/packages/ember-views/lib/views/bound_if_view.js b/packages/ember-views/lib/views/bound_if_view.js
deleted file mode 100644
index 2c3ff90f1cf..00000000000
--- a/packages/ember-views/lib/views/bound_if_view.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import run from 'ember-metal/run_loop';
-import _MetamorphView from "ember-views/views/metamorph_view";
-import NormalizedRerenderIfNeededSupport from "ember-views/mixins/normalized_rerender_if_needed";
-import renderView from "ember-htmlbars/system/render-view";
-
-export default _MetamorphView.extend(NormalizedRerenderIfNeededSupport, {
- init() {
- this._super(...arguments);
-
- var self = this;
-
- this.conditionStream.subscribe(this._wrapAsScheduled(function() {
- run.scheduleOnce('render', self, 'rerenderIfNeeded');
- }));
- },
-
- normalizedValue() {
- return this.conditionStream.value();
- },
-
- render(buffer) {
- var result = this.conditionStream.value();
- this._lastNormalizedValue = result;
-
- var template = result ? this.truthyTemplate : this.falsyTemplate;
- renderView(this, buffer, template);
- }
-});
diff --git a/packages/ember-views/lib/views/bound_partial_view.js b/packages/ember-views/lib/views/bound_partial_view.js
deleted file mode 100644
index 9cdd53565bd..00000000000
--- a/packages/ember-views/lib/views/bound_partial_view.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
-@module ember
-@submodule ember-views
-*/
-
-import _MetamorphView from "ember-views/views/metamorph_view";
-import NormalizedRerenderIfNeededSupport from "ember-views/mixins/normalized_rerender_if_needed";
-import lookupPartial from "ember-views/system/lookup_partial";
-import run from 'ember-metal/run_loop';
-import renderView from "ember-htmlbars/system/render-view";
-import emptyTemplate from "ember-htmlbars/templates/empty";
-
-export default _MetamorphView.extend(NormalizedRerenderIfNeededSupport, {
- init() {
- this._super(...arguments);
-
- var self = this;
-
- this.templateNameStream.subscribe(this._wrapAsScheduled(function() {
- run.scheduleOnce('render', self, 'rerenderIfNeeded');
- }));
- },
-
- normalizedValue() {
- return this.templateNameStream.value();
- },
-
- render(buffer) {
- var templateName = this.normalizedValue();
- this._lastNormalizedValue = templateName;
-
- var template;
- if (templateName) {
- template = lookupPartial(this, templateName);
- }
-
- renderView(this, buffer, template || emptyTemplate);
- }
-});
diff --git a/packages/ember-views/lib/views/checkbox.js b/packages/ember-views/lib/views/checkbox.js
index 4a9a313721a..b29f0b3ceb8 100644
--- a/packages/ember-views/lib/views/checkbox.js
+++ b/packages/ember-views/lib/views/checkbox.js
@@ -31,6 +31,7 @@ import View from "ember-views/views/view";
@namespace Ember
@extends Ember.View
*/
+// 2.0TODO: Subclass Component rather than View
export default View.extend({
instrumentDisplay: '{{input type="checkbox"}}',
diff --git a/packages/ember-views/lib/views/collection_view.js b/packages/ember-views/lib/views/collection_view.js
index 350d18fc848..a1c875da612 100644
--- a/packages/ember-views/lib/views/collection_view.js
+++ b/packages/ember-views/lib/views/collection_view.js
@@ -5,19 +5,18 @@
*/
import Ember from "ember-metal/core"; // Ember.assert
-import { isGlobalPath } from "ember-metal/binding";
+import ContainerView from "ember-views/views/container_view";
+import View from "ember-views/views/view";
+import EmberArray from "ember-runtime/mixins/array";
import { get } from "ember-metal/property_get";
import { set } from "ember-metal/property_set";
import { fmt } from "ember-runtime/system/string";
-import ContainerView from "ember-views/views/container_view";
-import CoreView from "ember-views/views/core_view";
-import View from "ember-views/views/view";
+import { computed } from "ember-metal/computed";
import {
observer,
beforeObserver
} from "ember-metal/mixin";
import { readViewFactory } from "ember-views/streams/utils";
-import EmberArray from "ember-runtime/mixins/array";
/**
`Ember.CollectionView` is an `Ember.View` descendent responsible for managing
@@ -308,23 +307,7 @@ var CollectionView = ContainerView.extend({
@param {Number} removed number of object to be removed from content
*/
arrayWillChange(content, start, removedCount) {
- // If the contents were empty before and this template collection has an
- // empty view remove it now.
- var emptyView = get(this, 'emptyView');
- if (emptyView && emptyView instanceof View) {
- emptyView.removeFromParent();
- }
-
- // Loop through child views that correspond with the removed items.
- // Note that we loop from the end of the array to the beginning because
- // we are mutating it as we go.
- var childViews = this._childViews;
- var childView, idx;
-
- for (idx = start + removedCount - 1; idx >= start; idx--) {
- childView = childViews[idx];
- childView.destroy();
- }
+ this.replace(start, removedCount, []);
},
/**
@@ -343,13 +326,13 @@ var CollectionView = ContainerView.extend({
*/
arrayDidChange(content, start, removed, added) {
var addedViews = [];
- var view, item, idx, len, itemViewClass, emptyView, itemViewProps;
+ var view, item, idx, len, itemViewClass, itemViewProps;
len = content ? get(content, 'length') : 0;
if (len) {
itemViewProps = this._itemViewProps || {};
- itemViewClass = get(this, 'itemViewClass');
+ itemViewClass = this.getAttr('itemViewClass') || get(this, 'itemViewClass');
itemViewClass = readViewFactory(itemViewClass, this.container);
@@ -361,11 +344,16 @@ var CollectionView = ContainerView.extend({
view = this.createChildView(itemViewClass, itemViewProps);
- if (this.blockParams > 0) {
- view._blockArguments = [item];
- }
- if (this.blockParams > 1) {
- view._blockArguments.push(view.getStream('_view.contentIndex'));
+ if (Ember.FEATURES.isEnabled('ember-htmlbars-each-with-index')) {
+ if (this.blockParams > 1) {
+ view._blockArguments = [item, view.getStream('_view.contentIndex')];
+ } else if (this.blockParams === 1) {
+ view._blockArguments = [item];
+ }
+ } else {
+ if (this.blockParams > 0) {
+ view._blockArguments = [item];
+ }
}
addedViews.push(view);
@@ -373,32 +361,15 @@ var CollectionView = ContainerView.extend({
this.replace(start, 0, addedViews);
- if (this.blockParams > 1) {
- var childViews = this._childViews;
- for (idx = start+added; idx < len; idx++) {
- view = childViews[idx];
- set(view, 'contentIndex', idx);
+ if (Ember.FEATURES.isEnabled('ember-htmlbars-each-with-index')) {
+ if (this.blockParams > 1) {
+ var childViews = this.childViews;
+ for (idx = start+added; idx < len; idx++) {
+ view = childViews[idx];
+ set(view, 'contentIndex', idx);
+ }
}
}
- } else {
- emptyView = get(this, 'emptyView');
-
- if (!emptyView) { return; }
-
- if ('string' === typeof emptyView && isGlobalPath(emptyView)) {
- emptyView = get(emptyView) || emptyView;
- }
-
- emptyView = this.createChildView(emptyView);
-
- addedViews.push(emptyView);
- set(this, 'emptyView', emptyView);
-
- if (CoreView.detect(emptyView)) {
- this._createdEmptyView = emptyView;
- }
-
- this.replace(start, 0, addedViews);
}
},
@@ -428,7 +399,58 @@ var CollectionView = ContainerView.extend({
}
return view;
- }
+ },
+
+ willRender: function() {
+ var attrs = this.attrs;
+ var itemProps = buildItemViewProps(this._itemViewTemplate, attrs);
+ this._itemViewProps = itemProps;
+ var childViews = get(this, 'childViews');
+
+ for (var i=0, l=childViews.length; i 0) {
- var changedViews = views.slice(start, start+removed);
- // transition to preRender before clearing parentView
- this.currentState.childViewsWillChange(this, views, start, removed);
- this.initializeViews(changedViews, null, null);
- }
- },
-
- removeChild(child) {
- this.removeObject(child);
- return this;
- },
-
- /**
- When a child view is added, make sure the DOM gets updated appropriately.
-
- If the view has already rendered an element, we tell the child view to
- create an element and insert it into the DOM. If the enclosing container
- view has already written to a buffer, but not yet converted that buffer
- into an element, we insert the string representation of the child into the
- appropriate place in the buffer.
-
- @private
- @method childViewsDidChange
- @param {Ember.Array} views the array of child views after the mutation has occurred
- @param {Number} start the start position of the mutation
- @param {Number} removed the number of child views removed
- @param {Number} added the number of child views added
- */
- childViewsDidChange(views, start, removed, added) {
- if (added > 0) {
- var changedViews = views.slice(start, start+added);
- this.initializeViews(changedViews, this);
- this.currentState.childViewsDidChange(this, views, start, added);
- }
- this.propertyDidChange('childViews');
- },
-
- initializeViews(views, parentView) {
- forEach(views, function(view) {
- set(view, '_parentView', parentView);
-
- if (!view.container && parentView) {
- set(view, 'container', parentView.container);
- }
- });
- },
-
- currentView: null,
-
_currentViewWillChange: beforeObserver('currentView', function() {
var currentView = get(this, 'currentView');
if (currentView) {
@@ -356,53 +233,53 @@ var ContainerView = View.extend(MutableArray, {
_currentViewDidChange: observer('currentView', function() {
var currentView = get(this, 'currentView');
if (currentView) {
- Ember.assert("You tried to set a current view that already has a parent. Make sure you don't have multiple outlets in the same view.", !currentView._parentView);
+ Ember.assert("You tried to set a current view that already has a parent. Make sure you don't have multiple outlets in the same view.", !currentView.parentView);
this.pushObject(currentView);
}
}),
- _ensureChildrenAreInDOM() {
- this.currentState.ensureChildrenAreInDOM(this);
- }
-});
+ layout: containerViewTemplate,
-merge(states._default, {
- childViewsWillChange: K,
- childViewsDidChange: K,
- ensureChildrenAreInDOM: K
-});
+ replace(idx, removedCount, addedViews=[]) {
+ var addedCount = get(addedViews, 'length');
+ var childViews = get(this, 'childViews');
-merge(states.inBuffer, {
- childViewsDidChange(parentView, views, start, added) {
- throw new EmberError('You cannot modify child views while in the inBuffer state');
- }
-});
+ Ember.assert("You can't add a child to a container - the child is already a child of another view", () => {
+ for (var i=0, l=addedViews.length; i this.unlinkChild(view));
+ forEach(addedViews, view => this.linkChild(view));
+
+ childViews.splice(idx, removedCount, ...addedViews);
+
+ this.notifyPropertyChange('childViews');
+ this.arrayContentDidChange(idx, removedCount, addedCount);
- ensureChildrenAreInDOM(view) {
- var childViews = view._childViews;
- var renderer = view._renderer;
+ //Ember.assert("You can't add a child to a container - the child is already a child of another view", emberA(addedViews).every(function(item) { return !item.parentView || item.parentView === self; }));
- var refMorph = null;
- for (var i = childViews.length-1; i >= 0; i--) {
- var childView = childViews[i];
- if (!childView._elementCreated) {
- renderer.renderTree(childView, view, refMorph);
- }
- refMorph = childView._morph;
- }
+ set(this, 'length', childViews.length);
+
+ return this;
+ },
+
+ objectAt(idx) {
+ return get(this, 'childViews')[idx];
}
});
diff --git a/packages/ember-views/lib/views/core_view.js b/packages/ember-views/lib/views/core_view.js
index 059920b707c..f465cf0d1d7 100644
--- a/packages/ember-views/lib/views/core_view.js
+++ b/packages/ember-views/lib/views/core_view.js
@@ -1,5 +1,4 @@
-import Renderer from "ember-views/system/renderer";
-import DOMHelper from "dom-helper";
+import Renderer from "ember-metal-views/renderer";
import {
cloneStates,
@@ -10,7 +9,9 @@ import Evented from "ember-runtime/mixins/evented";
import ActionHandler from "ember-runtime/mixins/action_handler";
import { get } from "ember-metal/property_get";
-import { computed } from "ember-metal/computed";
+
+import { typeOf } from "ember-runtime/utils";
+import { internal } from "htmlbars-runtime";
function K() { return this; }
@@ -38,7 +39,6 @@ var renderer;
*/
var CoreView = EmberObject.extend(Evented, ActionHandler, {
isView: true,
- isVirtual: false,
_states: cloneStates(states),
@@ -51,9 +51,13 @@ var CoreView = EmberObject.extend(Evented, ActionHandler, {
// Fallback for legacy cases where the view was created directly
// via `create()` instead of going through the container.
if (!this.renderer) {
+ var DOMHelper = domHelper();
renderer = renderer || new Renderer(new DOMHelper());
this.renderer = renderer;
}
+
+ this.isDestroyingSubtree = false;
+ this._dispatching = null;
},
/**
@@ -64,29 +68,10 @@ var CoreView = EmberObject.extend(Evented, ActionHandler, {
@type Ember.View
@default null
*/
- parentView: computed('_parentView', function() {
- var parent = this._parentView;
-
- if (parent && parent.isVirtual) {
- return get(parent, 'parentView');
- } else {
- return parent;
- }
- }),
+ parentView: null,
_state: null,
- _parentView: null,
-
- // return the current view, not including virtual views
- concreteView: computed('parentView', function() {
- if (!this.isVirtual) {
- return this;
- } else {
- return get(this, 'parentView.concreteView');
- }
- }),
-
instrumentName: 'core_view',
instrumentDetails(hash) {
@@ -118,28 +103,26 @@ var CoreView = EmberObject.extend(Evented, ActionHandler, {
},
has(name) {
- return typeof this[name] === 'function' || this._super(name);
+ return typeOf(this[name]) === 'function' || this._super(name);
},
destroy() {
- var parent = this._parentView;
+ var parent = this.parentView;
if (!this._super(...arguments)) { return; }
+ this.currentState.cleanup(this);
- // destroy the element -- this will avoid each child view destroying
- // the element over and over again...
- if (!this.removedFromDOM && this._renderer) {
- this._renderer.remove(this, true);
+ if (!this.ownerView.isDestroyingSubtree) {
+ this.ownerView.isDestroyingSubtree = true;
+ if (parent) { parent.removeChild(this); }
+ if (this.renderNode) {
+ Ember.assert("BUG: Render node exists without concomitant env.", this.ownerView.env);
+ internal.clearMorph(this.renderNode, this.ownerView.env, true);
+ }
+ this.ownerView.isDestroyingSubtree = false;
}
- // remove from parent if found. Don't call removeFromParent,
- // as removeFromParent will try to remove the element from
- // the DOM again.
- if (parent) { parent.removeChild(this); }
-
- this._transitionTo('destroying', false);
-
return this;
},
@@ -159,4 +142,9 @@ export var DeprecatedCoreView = CoreView.extend({
}
});
+var _domHelper;
+function domHelper() {
+ return _domHelper = _domHelper || Ember.__loader.require("ember-htmlbars/system/dom-helper")['default'];
+}
+
export default CoreView;
diff --git a/packages/ember-views/lib/views/each.js b/packages/ember-views/lib/views/each.js
deleted file mode 100644
index e6427c62641..00000000000
--- a/packages/ember-views/lib/views/each.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import Ember from "ember-metal/core";
-import { fmt } from "ember-runtime/system/string";
-import { get } from "ember-metal/property_get";
-import { set } from "ember-metal/property_set";
-import CollectionView from "ember-views/views/collection_view";
-import { Binding } from "ember-metal/binding";
-import ControllerMixin from "ember-runtime/mixins/controller";
-import ArrayController from "ember-runtime/controllers/array_controller";
-import EmberArray from "ember-runtime/mixins/array";
-
-import {
- addObserver,
- removeObserver,
- addBeforeObserver,
- removeBeforeObserver
-} from "ember-metal/observer";
-
-import _MetamorphView from "ember-views/views/metamorph_view";
-import {
- _Metamorph
-} from "ember-views/views/metamorph_view";
-
-export default CollectionView.extend(_Metamorph, {
-
- init() {
- var itemController = get(this, 'itemController');
- var binding;
-
- if (itemController) {
- var controller = get(this, 'controller.container').lookupFactory('controller:array').create({
- _isVirtual: true,
- parentController: get(this, 'controller'),
- itemController: itemController,
- target: get(this, 'controller'),
- _eachView: this
- });
-
- this.disableContentObservers(function() {
- set(this, 'content', controller);
- binding = new Binding('content', '_eachView.dataSource').oneWay();
- binding.connect(controller);
- });
-
- this._arrayController = controller;
- } else {
- this.disableContentObservers(function() {
- binding = new Binding('content', 'dataSource').oneWay();
- binding.connect(this);
- });
- }
-
- return this._super.apply(this, arguments);
- },
-
- _assertArrayLike(content) {
- Ember.assert(fmt("The value that #each loops over must be an Array. You " +
- "passed %@, but it should have been an ArrayController",
- [content.constructor]),
- !ControllerMixin.detect(content) ||
- (content && content.isGenerated) ||
- content instanceof ArrayController);
- Ember.assert(fmt("The value that #each loops over must be an Array. You passed %@",
- [(ControllerMixin.detect(content) &&
- content.get('model') !== undefined) ?
- fmt("'%@' (wrapped in %@)", [content.get('model'), content]) : content]),
- EmberArray.detect(content));
- },
-
- disableContentObservers(callback) {
- removeBeforeObserver(this, 'content', null, '_contentWillChange');
- removeObserver(this, 'content', null, '_contentDidChange');
-
- callback.call(this);
-
- addBeforeObserver(this, 'content', null, '_contentWillChange');
- addObserver(this, 'content', null, '_contentDidChange');
- },
-
- itemViewClass: _MetamorphView,
- emptyViewClass: _MetamorphView,
-
- createChildView(_view, attrs) {
- var view = this._super(_view, attrs);
-
- var content = get(view, 'content');
- var keyword = get(this, 'keyword');
-
- if (keyword) {
- view._keywords[keyword] = content;
- }
-
- // If {{#each}} is looping over an array of controllers,
- // point each child view at their respective controller.
- if (content && content.isController) {
- set(view, 'controller', content);
- }
-
- return view;
- },
-
- destroy() {
- if (!this._super.apply(this, arguments)) { return; }
-
- if (this._arrayController) {
- this._arrayController.destroy();
- }
-
- return this;
- }
-});
diff --git a/packages/ember-views/lib/views/legacy_each_view.js b/packages/ember-views/lib/views/legacy_each_view.js
new file mode 100644
index 00000000000..02511dc3dfe
--- /dev/null
+++ b/packages/ember-views/lib/views/legacy_each_view.js
@@ -0,0 +1,50 @@
+//2.0TODO: Remove this in 2.0
+//This is a fallback path for the `{{#each}}` helper that supports deprecated
+//behavior such as itemController.
+
+import legacyEachTemplate from "ember-htmlbars/templates/legacy-each";
+import { get } from "ember-metal/property_get";
+import { set } from "ember-metal/property_set";
+import { computed } from "ember-metal/computed";
+import View from "ember-views/views/view";
+import { CONTAINER_MAP } from "ember-views/views/collection_view";
+
+export default View.extend({
+ template: legacyEachTemplate,
+
+ _arrayController: computed(function() {
+ var itemController = this.getAttr('itemController');
+ var controller = get(this, 'container').lookupFactory('controller:array').create({
+ _isVirtual: true,
+ parentController: get(this, 'controller'),
+ itemController: itemController,
+ target: get(this, 'controller'),
+ _eachView: this,
+ content: this.getAttr('content')
+ });
+
+ return controller;
+ }),
+
+ willUpdate(attrs) {
+ let itemController = this.getAttrFor(attrs, 'itemController');
+
+ if (itemController) {
+ let arrayController = get(this, '_arrayController');
+ set(arrayController, 'content', this.getAttrFor(attrs, 'content'));
+ }
+ },
+
+ _arrangedContent: computed('attrs.content', function() {
+ if (this.getAttr('itemController')) {
+ return get(this, '_arrayController');
+ }
+
+ return this.getAttr('content');
+ }),
+
+ _itemTagName: computed(function() {
+ var tagName = get(this, 'tagName');
+ return CONTAINER_MAP[tagName];
+ })
+});
diff --git a/packages/ember-views/lib/views/select.js b/packages/ember-views/lib/views/select.js
index 278f4a513a0..2135b3b2c93 100644
--- a/packages/ember-views/lib/views/select.js
+++ b/packages/ember-views/lib/views/select.js
@@ -14,7 +14,6 @@ import {
import { get } from "ember-metal/property_get";
import { set } from "ember-metal/property_set";
import View from "ember-views/views/view";
-import CollectionView from "ember-views/views/collection_view";
import { isArray } from "ember-runtime/utils";
import isNone from 'ember-metal/is_none';
import { computed } from "ember-metal/computed";
@@ -24,6 +23,7 @@ import { defineProperty } from "ember-metal/properties";
import htmlbarsTemplate from "ember-htmlbars/templates/select";
import selectOptionDefaultTemplate from "ember-htmlbars/templates/select-option";
+import selectOptgroupDefaultTemplate from "ember-htmlbars/templates/select-optgroup";
var defaultTemplate = htmlbarsTemplate;
@@ -35,48 +35,42 @@ var SelectOption = View.extend({
defaultTemplate: selectOptionDefaultTemplate,
- init() {
+ content: null,
+
+ willRender() {
this.labelPathDidChange();
this.valuePathDidChange();
-
- this._super(...arguments);
},
selected: computed(function() {
var value = get(this, 'value');
- var selection = get(this, 'parentView.selection');
- if (get(this, 'parentView.multiple')) {
+ var selection = get(this, 'attrs.selection');
+ if (get(this, 'attrs.multiple')) {
return selection && indexOf(selection, value) > -1;
} else {
// Primitives get passed through bindings as objects... since
// `new Number(4) !== 4`, we use `==` below
- return value === get(this, 'parentView.value');
+ return value === get(this, 'attrs.parentValue');
}
- }).property('content', 'parentView.selection'),
+ }).property('attrs.content', 'attrs.selection'),
- labelPathDidChange: observer('parentView.optionLabelPath', function() {
- var labelPath = get(this, 'parentView.optionLabelPath');
+ labelPathDidChange: observer('attrs.optionLabelPath', function() {
+ var labelPath = get(this, 'attrs.optionLabelPath');
defineProperty(this, 'label', computed.alias(labelPath));
}),
- valuePathDidChange: observer('parentView.optionValuePath', function() {
- var valuePath = get(this, 'parentView.optionValuePath');
+ valuePathDidChange: observer('attrs.optionValuePath', function() {
+ var valuePath = get(this, 'attrs.optionValuePath');
defineProperty(this, 'value', computed.alias(valuePath));
})
});
-var SelectOptgroup = CollectionView.extend({
+var SelectOptgroup = View.extend({
instrumentDisplay: 'Ember.SelectOptgroup',
tagName: 'optgroup',
- attributeBindings: ['label'],
-
- selectionBinding: 'parentView.selection',
- multipleBinding: 'parentView.multiple',
- optionLabelPathBinding: 'parentView.optionLabelPath',
- optionValuePathBinding: 'parentView.optionValuePath',
-
- itemViewClassBinding: 'parentView.optionView'
+ defaultTemplate: selectOptgroupDefaultTemplate,
+ attributeBindings: ['label']
});
/**
@@ -503,11 +497,11 @@ var Select = View.extend({
*/
optionView: SelectOption,
- _change() {
+ _change(hasDOM) {
if (get(this, 'multiple')) {
- this._changeMultiple();
+ this._changeMultiple(hasDOM);
} else {
- this._changeSingle();
+ this._changeSingle(hasDOM);
}
},
@@ -547,12 +541,13 @@ var Select = View.extend({
if (!isNone(selection)) { this.selectionDidChange(); }
if (!isNone(value)) { this.valueDidChange(); }
if (isNone(selection)) {
- this._change();
+ this._change(false);
}
},
- _changeSingle() {
- var selectedIndex = this.$()[0].selectedIndex;
+ _changeSingle(hasDOM) {
+ var value = this.get('value');
+ var selectedIndex = hasDOM !== false ? this.$()[0].selectedIndex : this._selectedIndex(value);
var content = get(this, 'content');
var prompt = get(this, 'prompt');
@@ -566,8 +561,21 @@ var Select = View.extend({
set(this, 'selection', content.objectAt(selectedIndex));
},
- _changeMultiple() {
- var options = this.$('option:selected');
+ _selectedIndex(value, defaultIndex = 0) {
+ var content = get(this, 'contentValues');
+
+ var selectionIndex = indexOf(content, value);
+
+ var prompt = get(this, 'prompt');
+ if (prompt) { selectionIndex += 1; }
+
+ if (selectionIndex < 0) { selectionIndex = defaultIndex; }
+
+ return selectionIndex;
+ },
+
+ _changeMultiple(hasDOM) {
+ var options = hasDOM !== false ? this.$('option:selected') : [];
var prompt = get(this, 'prompt');
var offset = prompt ? 1 : 0;
var content = get(this, 'content');
@@ -577,8 +585,8 @@ var Select = View.extend({
if (options) {
var selectedIndexes = options.map(function() {
return this.index - offset;
- }).toArray();
- var newSelection = content.objectsAt(selectedIndexes);
+ });
+ var newSelection = content.objectsAt([].slice.call(selectedIndexes));
if (isArray(selection)) {
replace(selection, 0, get(selection, 'length'), newSelection);
@@ -605,14 +613,9 @@ var Select = View.extend({
_setSelectedIndex(selectionValue) {
var el = get(this, 'element');
- var content = get(this, 'contentValues');
if (!el) { return; }
- var selectionIndex = indexOf(content, selectionValue);
- var prompt = get(this, 'prompt');
-
- if (prompt) { selectionIndex += 1; }
- if (el) { el.selectedIndex = selectionIndex; }
+ el.selectedIndex = this._selectedIndex(selectionValue, -1);
},
_valuePath: computed('optionValuePath', function () {
@@ -648,9 +651,12 @@ var Select = View.extend({
}
},
+ willRender() {
+ this._setDefaults();
+ },
+
init() {
this._super(...arguments);
- this.on("didInsertElement", this, this._setDefaults);
this.on("change", this, this._change);
}
});
diff --git a/packages/ember-views/lib/views/simple_bound_view.js b/packages/ember-views/lib/views/simple_bound_view.js
deleted file mode 100644
index cd1c3ac31ae..00000000000
--- a/packages/ember-views/lib/views/simple_bound_view.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
-@module ember
-@submodule ember-views
-*/
-
-import EmberError from "ember-metal/error";
-import run from "ember-metal/run_loop";
-import {
- GUID_KEY,
- uuid
-} from "ember-metal/utils";
-
-function K() { return this; }
-
-function SimpleBoundView(parentView, renderer, morph, stream) {
- this.stream = stream;
- this[GUID_KEY] = uuid();
- this._lastNormalizedValue = undefined;
- this.state = 'preRender';
- this.updateId = null;
- this._parentView = parentView;
- this.buffer = null;
- this._morph = morph;
- this.renderer = renderer;
-}
-
-SimpleBoundView.prototype = {
- isVirtual: true,
- isView: true,
- tagName: '',
-
- destroy() {
- if (this.updateId) {
- run.cancel(this.updateId);
- this.updateId = null;
- }
- if (this._parentView) {
- this._parentView.removeChild(this);
- }
- this.morph = null;
- this.state = 'destroyed';
- },
-
- propertyWillChange: K,
-
- propertyDidChange: K,
-
- normalizedValue() {
- var result = this.stream.value();
-
- if (result === null || result === undefined) {
- return "";
- } else {
- return result;
- }
- },
-
- render(buffer) {
- var value = this.normalizedValue();
- this._lastNormalizedValue = value;
- buffer._element = value;
- },
-
- rerender() {
- switch (this.state) {
- case 'preRender':
- case 'destroyed':
- break;
- case 'inBuffer':
- throw new EmberError("Something you did tried to replace an {{expression}} before it was inserted into the DOM.");
- case 'hasElement':
- case 'inDOM':
- this.updateId = run.scheduleOnce('render', this, 'update');
- break;
- }
- return this;
- },
-
- update() {
- this.updateId = null;
- var value = this.normalizedValue();
- // doesn't diff SafeString instances
- if (value !== this._lastNormalizedValue) {
- this._lastNormalizedValue = value;
- this._morph.setContent(value);
- }
- },
-
- _transitionTo(state) {
- this.state = state;
- }
-};
-
-SimpleBoundView.create = function(attrs) {
- return new SimpleBoundView(attrs._parentView, attrs.renderer, attrs._morph, attrs.stream);
-};
-
-SimpleBoundView.isViewClass = true;
-
-export function appendSimpleBoundView(parentView, morph, stream) {
- var view = parentView.appendChild(SimpleBoundView, { _morph: morph, stream: stream });
-
- stream.subscribe(parentView._wrapAsScheduled(function() {
- run.scheduleOnce('render', view, 'rerender');
- }));
-}
-
-export default SimpleBoundView;
diff --git a/packages/ember-views/lib/views/states.js b/packages/ember-views/lib/views/states.js
index 90350da4c76..96c76877e26 100644
--- a/packages/ember-views/lib/views/states.js
+++ b/packages/ember-views/lib/views/states.js
@@ -2,7 +2,6 @@ import create from 'ember-metal/platform/create';
import merge from "ember-metal/merge";
import _default from "ember-views/views/states/default";
import preRender from "ember-views/views/states/pre_render";
-import inBuffer from "ember-views/views/states/in_buffer";
import hasElement from "ember-views/views/states/has_element";
import inDOM from "ember-views/views/states/in_dom";
import destroying from "ember-views/views/states/destroying";
@@ -13,7 +12,6 @@ export function cloneStates(from) {
into._default = {};
into.preRender = create(into._default);
into.destroying = create(into._default);
- into.inBuffer = create(into._default);
into.hasElement = create(into._default);
into.inDOM = create(into.hasElement);
@@ -29,7 +27,6 @@ export var states = {
_default: _default,
preRender: preRender,
inDOM: inDOM,
- inBuffer: inBuffer,
hasElement: hasElement,
destroying: destroying
};
diff --git a/packages/ember-views/lib/views/states/default.js b/packages/ember-views/lib/views/states/default.js
index 9d62067062c..96f62a96034 100644
--- a/packages/ember-views/lib/views/states/default.js
+++ b/packages/ember-views/lib/views/states/default.js
@@ -23,14 +23,11 @@ export default {
return true; // continue event propagation
},
- destroyElement(view) {
- if (view._renderer) {
- view._renderer.remove(view, false);
- }
+ cleanup() { } ,
+ destroyElement() { },
- return view;
+ rerender(view) {
+ view.renderer.ensureViewNotRendering(view);
},
-
- rerender() {},
invokeObserver() { }
};
diff --git a/packages/ember-views/lib/views/states/has_element.js b/packages/ember-views/lib/views/states/has_element.js
index 1af3bb1b0b6..50cce8e4950 100644
--- a/packages/ember-views/lib/views/states/has_element.js
+++ b/packages/ember-views/lib/views/states/has_element.js
@@ -1,9 +1,7 @@
import _default from "ember-views/views/states/default";
-import run from "ember-metal/run_loop";
import merge from "ember-metal/merge";
import create from 'ember-metal/platform/create';
import jQuery from "ember-views/system/jquery";
-import EmberError from "ember-metal/error";
/**
@module ember
@@ -11,12 +9,13 @@ import EmberError from "ember-metal/error";
*/
import { get } from "ember-metal/property_get";
+import { internal } from "htmlbars-runtime";
var hasElement = create(_default);
merge(hasElement, {
$(view, sel) {
- var elem = view.get('concreteView').element;
+ var elem = view.element;
return sel ? jQuery(sel, elem) : jQuery(elem);
},
@@ -30,11 +29,22 @@ merge(hasElement, {
// once the view has been inserted into the DOM, rerendering is
// deferred to allow bindings to synchronize.
rerender(view) {
- if (view._root._morph && !view._elementInserted) {
- throw new EmberError('Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.');
- }
+ view.renderer.ensureViewNotRendering(view);
+
+ var renderNode = view.renderNode;
+
+ renderNode.isDirty = true;
+ internal.visitChildren(renderNode.childNodes, function(node) {
+ if (node.state && node.state.manager) {
+ node.shouldReceiveAttrs = true;
+ }
+ node.isDirty = true;
+ });
+ renderNode.ownerNode.emberView.scheduleRevalidate();
+ },
- run.scheduleOnce('render', view, '_rerender');
+ cleanup(view) {
+ view.currentState.destroyElement(view);
},
// once the view is already in the DOM, destroying it removes it
@@ -42,7 +52,7 @@ merge(hasElement, {
// preRender state if inDOM.
destroyElement(view) {
- view._renderer.remove(view, false);
+ view.renderer.remove(view, false);
return view;
},
diff --git a/packages/ember-views/lib/views/states/in_buffer.js b/packages/ember-views/lib/views/states/in_buffer.js
deleted file mode 100644
index 9852104af38..00000000000
--- a/packages/ember-views/lib/views/states/in_buffer.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import _default from "ember-views/views/states/default";
-import EmberError from "ember-metal/error";
-
-import jQuery from "ember-views/system/jquery";
-import create from 'ember-metal/platform/create';
-import merge from "ember-metal/merge";
-
-/**
-@module ember
-@submodule ember-views
-*/
-
-var inBuffer = create(_default);
-
-merge(inBuffer, {
- $(view, sel) {
- // if we don't have an element yet, someone calling this.$() is
- // trying to update an element that isn't in the DOM. Instead,
- // rerender the view to allow the render method to reflect the
- // changes.
- view.rerender();
- return jQuery();
- },
-
- // when a view is rendered in a buffer, rerendering it simply
- // replaces the existing buffer with a new one
- rerender(view) {
- throw new EmberError("Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.");
- },
-
- // when a view is rendered in a buffer, appending a child
- // view will render that view and append the resulting
- // buffer into its buffer.
- appendChild(view, childView, options) {
- var buffer = view.buffer;
- var _childViews = view._childViews;
-
- childView = view.createChildView(childView, options);
- if (!_childViews.length) { _childViews = view._childViews = _childViews.slice(); }
- _childViews.push(childView);
-
- if (!childView._morph) {
- buffer.pushChildView(childView);
- }
-
- view.propertyDidChange('childViews');
-
- return childView;
- },
-
- appendAttr(view, attrNode) {
- var buffer = view.buffer;
- var _attrNodes = view._attrNodes;
-
- if (!_attrNodes.length) { _attrNodes = view._attrNodes = _attrNodes.slice(); }
- _attrNodes.push(attrNode);
-
- if (!attrNode._morph) {
- Ember.assert("bound attributes that do not have a morph must have a buffer", !!buffer);
- buffer.pushAttrNode(attrNode);
- }
-
- view.propertyDidChange('childViews');
-
- return attrNode;
- },
-
- invokeObserver(target, observer) {
- observer.call(target);
- }
-});
-
-export default inBuffer;
diff --git a/packages/ember-views/lib/views/states/in_dom.js b/packages/ember-views/lib/views/states/in_dom.js
index cdeff5e9d84..47a6bcdd9d0 100644
--- a/packages/ember-views/lib/views/states/in_dom.js
+++ b/packages/ember-views/lib/views/states/in_dom.js
@@ -15,7 +15,7 @@ merge(inDOM, {
enter(view) {
// Register the view for event handling. This hash is used by
// Ember.EventDispatcher to dispatch incoming events.
- if (!view.isVirtual) {
+ if (view.tagName !== '') {
view._register();
}
@@ -27,18 +27,16 @@ merge(inDOM, {
},
exit(view) {
- if (!this.isVirtual) {
- view._unregister();
- }
+ view._unregister();
},
appendAttr(view, attrNode) {
- var _attrNodes = view._attrNodes;
+ var childViews = view.childViews;
- if (!_attrNodes.length) { _attrNodes = view._attrNodes = _attrNodes.slice(); }
- _attrNodes.push(attrNode);
+ if (!childViews.length) { childViews = view.childViews = childViews.slice(); }
+ childViews.push(attrNode);
- attrNode._parentView = view;
+ attrNode.parentView = view;
view.renderer.appendAttrTo(attrNode, view.element, attrNode.attrName);
view.propertyDidChange('childViews');
diff --git a/packages/ember-views/lib/views/text_area.js b/packages/ember-views/lib/views/text_area.js
index 7653f4c9055..d50ba19c048 100644
--- a/packages/ember-views/lib/views/text_area.js
+++ b/packages/ember-views/lib/views/text_area.js
@@ -1,12 +1,9 @@
-
/**
@module ember
@submodule ember-views
*/
-import { get } from "ember-metal/property_get";
import Component from "ember-views/views/component";
import TextSupport from "ember-views/mixins/text_support";
-import { observer } from "ember-metal/mixin";
/**
The internal class used to create textarea element when the `{{textarea}}`
@@ -39,22 +36,9 @@ export default Component.extend(TextSupport, {
'selectionStart',
'wrap',
'lang',
- 'dir'
+ 'dir',
+ 'value'
],
rows: null,
- cols: null,
-
- _updateElementValue: observer('value', function() {
- // We do this check so cursor position doesn't get affected in IE
- var value = get(this, 'value');
- var $el = this.$();
- if ($el && value !== $el.val()) {
- $el.val(value);
- }
- }),
-
- init() {
- this._super(...arguments);
- this.on("didInsertElement", this, this._updateElementValue);
- }
+ cols: null
});
diff --git a/packages/ember-views/lib/views/view.js b/packages/ember-views/lib/views/view.js
index 5105c8a2a8e..40f6a013e3d 100644
--- a/packages/ember-views/lib/views/view.js
+++ b/packages/ember-views/lib/views/view.js
@@ -14,21 +14,14 @@ import { guidFor } from "ember-metal/utils";
import { computed } from "ember-metal/computed";
import {
Mixin,
- observer,
- beforeObserver
+ observer
} from "ember-metal/mixin";
import { deprecateProperty } from "ember-metal/deprecate_property";
-import {
- propertyWillChange,
- propertyDidChange
-} from "ember-metal/property_events";
import jQuery from "ember-views/system/jquery";
import "ember-views/system/ext"; // for the side effect of extending Ember.run.queues
import CoreView from "ember-views/views/core_view";
-import ViewStreamSupport from "ember-views/mixins/view_stream_support";
-import ViewKeywordSupport from "ember-views/mixins/view_keyword_support";
import ViewContextSupport from "ember-views/mixins/view_context_support";
import ViewChildViewsSupport from "ember-views/mixins/view_child_views_support";
import {
@@ -37,10 +30,10 @@ import {
import ViewStateSupport from "ember-views/mixins/view_state_support";
import TemplateRenderingSupport from "ember-views/mixins/template_rendering_support";
import ClassNamesSupport from "ember-views/mixins/class_names_support";
-import AttributeBindingsSupport from "ember-views/mixins/attribute_bindings_support";
import LegacyViewSupport from "ember-views/mixins/legacy_view_support";
import InstrumentationSupport from "ember-views/mixins/instrumentation_support";
import VisibilitySupport from "ember-views/mixins/visibility_support";
+import CompatAttrsProxy from "ember-views/compat/attrs-proxy";
function K() { return this; }
@@ -677,17 +670,16 @@ var EMPTY_ARRAY = [];
*/
// jscs:disable validateIndentation
var View = CoreView.extend(
- ViewStreamSupport,
- ViewKeywordSupport,
ViewContextSupport,
ViewChildViewsSupport,
ViewStateSupport,
TemplateRenderingSupport,
ClassNamesSupport,
- AttributeBindingsSupport,
LegacyViewSupport,
InstrumentationSupport,
- VisibilitySupport, {
+ VisibilitySupport,
+ CompatAttrsProxy, {
+ concatenatedProperties: ['attributeBindings'],
/**
@property isView
@@ -784,7 +776,7 @@ var View = CoreView.extend(
if (template) {
if (template.isHTMLBars) {
- return template.render(context, options, morph.contextualElement);
+ return template.render(context, options, { contextualElement: morph.contextualElement }).fragment;
} else {
return template(context, options);
}
@@ -817,24 +809,6 @@ var View = CoreView.extend(
this.rerender();
}),
- // When it's a virtual view, we need to notify the parent that their
- // childViews will change.
- _childViewsWillChange: beforeObserver('childViews', function() {
- if (this.isVirtual) {
- var parentView = get(this, 'parentView');
- if (parentView) { propertyWillChange(parentView, 'childViews'); }
- }
- }),
-
- // When it's a virtual view, we need to notify the parent that their
- // childViews did change.
- _childViewsDidChange: observer('childViews', function() {
- if (this.isVirtual) {
- var parentView = get(this, 'parentView');
- if (parentView) { propertyDidChange(parentView, 'childViews'); }
- }
- }),
-
/**
Return the nearest ancestor that is an instance of the provided
class or mixin.
@@ -872,33 +846,6 @@ var View = CoreView.extend(
}
},
- /**
- When the parent view changes, recursively invalidate `controller`
-
- @method _parentViewDidChange
- @private
- */
- _parentViewDidChange: observer('_parentView', function() {
- if (this.isDestroying) { return; }
-
- this._setupKeywords();
- this.trigger('parentViewDidChange');
-
- if (get(this, 'parentView.controller') && !get(this, 'controller')) {
- this.notifyPropertyChange('controller');
- }
- }),
-
- _controllerDidChange: observer('controller', function() {
- if (this.isDestroying) { return; }
-
- this.rerender();
-
- this.forEachChildView(function(view) {
- view.propertyDidChange('controller');
- });
- }),
-
/**
Renders the view again. This will work regardless of whether the
view is already in the DOM or not. If the view is in the DOM, the
@@ -929,7 +876,7 @@ var View = CoreView.extend(
return;
}
- this._renderer.renderTree(this, this._parentView);
+ this._renderer.renderTree(this, this.parentView);
},
/**
@@ -977,7 +924,7 @@ var View = CoreView.extend(
},
forEachChildView(callback) {
- var childViews = this._childViews;
+ var childViews = this.childViews;
if (!childViews) { return this; }
@@ -1132,6 +1079,9 @@ var View = CoreView.extend(
// In the interim, we will just re-render if that happens. It is more
// important than elements get garbage collected.
if (!this.removedFromDOM) { this.destroyElement(); }
+
+ // Set flag to avoid future renders
+ this._willInsert = false;
},
/**
@@ -1193,8 +1143,7 @@ var View = CoreView.extend(
createElement() {
if (this.element) { return this; }
- this._didCreateElementWithoutMorph = true;
- this.renderer.renderTree(this);
+ this.renderer.createElement(this);
return this;
},
@@ -1268,30 +1217,6 @@ var View = CoreView.extend(
*/
parentViewDidChange: K,
- applyAttributesToBuffer(buffer) {
- // Creates observers for all registered class name and attribute bindings,
- // then adds them to the element.
-
- this._applyClassNameBindings();
-
- // Pass the render buffer so the method can apply attributes directly.
- // This isn't needed for class name bindings because they use the
- // existing classNames infrastructure.
- this._applyAttributeBindings(buffer);
-
- buffer.setClasses(this.classNames);
- buffer.id(this.elementId);
-
- var role = get(this, 'ariaRole');
- if (role) {
- buffer.attr('role', role);
- }
-
- if (get(this, 'isVisible') === false) {
- buffer.style('display', 'none');
- }
- },
-
// ..........................................................
// STANDARD RENDER PROPERTIES
//
@@ -1312,6 +1237,14 @@ var View = CoreView.extend(
// the default case and a user-specified tag.
tagName: null,
+ /*
+ Used to specify a default tagName that can be overridden when extending
+ or invoking from a template.
+
+ @property _defaultTagName
+ @private
+ */
+
/**
The WAI-ARIA role of the control represented by this view. For example, a
button may have a role of type 'button', or a pane may have a role of
@@ -1327,6 +1260,43 @@ var View = CoreView.extend(
*/
ariaRole: null,
+ /**
+ Normally, Ember's component model is "write-only". The component takes a
+ bunch of attributes that it got passed in, and uses them to render its
+ template.
+
+ One nice thing about this model is that if you try to set a value to the
+ same thing as last time, Ember (through HTMLBars) will avoid doing any
+ work on the DOM.
+
+ This is not just a performance optimization. If an attribute has not
+ changed, it is important not to clobber the element's "hidden state".
+ For example, if you set an input's `value` to the same value as before,
+ it will clobber selection state and cursor position. In other words,
+ setting an attribute is not **always** idempotent.
+
+ This method provides a way to read an element's attribute and also
+ update the last value Ember knows about at the same time. This makes
+ setting an attribute idempotent.
+
+ In particular, what this means is that if you get an `` element's
+ `value` attribute and then re-render the template with the same value,
+ it will avoid clobbering the cursor and selection position.
+
+ Since most attribute sets are idempotent in the browser, you typically
+ can get away with reading attributes using jQuery, but the most reliable
+ way to do so is through this method.
+
+ @method readDOMAttr
+ @param {String} name the name of the attribute
+ @return String
+ */
+ readDOMAttr(name) {
+ let attr = this.renderNode.childNodes.filter(node => node.attrName === name)[0];
+ if (!attr) { return null; }
+ return attr.getContent();
+ },
+
// .......................................................
// CORE DISPLAY METHODS
//
@@ -1342,10 +1312,12 @@ var View = CoreView.extend(
@private
*/
init() {
- if (!this.isVirtual && !this.elementId) {
+ if (!this.elementId) {
this.elementId = guidFor(this);
}
+ this.scheduledRevalidation = false;
+
this._super(...arguments);
if (!this._viewRegistry) {
@@ -1357,10 +1329,26 @@ var View = CoreView.extend(
this[property.name] = property.descriptor.value;
},
- appendAttr(node) {
- return this.currentState.appendAttr(this, node);
+ revalidate() {
+ this.renderer.revalidateTopLevelView(this);
+ this.scheduledRevalidation = false;
+ },
+
+ scheduleRevalidate() {
+ Ember.deprecate(`A property of ${this} was modified inside the ${this._dispatching} hook. You should never change properties on components, services or models during ${this._dispatching} because it causes significant performance degradation.`, !this._dispatching);
+
+ if (!this.scheduledRevalidation || this._dispatching) {
+ this.scheduledRevalidation = true;
+ run.scheduleOnce('render', this, this.revalidate);
+ }
},
+ appendAttr(node, buffer) {
+ return this.currentState.appendAttr(this, node, buffer);
+ },
+
+ templateRenderer: null,
+
/**
Removes the view from its `parentView`, if one is found. Otherwise
does nothing.
@@ -1369,7 +1357,7 @@ var View = CoreView.extend(
@return {Ember.View} receiver
*/
removeFromParent() {
- var parent = this._parentView;
+ var parent = this.parentView;
// Remove DOM element from parent
this.remove();
@@ -1388,14 +1376,19 @@ var View = CoreView.extend(
*/
destroy() {
// get parentView before calling super because it'll be destroyed
- var nonVirtualParentView = get(this, 'parentView');
+ var parentView = this.parentView;
var viewName = this.viewName;
if (!this._super(...arguments)) { return; }
// remove from non-virtual parent view if viewName was specified
- if (viewName && nonVirtualParentView) {
- nonVirtualParentView.set(viewName, null);
+ if (viewName && parentView) {
+ parentView.set(viewName, null);
+ }
+
+ // Destroy HTMLbars template
+ if (this.lastResult) {
+ this.lastResult.destroy();
}
return this;
@@ -1536,6 +1529,7 @@ View.views = {};
// method.
View.childViewsProperty = childViewsProperty;
+
export default View;
-export { ViewKeywordSupport, ViewStreamSupport, ViewContextSupport, ViewChildViewsSupport, ViewStateSupport, TemplateRenderingSupport, ClassNamesSupport, AttributeBindingsSupport };
+export { ViewContextSupport, ViewChildViewsSupport, ViewStateSupport, TemplateRenderingSupport, ClassNamesSupport };
diff --git a/packages/ember-views/lib/views/with_view.js b/packages/ember-views/lib/views/with_view.js
deleted file mode 100644
index ab77a18bd8e..00000000000
--- a/packages/ember-views/lib/views/with_view.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
-@module ember
-@submodule ember-views
-*/
-
-import { set } from "ember-metal/property_set";
-import _MetamorphView from "ember-views/views/metamorph_view";
-import NormalizedRerenderIfNeededSupport from "ember-views/mixins/normalized_rerender_if_needed";
-import run from 'ember-metal/run_loop';
-import renderView from "ember-htmlbars/system/render-view";
-
-export default _MetamorphView.extend(NormalizedRerenderIfNeededSupport, {
- init() {
- this._super(...arguments);
-
- var self = this;
-
- this.withValue.subscribe(this._wrapAsScheduled(function() {
- run.scheduleOnce('render', self, 'rerenderIfNeeded');
- }));
-
- var controllerName = this.controllerName;
- if (controllerName) {
- var controllerFactory = this.container.lookupFactory('controller:'+controllerName);
- var controller = controllerFactory.create({
- parentController: this.previousContext,
- target: this.previousContext
- });
-
- this._generatedController = controller;
-
- if (this.preserveContext) {
- this._blockArguments = [controller];
- this.withValue.subscribe(function(modelStream) {
- set(controller, 'model', modelStream.value());
- });
- } else {
- set(this, 'controller', controller);
- }
-
- set(controller, 'model', this.withValue.value());
- } else {
- if (this.preserveContext) {
- this._blockArguments = [this.withValue];
- }
- }
- },
-
- normalizedValue() {
- return this.withValue.value();
- },
-
- render(buffer) {
- var withValue = this.normalizedValue();
- this._lastNormalizedValue = withValue;
-
- if (!this.preserveContext && !this.controllerName) {
- set(this, '_context', withValue);
- }
-
- var template = withValue ? this.mainTemplate : this.inverseTemplate;
- renderView(this, buffer, template);
- },
-
- willDestroy() {
- this._super(...arguments);
-
- if (this._generatedController) {
- this._generatedController.destroy();
- }
- }
-});
diff --git a/packages/ember-views/tests/compat/attrs_proxy_test.js b/packages/ember-views/tests/compat/attrs_proxy_test.js
new file mode 100644
index 00000000000..b4735a4b5d4
--- /dev/null
+++ b/packages/ember-views/tests/compat/attrs_proxy_test.js
@@ -0,0 +1,34 @@
+import View from "ember-views/views/view";
+import { runAppend, runDestroy } from "ember-runtime/tests/utils";
+import compile from "ember-template-compiler/system/compile";
+import Registry from "container/registry";
+
+var view, registry, container;
+
+QUnit.module("ember-views: attrs-proxy", {
+ setup() {
+ registry = new Registry();
+ container = registry.container();
+ },
+
+ teardown() {
+ runDestroy(view);
+ }
+});
+
+QUnit.test('works with properties setup in root of view', function() {
+ registry.register('view:foo', View.extend({
+ bar: 'qux',
+
+ template: compile('{{view.bar}}')
+ }));
+
+ view = View.extend({
+ container: registry.container(),
+ template: compile('{{view "foo" bar="baz"}}')
+ }).create();
+
+ runAppend(view);
+
+ equal(view.$().text(), 'baz', 'value specified in the template is used');
+});
diff --git a/packages/ember-views/tests/compat/metamorph_test.js b/packages/ember-views/tests/compat/metamorph_test.js
new file mode 100644
index 00000000000..7cb93bfd7d2
--- /dev/null
+++ b/packages/ember-views/tests/compat/metamorph_test.js
@@ -0,0 +1,16 @@
+import View from "ember-views/views/view";
+import _MetamorphView, { _Metamorph } from "ember-views/compat/metamorph_view";
+
+QUnit.module("ember-views: _Metamorph [DEPRECATED]");
+
+QUnit.test('Instantiating _MetamorphView triggers deprecation', function() {
+ expectDeprecation(function() {
+ View.extend(_Metamorph).create();
+ }, /Using Ember\._Metamorph is deprecated./);
+});
+
+QUnit.test('Instantiating _MetamorphView triggers deprecation', function() {
+ expectDeprecation(function() {
+ _MetamorphView.create();
+ }, /Using Ember\._MetamorphView is deprecated./);
+});
diff --git a/packages/ember-views/tests/system/render_buffer_test.js b/packages/ember-views/tests/compat/render_buffer_test.js
similarity index 98%
rename from packages/ember-views/tests/system/render_buffer_test.js
rename to packages/ember-views/tests/compat/render_buffer_test.js
index e0fdf4feaeb..67e22aeffa2 100644
--- a/packages/ember-views/tests/system/render_buffer_test.js
+++ b/packages/ember-views/tests/compat/render_buffer_test.js
@@ -1,14 +1,11 @@
import jQuery from "ember-views/system/jquery";
-import RenderBuffer from "ember-views/system/render_buffer";
+import RenderBuffer from "ember-views/compat/render_buffer";
import DOMHelper from "dom-helper";
var svgNamespace = "http://www.w3.org/2000/svg";
var xhtmlNamespace = "http://www.w3.org/1999/xhtml";
var trim = jQuery.trim;
-// .......................................................
-// render()
-//
QUnit.module("RenderBuffer");
var domHelper = new DOMHelper();
diff --git a/packages/ember-views/tests/compat/view_render_hook_test.js b/packages/ember-views/tests/compat/view_render_hook_test.js
new file mode 100644
index 00000000000..1617fba7336
--- /dev/null
+++ b/packages/ember-views/tests/compat/view_render_hook_test.js
@@ -0,0 +1,98 @@
+import { runAppend, runDestroy } from "ember-runtime/tests/utils";
+import compile from "ember-template-compiler/system/compile";
+import View from "ember-views/views/view";
+
+var view, parentView;
+
+QUnit.module("ember-views: View#render hook", {
+ teardown() {
+ runDestroy(view);
+ runDestroy(parentView);
+ }
+});
+
+QUnit.test('the render hook replaces a view if present', function(assert) {
+ var count = 0;
+ view = View.create({
+ template: compile('bob'),
+ render: function() {
+ count++;
+ }
+ });
+
+ runAppend(view);
+
+ assert.equal(count, 1, 'render called');
+ assert.equal(view.$().html(), '', 'template not rendered');
+});
+
+QUnit.test('the render hook can push HTML into the buffer once', function(assert) {
+ view = View.create({
+ render: function(buffer) {
+ buffer.push('Nancy');
+ }
+ });
+
+ runAppend(view);
+
+ assert.equal(view.$().html(), 'Nancy', 'buffer made DOM');
+});
+
+QUnit.test('the render hook can push HTML into the buffer on nested view', function(assert) {
+ view = View.create({
+ render: function(buffer) {
+ buffer.push('Nancy');
+ }
+ });
+ parentView = View.create({
+ childView: view,
+ template: compile('{{view view.childView}}')
+ });
+
+ runAppend(parentView);
+
+ assert.equal(view.$().html(), 'Nancy', 'buffer made DOM');
+});
+
+QUnit.test('the render hook can push arbitrary HTML into the buffer', function(assert) {
+ view = View.create({
+ render: function(buffer) {
+ buffer.push('');
+ buffer.push('Nancy');
+ }
+ });
+
+ runAppend(view);
+
+ assert.equal(view.$().html(), 'Nancy', 'buffer made DOM');
+});
+
+QUnit.test('the render hook can push HTML into the buffer on tagless view', function(assert) {
+ view = View.create({
+ tagName: '',
+ render: function(buffer) {
+ buffer.push('Nancy');
+ }
+ });
+
+ runAppend(view);
+
+ assert.equal(Ember.$('#qunit-fixture').html(), 'Nancy', 'buffer made DOM');
+});
+
+QUnit.test('the render hook can push HTML into the buffer on nested tagless view', function(assert) {
+ view = View.create({
+ tagName: '',
+ render: function(buffer) {
+ buffer.push('Nancy');
+ }
+ });
+ parentView = View.create({
+ childView: view,
+ template: compile('{{view view.childView}}')
+ });
+
+ runAppend(parentView);
+
+ assert.equal(parentView.$().html(), 'Nancy', 'buffer made DOM');
+});
diff --git a/packages/ember-views/tests/streams/class_string_for_value_test.js b/packages/ember-views/tests/streams/class_string_for_value_test.js
deleted file mode 100644
index 4cdf00d9d10..00000000000
--- a/packages/ember-views/tests/streams/class_string_for_value_test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { classStringForValue } from "ember-views/streams/class_name_binding";
-
-QUnit.module("EmberView - classStringForValue");
-
-QUnit.test("returns dasherized version of last path part if value is true", function() {
- equal(classStringForValue("propertyName", true), "property-name", "class is dasherized");
- equal(classStringForValue("content.propertyName", true), "property-name", "class is dasherized");
-});
-
-QUnit.test("returns className if value is true and className is specified", function() {
- equal(classStringForValue("propertyName", true, "truthyClass"), "truthyClass", "returns className if given");
- equal(classStringForValue("content.propertyName", true, "truthyClass"), "truthyClass", "returns className if given");
-});
-
-QUnit.test("returns falsyClassName if value is false and falsyClassName is specified", function() {
- equal(classStringForValue("propertyName", false, "truthyClass", "falsyClass"), "falsyClass", "returns falsyClassName if given");
- equal(classStringForValue("content.propertyName", false, "truthyClass", "falsyClass"), "falsyClass", "returns falsyClassName if given");
-});
-
-QUnit.test("returns null if value is false and falsyClassName is not specified", function() {
- equal(classStringForValue("propertyName", false, "truthyClass"), null, "returns null if falsyClassName is not specified");
- equal(classStringForValue("content.propertyName", false, "truthyClass"), null, "returns null if falsyClassName is not specified");
-});
-
-QUnit.test("returns null if value is false", function() {
- equal(classStringForValue("propertyName", false), null, "returns null if value is false");
- equal(classStringForValue("content.propertyName", false), null, "returns null if value is false");
-});
-
-QUnit.test("returns null if value is true and className is not specified and falsyClassName is specified", function() {
- equal(classStringForValue("propertyName", true, undefined, "falsyClassName"), null, "returns null if value is true");
- equal(classStringForValue("content.propertyName", true, undefined, "falsyClassName"), null, "returns null if value is true");
-});
-
-QUnit.test("returns the value if the value is truthy", function() {
- equal(classStringForValue("propertyName", "myString"), "myString", "returns value if the value is truthy");
- equal(classStringForValue("content.propertyName", "myString"), "myString", "returns value if the value is truthy");
-
- equal(classStringForValue("propertyName", "123"), 123, "returns value if the value is truthy");
- equal(classStringForValue("content.propertyName", 123), 123, "returns value if the value is truthy");
-});
-
-QUnit.test("treat empty array as falsy value and return null", function() {
- equal(classStringForValue("propertyName", [], "truthyClass"), null, "returns null if value is false");
- equal(classStringForValue("content.propertyName", [], "truthyClass"), null, "returns null if value is false");
-});
-
-QUnit.test("treat non-empty array as truthy value and return the className if specified", function() {
- equal(classStringForValue("propertyName", ['emberjs'], "truthyClass"), "truthyClass", "returns className if given");
- equal(classStringForValue("content.propertyName", ['emberjs'], "truthyClass"), "truthyClass", "returns className if given");
-});
diff --git a/packages/ember-views/tests/streams/parse_property_path_test.js b/packages/ember-views/tests/streams/parse_property_path_test.js
deleted file mode 100644
index ae0d5bd4838..00000000000
--- a/packages/ember-views/tests/streams/parse_property_path_test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { parsePropertyPath } from "ember-views/streams/class_name_binding";
-
-QUnit.module("EmberView - parsePropertyPath");
-
-QUnit.test("it works with a simple property path", function() {
- var parsed = parsePropertyPath("simpleProperty");
-
- equal(parsed.path, "simpleProperty", "path is parsed correctly");
- equal(parsed.className, undefined, "there is no className");
- equal(parsed.falsyClassName, undefined, "there is no falsyClassName");
- equal(parsed.classNames, "", "there is no classNames");
-});
-
-QUnit.test("it works with a more complex property path", function() {
- var parsed = parsePropertyPath("content.simpleProperty");
-
- equal(parsed.path, "content.simpleProperty", "path is parsed correctly");
- equal(parsed.className, undefined, "there is no className");
- equal(parsed.falsyClassName, undefined, "there is no falsyClassName");
- equal(parsed.classNames, "", "there is no classNames");
-});
-
-QUnit.test("className is extracted", function() {
- var parsed = parsePropertyPath("content.simpleProperty:class");
-
- equal(parsed.path, "content.simpleProperty", "path is parsed correctly");
- equal(parsed.className, "class", "className is extracted");
- equal(parsed.falsyClassName, undefined, "there is no falsyClassName");
- equal(parsed.classNames, ":class", "there is a classNames");
-});
-
-QUnit.test("falsyClassName is extracted", function() {
- var parsed = parsePropertyPath("content.simpleProperty:class:falsyClass");
-
- equal(parsed.path, "content.simpleProperty", "path is parsed correctly");
- equal(parsed.className, "class", "className is extracted");
- equal(parsed.falsyClassName, "falsyClass", "falsyClassName is extracted");
- equal(parsed.classNames, ":class:falsyClass", "there is a classNames");
-});
-
-QUnit.test("it works with an empty true class", function() {
- var parsed = parsePropertyPath("content.simpleProperty::falsyClass");
-
- equal(parsed.path, "content.simpleProperty", "path is parsed correctly");
- equal(parsed.className, undefined, "className is undefined");
- equal(parsed.falsyClassName, "falsyClass", "falsyClassName is extracted");
- equal(parsed.classNames, "::falsyClass", "there is a classNames");
-});
diff --git a/packages/ember-views/tests/system/event_dispatcher_test.js b/packages/ember-views/tests/system/event_dispatcher_test.js
index 4a7a52ce718..f5c7d962a49 100644
--- a/packages/ember-views/tests/system/event_dispatcher_test.js
+++ b/packages/ember-views/tests/system/event_dispatcher_test.js
@@ -7,6 +7,7 @@ import jQuery from "ember-views/system/jquery";
import View from "ember-views/views/view";
import EventDispatcher from "ember-views/system/event_dispatcher";
import ContainerView from "ember-views/views/container_view";
+import compile from "ember-template-compiler/system/compile";
var view;
var dispatcher;
@@ -34,9 +35,7 @@ QUnit.test("should dispatch events to views", function() {
var parentKeyDownCalled = 0;
var childView = View.createWithMixins({
- render(buffer) {
- buffer.push('ewot');
- },
+ template: compile('ewot'),
keyDown(evt) {
childKeyDownCalled++;
@@ -46,10 +45,8 @@ QUnit.test("should dispatch events to views", function() {
});
view = View.createWithMixins({
- render(buffer) {
- buffer.push('some awesome content');
- this.appendChild(childView);
- },
+ template: compile('some awesome content {{view view.childView}}'),
+ childView: childView,
mouseDown(evt) {
parentMouseDownCalled++;
@@ -88,10 +85,7 @@ QUnit.test("should not dispatch events to views not inDOM", function() {
var receivedEvent;
view = View.createWithMixins({
- render(buffer) {
- buffer.push('some awesome content');
- this._super(buffer);
- },
+ template: compile('some awesome content'),
mouseDown(evt) {
receivedEvent = evt;
@@ -104,9 +98,11 @@ QUnit.test("should not dispatch events to views not inDOM", function() {
var $element = view.$();
- // TODO change this test not to use private API
- // Force into preRender
- view._renderer.remove(view, false, true);
+ run(function() {
+ // TODO change this test not to use private API
+ // Force into preRender
+ view.renderer.remove(view, false, true);
+ });
$element.trigger('mousedown');
@@ -124,9 +120,7 @@ QUnit.test("should not dispatch events to views not inDOM", function() {
QUnit.test("should send change events up view hierarchy if view contains form elements", function() {
var receivedEvent;
view = View.create({
- render(buffer) {
- buffer.push('');
- },
+ template: compile(''),
change(evt) {
receivedEvent = evt;
@@ -152,9 +146,7 @@ QUnit.test("events should stop propagating if the view is destroyed", function()
});
view = parentView.createChildView(View, {
- render(buffer) {
- buffer.push('');
- },
+ template: compile(''),
change(evt) {
receivedEvent = true;
@@ -178,36 +170,10 @@ QUnit.test("events should stop propagating if the view is destroyed", function()
ok(!parentViewReceived, "parent view does not receive the event");
});
-QUnit.test('should not interfere with event propagation of virtualViews', function() {
- var receivedEvent;
-
- var view = View.create({
- isVirtual: true,
- render(buffer) {
- buffer.push('');
- }
- });
-
- run(function() {
- view.append();
- });
-
- jQuery(window).bind('click', function(evt) {
- receivedEvent = evt;
- });
-
- jQuery('#propagate-test-div').click();
-
- ok(receivedEvent, 'allowed event to propagate');
- deepEqual(receivedEvent && receivedEvent.target, jQuery('#propagate-test-div')[0], 'target property is the element that was clicked');
-});
-
QUnit.test("should dispatch events to nearest event manager", function() {
var receivedEvent=0;
- view = ContainerView.create({
- render(buffer) {
- buffer.push('');
- },
+ view = View.create({
+ template: compile(''),
eventManager: EmberObject.create({
mouseDown() {
diff --git a/packages/ember-views/tests/system/ext_test.js b/packages/ember-views/tests/system/ext_test.js
index 68cc1e65dd0..6c3b5e24e12 100644
--- a/packages/ember-views/tests/system/ext_test.js
+++ b/packages/ember-views/tests/system/ext_test.js
@@ -1,5 +1,6 @@
import run from "ember-metal/run_loop";
import View from "ember-views/views/view";
+import { compile } from "ember-template-compiler";
QUnit.module("Ember.View additions to run queue");
@@ -13,9 +14,8 @@ QUnit.test("View hierarchy is done rendering to DOM when functions queued in aft
});
var parentView = View.create({
elementId: 'parent_view',
- render(buffer) {
- this.appendChild(childView);
- },
+ template: compile("{{view view.childView}}"),
+ childView: childView,
didInsertElement() {
didInsert++;
}
diff --git a/packages/ember-views/tests/system/jquery_ext_test.js b/packages/ember-views/tests/system/jquery_ext_test.js
index 85bd6c37198..5d6260a2405 100644
--- a/packages/ember-views/tests/system/jquery_ext_test.js
+++ b/packages/ember-views/tests/system/jquery_ext_test.js
@@ -25,7 +25,7 @@ if (document.createEvent) {
};
}
-QUnit.module("EventDispatcher", {
+QUnit.module("EventDispatcher - jQuery integration", {
setup() {
run(function() {
dispatcher = EventDispatcher.create();
@@ -63,11 +63,6 @@ if (canDataTransfer) {
var dropCalled = 0;
view = View.createWithMixins({
- render(buffer) {
- buffer.push('please drop stuff on me');
- this._super(buffer);
- },
-
drop(evt) {
receivedEvent = evt;
dropCalled++;
diff --git a/packages/ember-views/tests/system/view_utils_test.js b/packages/ember-views/tests/system/view_utils_test.js
index 02bd68569c4..0a410c73364 100644
--- a/packages/ember-views/tests/system/view_utils_test.js
+++ b/packages/ember-views/tests/system/view_utils_test.js
@@ -39,11 +39,7 @@ QUnit.test("getViewClientRects", function() {
return;
}
- view = View.create({
- render(buffer) {
- buffer.push("Hello, world!");
- }
- });
+ view = View.create();
run(function() { view.appendTo('#qunit-fixture'); });
@@ -56,11 +52,7 @@ QUnit.test("getViewBoundingClientRect", function() {
return;
}
- view = View.create({
- render(buffer) {
- buffer.push("Hello, world!");
- }
- });
+ view = View.create();
run(function() { view.appendTo('#qunit-fixture'); });
diff --git a/packages/ember-views/tests/test-helpers/equal-html.js b/packages/ember-views/tests/test-helpers/equal-html.js
new file mode 100644
index 00000000000..0de88779423
--- /dev/null
+++ b/packages/ember-views/tests/test-helpers/equal-html.js
@@ -0,0 +1,24 @@
+export function equalHTML(element, expectedHTML, message) {
+ var html;
+ if (typeof element === 'string') {
+ html = document.getElementById(element).innerHTML;
+ } else {
+ if (element instanceof window.NodeList) {
+ var fragment = document.createElement('div');
+ while (element[0]) {
+ fragment.appendChild(element[0]);
+ }
+ html = fragment.innerHTML;
+ } else {
+ html = element.outerHTML;
+ }
+ }
+
+ var actualHTML = html.replace(/ id="[^"]+"/gmi, '');
+ actualHTML = actualHTML.replace(/<\/?([A-Z]+)/gi, function(tag) {
+ return tag.toLowerCase();
+ });
+ actualHTML = actualHTML.replace(/\r\n/gm, '');
+ actualHTML = actualHTML.replace(/ $/, '');
+ equal(actualHTML, expectedHTML, message || "HTML matches");
+}
diff --git a/packages/ember-views/tests/views/collection_test.js b/packages/ember-views/tests/views/collection_test.js
index 5ff284334a8..3a68216ce0e 100644
--- a/packages/ember-views/tests/views/collection_test.js
+++ b/packages/ember-views/tests/views/collection_test.js
@@ -1,6 +1,5 @@
import Ember from "ember-metal/core"; // Ember.A
import { set } from "ember-metal/property_set";
-import { get } from "ember-metal/property_get";
import run from "ember-metal/run_loop";
import { forEach } from "ember-metal/enumerable_utils";
import { Mixin } from "ember-metal/mixin";
@@ -10,9 +9,12 @@ import ArrayController from "ember-runtime/controllers/array_controller";
import jQuery from "ember-views/system/jquery";
import CollectionView from "ember-views/views/collection_view";
import View from "ember-views/views/view";
+import Registry from "container/registry";
+import compile from "ember-template-compiler/system/compile";
import getElementStyle from 'ember-views/tests/test-helpers/get-element-style';
var trim = jQuery.trim;
+var registry;
var view;
var originalLookup;
@@ -21,6 +23,7 @@ QUnit.module("CollectionView", {
setup() {
CollectionView.CONTAINER_MAP.del = 'em';
originalLookup = Ember.lookup;
+ registry = new Registry();
},
teardown() {
delete CollectionView.CONTAINER_MAP.del;
@@ -44,15 +47,29 @@ QUnit.test("should render a view for each item in its content array", function()
});
QUnit.test("should render the emptyView if content array is empty (view class)", function() {
+ view = CollectionView.create({
+ content: Ember.A(),
+
+ emptyView: View.extend({
+ template: compile("OY SORRY GUVNAH NO NEWS TODAY EH")
+ })
+ });
+
+ run(function() {
+ view.append();
+ });
+
+ ok(view.$().find('div:contains("OY SORRY GUVNAH")').length, "displays empty view");
+});
+
+QUnit.test("should render the emptyView if content array is empty (view class with custom tagName)", function() {
view = CollectionView.create({
tagName: 'del',
content: Ember.A(),
emptyView: View.extend({
tagName: 'kbd',
- render(buf) {
- buf.push("OY SORRY GUVNAH NO NEWS TODAY EH");
- }
+ template: compile("OY SORRY GUVNAH NO NEWS TODAY EH")
})
});
@@ -70,9 +87,7 @@ QUnit.test("should render the emptyView if content array is empty (view instance
emptyView: View.create({
tagName: 'kbd',
- render(buf) {
- buf.push("OY SORRY GUVNAH NO NEWS TODAY EH");
- }
+ template: compile("OY SORRY GUVNAH NO NEWS TODAY EH")
})
});
@@ -90,9 +105,7 @@ QUnit.test("should be able to override the tag name of itemViewClass even if tag
itemViewClass: View.extend({
tagName: 'kbd',
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -104,15 +117,12 @@ QUnit.test("should be able to override the tag name of itemViewClass even if tag
});
QUnit.test("should allow custom item views by setting itemViewClass", function() {
- var passedContents = [];
+ var content = Ember.A(['foo', 'bar', 'baz']);
view = CollectionView.create({
- content: Ember.A(['foo', 'bar', 'baz']),
+ content: content,
itemViewClass: View.extend({
- render(buf) {
- passedContents.push(get(this, 'content'));
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -120,9 +130,7 @@ QUnit.test("should allow custom item views by setting itemViewClass", function()
view.append();
});
- deepEqual(passedContents, ['foo', 'bar', 'baz'], "sets the content property on each item view");
-
- forEach(passedContents, function(item) {
+ forEach(content, function(item) {
equal(view.$(':contains("'+item+'")').length, 1);
});
});
@@ -134,9 +142,7 @@ QUnit.test("should insert a new item in DOM when an item is added to the content
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -162,9 +168,7 @@ QUnit.test("should remove an item from DOM when an item is removed from the cont
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -191,9 +195,7 @@ QUnit.test("it updates the view if an item is replaced", function() {
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -221,9 +223,7 @@ QUnit.test("can add and replace in the same runloop", function() {
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -253,9 +253,7 @@ QUnit.test("can add and replace the object before the add in the same runloop",
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -284,9 +282,7 @@ QUnit.test("can add and replace complicatedly", function() {
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -317,9 +313,7 @@ QUnit.test("can add and replace complicatedly harder", function() {
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
})
});
@@ -372,9 +366,7 @@ QUnit.test("should fire life cycle events when elements are added and removed",
view = CollectionView.create({
content: content,
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- },
+ template: compile('{{view.content}}'),
didInsertElement() {
didInsertElement++;
},
@@ -451,7 +443,7 @@ QUnit.test("should allow changing content property to be null", function() {
content: Ember.A([1, 2, 3]),
emptyView: View.extend({
- template() { return "(empty)"; }
+ template: compile("(empty)")
})
});
@@ -472,9 +464,7 @@ QUnit.test("should allow items to access to the CollectionView's current index i
view = CollectionView.create({
content: Ember.A(['zero', 'one', 'two']),
itemViewClass: View.extend({
- render(buf) {
- buf.push(get(this, 'contentIndex'));
- }
+ template: compile("{{view.contentIndex}}")
})
});
@@ -488,14 +478,10 @@ QUnit.test("should allow items to access to the CollectionView's current index i
});
QUnit.test("should allow declaration of itemViewClass as a string", function() {
- var container = {
- lookupFactory() {
- return Ember.View.extend();
- }
- };
+ registry.register('view:simple-view', Ember.View.extend());
view = CollectionView.create({
- container: container,
+ container: registry.container(),
content: Ember.A([1, 2, 3]),
itemViewClass: 'simple-view'
});
@@ -514,9 +500,7 @@ QUnit.test("should not render the emptyView if content is emptied and refilled i
emptyView: View.extend({
tagName: 'kbd',
- render(buf) {
- buf.push("OY SORRY GUVNAH NO NEWS TODAY EH");
- }
+ template: compile("OY SORRY GUVNAH NO NEWS TODAY EH")
})
});
@@ -566,22 +550,21 @@ QUnit.test("a array_proxy that backs an sorted array_controller that backs a col
});
QUnit.test("when a collection view is emptied, deeply nested views elements are not removed from the DOM and then destroyed again", function() {
+ var gotDestroyed = [];
+
var assertProperDestruction = Mixin.create({
- destroyElement() {
- if (this._state === 'inDOM') {
- ok(this.get('element'), this + ' still exists in DOM');
- }
- return this._super.apply(this, arguments);
+ destroy() {
+ gotDestroyed.push(this.label);
+ this._super(...arguments);
}
});
var ChildView = View.extend(assertProperDestruction, {
- render(buf) {
- // emulate nested template
- this.appendChild(View.createWithMixins(assertProperDestruction, {
- template() { return ""; }
- }));
- }
+ template: compile('{{#view view.assertDestruction}}{{/view}}'),
+ label: 'parent',
+ assertDestruction: View.extend(assertProperDestruction, {
+ label: 'child'
+ })
});
var view = CollectionView.create({
@@ -601,21 +584,45 @@ QUnit.test("when a collection view is emptied, deeply nested views elements are
equal(jQuery('.inner_element').length, 0, "elements removed");
run(function() {
- view.remove();
+ view.destroy();
});
+
+ deepEqual(gotDestroyed, ['parent', 'child'], "The child view was destroyed");
});
QUnit.test("should render the emptyView if content array is empty and emptyView is given as string", function() {
+ registry.register('view:custom-empty', View.extend({
+ tagName: 'kbd',
+ template: compile("THIS IS AN EMPTY VIEW")
+ }));
+
+ view = CollectionView.create({
+ tagName: 'del',
+ content: Ember.A(),
+ container: registry.container(),
+
+ emptyView: 'custom-empty'
+ });
+
+ run(function() {
+ view.append();
+ });
+
+ ok(view.$().find('kbd:contains("THIS IS AN EMPTY VIEW")').length, "displays empty view");
+});
+
+QUnit.test("should render the emptyView if content array is empty and emptyView is given as global string [DEPRECATED]", function() {
+ expectDeprecation(/Resolved the view "App.EmptyView" on the global context/);
+
Ember.lookup = {
App: {
EmptyView: View.extend({
tagName: 'kbd',
- render(buf) {
- buf.push("THIS IS AN EMPTY VIEW");
- }
+ template: compile("THIS IS AN EMPTY VIEW")
})
}
};
+
view = CollectionView.create({
tagName: 'del',
content: Ember.A(),
@@ -632,17 +639,13 @@ QUnit.test("should render the emptyView if content array is empty and emptyView
QUnit.test("should lookup against the container if itemViewClass is given as a string", function() {
var ItemView = View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
});
- var container = {
- lookupFactory: lookupFactory
- };
+ registry.register('view:item', ItemView);
view = CollectionView.create({
- container: container,
+ container: registry.container(),
content: Ember.A([1, 2, 3, 4]),
itemViewClass: 'item'
});
@@ -653,26 +656,17 @@ QUnit.test("should lookup against the container if itemViewClass is given as a s
equal(view.$('.ember-view').length, 4);
- function lookupFactory(fullName) {
- equal(fullName, 'view:item');
-
- return ItemView;
- }
});
QUnit.test("should lookup only global path against the container if itemViewClass is given as a string", function() {
var ItemView = View.extend({
- render(buf) {
- buf.push(get(this, 'content'));
- }
+ template: compile('{{view.content}}')
});
- var container = {
- lookupFactory: lookupFactory
- };
+ registry.register('view:top', ItemView);
view = CollectionView.create({
- container: container,
+ container: registry.container(),
content: Ember.A(['hi']),
itemViewClass: 'top'
});
@@ -682,28 +676,18 @@ QUnit.test("should lookup only global path against the container if itemViewClas
});
equal(view.$().text(), 'hi');
-
- function lookupFactory(fullName) {
- equal(fullName, 'view:top');
-
- return ItemView;
- }
});
QUnit.test("should lookup against the container and render the emptyView if emptyView is given as string and content array is empty ", function() {
var EmptyView = View.extend({
tagName: 'kbd',
- render(buf) {
- buf.push("THIS IS AN EMPTY VIEW");
- }
+ template: compile('THIS IS AN EMPTY VIEW')
});
- var container = {
- lookupFactory: lookupFactory
- };
+ registry.register('view:empty', EmptyView);
view = CollectionView.create({
- container: container,
+ container: registry.container(),
tagName: 'del',
content: Ember.A(),
emptyView: 'empty'
@@ -714,27 +698,17 @@ QUnit.test("should lookup against the container and render the emptyView if empt
});
ok(view.$().find('kbd:contains("THIS IS AN EMPTY VIEW")').length, "displays empty view");
-
- function lookupFactory(fullName) {
- equal(fullName, 'view:empty');
-
- return EmptyView;
- }
});
QUnit.test("should lookup from only global path against the container if emptyView is given as string and content array is empty ", function() {
var EmptyView = View.extend({
- render(buf) {
- buf.push("EMPTY");
- }
+ template: compile("EMPTY")
});
- var container = {
- lookupFactory: lookupFactory
- };
+ registry.register('view:top', EmptyView);
view = CollectionView.create({
- container: container,
+ container: registry.container(),
content: Ember.A(),
emptyView: 'top'
});
@@ -744,12 +718,6 @@ QUnit.test("should lookup from only global path against the container if emptyVi
});
equal(view.$().text(), "EMPTY");
-
- function lookupFactory(fullName) {
- equal(fullName, 'view:top');
-
- return EmptyView;
- }
});
QUnit.test('Collection with style attribute supports changing content', function() {
diff --git a/packages/ember-views/tests/views/component_test.js b/packages/ember-views/tests/views/component_test.js
index a86a055ee9a..93d15890890 100644
--- a/packages/ember-views/tests/views/component_test.js
+++ b/packages/ember-views/tests/views/component_test.js
@@ -108,7 +108,7 @@ QUnit.module("Ember.Component - Actions", {
});
component = Component.create({
- _parentView: EmberView.create({
+ parentView: EmberView.create({
controller: controller
})
});
diff --git a/packages/ember-views/tests/views/container_view_test.js b/packages/ember-views/tests/views/container_view_test.js
index 35187c5623c..19ce3b43f18 100644
--- a/packages/ember-views/tests/views/container_view_test.js
+++ b/packages/ember-views/tests/views/container_view_test.js
@@ -2,20 +2,24 @@ import { get } from "ember-metal/property_get";
import { set } from "ember-metal/property_set";
import run from "ember-metal/run_loop";
import { computed } from "ember-metal/computed";
-import { read } from "ember-metal/streams/utils";
import Controller from "ember-runtime/controllers/controller";
import jQuery from "ember-views/system/jquery";
import View from "ember-views/views/view";
import ContainerView from "ember-views/views/container_view";
+import Registry from "container/registry";
+import compile from "ember-template-compiler/system/compile";
import getElementStyle from 'ember-views/tests/test-helpers/get-element-style';
var trim = jQuery.trim;
-var container, view, otherContainer;
+var container, registry, view, otherContainer;
QUnit.module("ember-views/views/container_view_test", {
+ setup() {
+ registry = new Registry();
+ },
teardown() {
run(function() {
- container.destroy();
+ if (container) { container.destroy(); }
if (view) { view.destroy(); }
if (otherContainer) { otherContainer.destroy(); }
});
@@ -26,7 +30,7 @@ QUnit.test("should be able to insert views after the DOM representation is creat
container = ContainerView.create({
classNameBindings: ['name'],
name: 'foo',
- container: {}
+ container: registry.container()
});
run(function() {
@@ -34,9 +38,7 @@ QUnit.test("should be able to insert views after the DOM representation is creat
});
view = View.create({
- template() {
- return "This is my moment";
- }
+ template: compile('This is my moment')
});
run(function() {
@@ -44,7 +46,7 @@ QUnit.test("should be able to insert views after the DOM representation is creat
});
equal(view.container, container.container, 'view gains its containerViews container');
- equal(view._parentView, container, 'view\'s _parentView is the container');
+ equal(view.parentView, container, 'view\'s parentView is the container');
equal(trim(container.$().text()), "This is my moment");
run(function() {
@@ -79,39 +81,39 @@ QUnit.test("should be able to observe properties that contain child views", func
});
QUnit.test("childViews inherit their parents iocContainer, and retain the original container even when moved", function() {
+ var iocContainer = registry.container();
+
container = ContainerView.create({
- container: {}
+ container: iocContainer
});
otherContainer = ContainerView.create({
- container: {}
+ container: iocContainer
});
view = View.create();
container.pushObject(view);
- equal(view.get('parentView'), container, "sets the parent view after the childView is appended");
- equal(get(view, 'container'), container.container, "inherits its parentViews iocContainer");
+ strictEqual(view.get('parentView'), container, "sets the parent view after the childView is appended");
+ strictEqual(get(view, 'container'), container.container, "inherits its parentViews iocContainer");
container.removeObject(view);
- equal(get(view, 'container'), container.container, "leaves existing iocContainer alone");
+ strictEqual(get(view, 'container'), container.container, "leaves existing iocContainer alone");
otherContainer.pushObject(view);
- equal(view.get('parentView'), otherContainer, "sets the new parent view after the childView is appended");
- equal(get(view, 'container'), container.container, "still inherits its original parentViews iocContainer");
+ strictEqual(view.get('parentView'), otherContainer, "sets the new parent view after the childView is appended");
+ strictEqual(get(view, 'container'), container.container, "still inherits its original parentViews iocContainer");
});
QUnit.test("should set the parentView property on views that are added to the child views array", function() {
container = ContainerView.create();
var ViewKlass = View.extend({
- template() {
- return "This is my moment";
- }
- });
+ template: compile("This is my moment")
+ });
view = ViewKlass.create();
@@ -191,15 +193,11 @@ QUnit.test("should be able to push initial views onto the ContainerView and have
this._super.apply(this, arguments);
this.pushObject(View.create({
name: 'A',
- template() {
- return 'A';
- }
+ template: compile('A')
}));
this.pushObject(View.create({
name: 'B',
- template() {
- return 'B';
- }
+ template: compile('B')
}));
},
// functions here avoid attaching an observer, which is
@@ -227,9 +225,7 @@ QUnit.test("should be able to push initial views onto the ContainerView and have
run(function () {
container.pushObject(View.create({
name: 'C',
- template() {
- return 'C';
- }
+ template: compile('C')
}));
});
@@ -244,14 +240,12 @@ QUnit.test("should be able to push initial views onto the ContainerView and have
QUnit.test("views that are removed from a ContainerView should have their child views cleared", function() {
container = ContainerView.create();
- view = View.createWithMixins({
- remove() {
- this._super.apply(this, arguments);
- },
- template(context, options) {
- options.data.view.appendChild(View);
- }
+
+ var ChildView = View.extend({
+ MyView: View,
+ template: compile('{{view MyView}}')
});
+ var view = ChildView.create();
container.pushObject(view);
@@ -263,8 +257,7 @@ QUnit.test("views that are removed from a ContainerView should have their child
run(function() {
container.removeObject(view);
});
- equal(get(view, 'childViews.length'), 0, "child views are cleared when removed from container view");
- equal(container.$().text(), '', "the child view is removed from the DOM");
+ strictEqual(container.$('div').length, 0, "the child view is removed from the DOM");
});
QUnit.test("if a ContainerView starts with an empty currentView, nothing is displayed", function() {
@@ -283,12 +276,9 @@ QUnit.test("if a ContainerView starts with a currentView, it is rendered as a ch
container = ContainerView.create({
controller: controller
});
- var context = null;
+
var mainView = View.create({
- template(ctx, opts) {
- context = ctx;
- return "This is the main view.";
- }
+ template: compile('This is the main view.')
});
set(container, 'currentView', mainView);
@@ -301,18 +291,11 @@ QUnit.test("if a ContainerView starts with a currentView, it is rendered as a ch
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
- equal(context, container.get('context'), 'context preserved');
- equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
- equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
});
QUnit.test("if a ContainerView is created with a currentView, it is rendered as a child view", function() {
- var context = null;
var mainView = View.create({
- template(ctx, opts) {
- context = ctx;
- return "This is the main view.";
- }
+ template: compile('This is the main view.')
});
var controller = Controller.create();
@@ -330,21 +313,16 @@ QUnit.test("if a ContainerView is created with a currentView, it is rendered as
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
- equal(context, container.get('context'), 'context preserved');
- equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
- equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
});
QUnit.test("if a ContainerView starts with no currentView and then one is set, the ContainerView is updated", function() {
- var context = null;
var mainView = View.create({
- template(ctx, opts) {
- context = ctx;
- return "This is the main view.";
- }
+ template: compile("This is the {{name}} view.")
});
- var controller = Controller.create();
+ var controller = Controller.create({
+ name: "main"
+ });
container = ContainerView.create({
controller: controller
@@ -365,18 +343,11 @@ QUnit.test("if a ContainerView starts with no currentView and then one is set, t
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
- equal(context, container.get('context'), 'context preserved');
- equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
- equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
});
QUnit.test("if a ContainerView starts with a currentView and then is set to null, the ContainerView is updated", function() {
- var context = null;
var mainView = View.create({
- template(ctx, opts) {
- context = ctx;
- return "This is the main view.";
- }
+ template: compile("This is the main view.")
});
var controller = Controller.create();
@@ -395,9 +366,6 @@ QUnit.test("if a ContainerView starts with a currentView and then is set to null
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
- equal(context, container.get('context'), 'context preserved');
- equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
- equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
run(function() {
set(container, 'currentView', null);
@@ -408,12 +376,8 @@ QUnit.test("if a ContainerView starts with a currentView and then is set to null
});
QUnit.test("if a ContainerView starts with a currentView and then is set to null, the ContainerView is updated and the previous currentView is destroyed", function() {
- var context = null;
var mainView = View.create({
- template(ctx, opts) {
- context = ctx;
- return "This is the main view.";
- }
+ template: compile("This is the main view.")
});
var controller = Controller.create();
@@ -432,9 +396,6 @@ QUnit.test("if a ContainerView starts with a currentView and then is set to null
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), mainView, "should have the currentView as the only child view");
equal(mainView.get('parentView'), container, "parentView is setup");
- equal(context, container.get('context'), 'context preserved');
- equal(read(mainView._keywords.controller), controller, 'controller keyword is setup');
- equal(read(mainView._keywords.view), mainView, 'view keyword is setup');
run(function() {
set(container, 'currentView', null);
@@ -449,21 +410,15 @@ QUnit.test("if a ContainerView starts with a currentView and then is set to null
QUnit.test("if a ContainerView starts with a currentView and then a different currentView is set, the old view is destroyed and the new one is added", function() {
container = ContainerView.create();
var mainView = View.create({
- template() {
- return "This is the main view.";
- }
+ template: compile("This is the main view.")
});
var secondaryView = View.create({
- template() {
- return "This is the secondary view.";
- }
+ template: compile("This is the secondary view.")
});
var tertiaryView = View.create({
- template() {
- return "This is the tertiary view.";
- }
+ template: compile("This is the tertiary view.")
});
container.set('currentView', mainView);
@@ -480,7 +435,6 @@ QUnit.test("if a ContainerView starts with a currentView and then a different cu
set(container, 'currentView', secondaryView);
});
-
equal(get(container, 'length'), 1, "should have one child view");
equal(container.objectAt(0), secondaryView, "should have the currentView as the only child view");
equal(mainView.isDestroyed, true, 'should destroy the previous currentView: mainView.');
@@ -507,21 +461,15 @@ QUnit.test("should be able to modify childViews many times during an run loop",
});
var one = View.create({
- template() {
- return 'one';
- }
+ template: compile('one')
});
var two = View.create({
- template() {
- return 'two';
- }
+ template: compile('two')
});
var three = View.create({
- template() {
- return 'three';
- }
+ template: compile('three')
});
run(function() {
@@ -536,53 +484,6 @@ QUnit.test("should be able to modify childViews many times during an run loop",
equal(trim(container.$().text()), 'onetwothree');
});
-QUnit.test("should be able to modify childViews then remove the ContainerView in same run loop", function () {
- container = ContainerView.create();
-
- run(function() {
- container.appendTo('#qunit-fixture');
- });
-
- var count = 0;
- var child = View.create({
- template() {
- count++;
- return 'child';
- }
- });
-
- run(function() {
- container.pushObject(child);
- container.remove();
- });
-
- equal(count, 0, 'did not render child');
-});
-
-QUnit.test("should be able to modify childViews then destroy the ContainerView in same run loop", function () {
- container = ContainerView.create();
-
- run(function() {
- container.appendTo('#qunit-fixture');
- });
-
- var count = 0;
- var child = View.create({
- template() {
- count++;
- return 'child';
- }
- });
-
- run(function() {
- container.pushObject(child);
- container.destroy();
- });
-
- equal(count, 0, 'did not render child');
-});
-
-
QUnit.test("should be able to modify childViews then rerender the ContainerView in same run loop", function () {
container = ContainerView.create();
@@ -590,12 +491,8 @@ QUnit.test("should be able to modify childViews then rerender the ContainerView
container.appendTo('#qunit-fixture');
});
- var count = 0;
var child = View.create({
- template() {
- count++;
- return 'child';
- }
+ template: compile('child')
});
run(function() {
@@ -603,9 +500,6 @@ QUnit.test("should be able to modify childViews then rerender the ContainerView
container.rerender();
});
- // TODO: Fix with Priority Queue for now ensure valid rendering
- //equal(count, 1, 'rendered child only once');
-
equal(trim(container.$().text()), 'child');
});
@@ -618,11 +512,12 @@ QUnit.test("should be able to modify childViews then rerender then modify again
var Child = View.extend({
count: 0,
- render(buffer) {
+ willRender: function() {
this.count++;
- buffer.push(this.label);
- }
+ },
+ template: compile('{{view.label}}')
});
+
var one = Child.create({ label: 'one' });
var two = Child.create({ label: 'two' });
@@ -646,11 +541,12 @@ QUnit.test("should be able to modify childViews then rerender again the Containe
var Child = View.extend({
count: 0,
- render(buffer) {
+ willRender() {
this.count++;
- buffer.push(this.label);
- }
+ },
+ template: compile('{{view.label}}')
});
+
var one = Child.create({ label: 'one' });
var two = Child.create({ label: 'two' });
@@ -659,16 +555,14 @@ QUnit.test("should be able to modify childViews then rerender again the Containe
container.rerender();
});
- // TODO: Fix with Priority Queue for now ensure valid rendering
- //equal(one.count, 1, 'rendered one child only once');
+ equal(one.count, 1, 'rendered one child only once');
equal(container.$().text(), 'one');
run(function () {
container.pushObject(two);
});
- // TODO: Fix with Priority Queue for now ensure valid rendering
- //equal(one.count, 1, 'rendered one child only once');
+ equal(one.count, 1, 'rendered one child only once');
equal(two.count, 1, 'rendered two child only once');
// IE 8 adds a line break but this shouldn't affect validity
@@ -680,7 +574,7 @@ QUnit.test("should invalidate `element` on itself and childViews when being rend
var root = ContainerView.create();
- view = View.create({ template() {} });
+ view = View.create({ template: compile('child view') });
container = ContainerView.create({ childViews: ['child'], child: view });
run(function() {
@@ -736,7 +630,7 @@ QUnit.test("Child view can only be added to one container at a time", function (
});
});
-QUnit.test("if a containerView appends a child in its didInsertElement event, the didInsertElement event of the child view should be fired once", function () {
+QUnit.test("if a containerView appends a child in its didInsertElement event, the didInsertElement event of the child view should be fired once", function (assert) {
var counter = 0;
var root = ContainerView.create({});
@@ -757,17 +651,17 @@ QUnit.test("if a containerView appends a child in its didInsertElement event, th
});
-
run(function() {
root.appendTo('#qunit-fixture');
});
- run(function() {
- root.pushObject(container);
- });
+ expectDeprecation(function() {
+ run(function() {
+ root.pushObject(container);
+ });
+ }, /was modified inside the didInsertElement hook/);
- equal(container.get('childViews').get('length'), 1 , "containerView should only have a child");
- equal(counter, 1 , "didInsertElement should be fired once");
+ assert.strictEqual(counter, 1, "child didInsertElement was invoked");
run(function() {
root.destroy();
@@ -847,3 +741,61 @@ QUnit.test('ContainerView supports changing children with style attribute', func
container.pushObject(view);
});
});
+
+QUnit.test("should render child views with a different tagName", function() {
+ expectDeprecation("Setting `childViews` on a Container is deprecated.");
+
+ container = ContainerView.create({
+ childViews: ["child"],
+
+ child: View.create({
+ tagName: 'aside'
+ })
+ });
+
+ run(function() {
+ container.createElement();
+ });
+
+ equal(container.$('aside').length, 1);
+});
+
+QUnit.test("should allow hX tags as tagName", function() {
+ expectDeprecation("Setting `childViews` on a Container is deprecated.");
+
+ container = ContainerView.create({
+ childViews: ["child"],
+
+ child: View.create({
+ tagName: 'h3'
+ })
+ });
+
+ run(function() {
+ container.createElement();
+ });
+
+ ok(container.$('h3').length, "does not render the h3 tag correctly");
+});
+
+QUnit.test("renders contained view with omitted start tag and parent view context", function() {
+ expectDeprecation("Setting `childViews` on a Container is deprecated.");
+
+ view = ContainerView.createWithMixins({
+ tagName: 'table',
+ childViews: ["row"],
+ row: View.createWithMixins({
+ tagName: 'tr'
+ })
+ });
+
+ run(view, view.append);
+
+ equal(view.element.tagName, 'TABLE', 'container view is table');
+ equal(view.element.childNodes[2].tagName, 'TR', 'inner view is tr');
+
+ run(view, view.rerender);
+
+ equal(view.element.tagName, 'TABLE', 'container view is table');
+ equal(view.element.childNodes[2].tagName, 'TR', 'inner view is tr');
+});
diff --git a/packages/ember-views/tests/views/metamorph_view_test.js b/packages/ember-views/tests/views/metamorph_view_test.js
deleted file mode 100644
index ec1296b490c..00000000000
--- a/packages/ember-views/tests/views/metamorph_view_test.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import jQuery from "ember-views/system/jquery";
-import run from "ember-metal/run_loop";
-import EmberView from "ember-views/views/view";
-import { get } from "ember-metal/property_get";
-import { set } from "ember-metal/property_set";
-import compile from "ember-template-compiler/system/compile";
-import _MetamorphView from "ember-views/views/metamorph_view";
-
-var view, childView, metamorphView;
-
-QUnit.module("Metamorph views", {
- setup() {
- view = EmberView.create({
- render(buffer) {
- buffer.push("snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax snorfblax Hello World<\/h1>/));
});
- QUnit.test("It is possible to render a view with a nested {{view}} helper in Node", function(assert) {
+ QUnit.skip("It is possible to render a view with a nested {{view}} helper in Node", function(assert) {
var View = Ember.Component.extend({
renderer: new Ember.View._Renderer(new DOMHelper(new SimpleDOM.Document())),
layout: compile("
View
"); - this.appendChild(metamorphView); - } - }); - }, - - teardown() { - run(function() { - view.destroy(); - if (childView && !childView.isDestroyed) { - childView.destroy(); - } - - if (metamorphView && !metamorphView.isDestroyed) { - metamorphView.destroy(); - } - }); - } -}); - -QUnit.test("a Metamorph view is not a view's parentView", function() { - childView = EmberView.create({ - render(buffer) { - buffer.push("Bye bros
"); - } - }); - - metamorphView = _MetamorphView.create({ - render(buffer) { - buffer.push("Meta
"); - this.appendChild(childView); - } - }); - - run(function() { - view.appendTo("#qunit-fixture"); - }); - - equal(get(childView, 'parentView'), view, "A child of a metamorph view cannot see the metamorph view as its parent"); - - var children = get(view, 'childViews'); - - equal(get(children, 'length'), 1, "precond - there is only one child of the main node"); - equal(children.objectAt(0), childView, "... and it is not the metamorph"); -}); - -QUnit.module("Metamorph views correctly handle DOM", { - setup() { - view = EmberView.create({ - render(buffer) { - buffer.push("View
"); - this.appendChild(metamorphView); - } - }); - - metamorphView = _MetamorphView.create({ - powerRanger: "Jason", - - render(buffer) { - buffer.push(""+get(this, 'powerRanger')+"
"); - } - }); - - run(function() { - view.appendTo("#qunit-fixture"); - }); - }, - - teardown() { - run(function() { - view.destroy(); - if (!metamorphView.isDestroyed) { - metamorphView.destroy(); - } - }); - } -}); - -QUnit.test("a metamorph view generates without a DOM node", function() { - var meta = jQuery("> h2", "#" + get(view, 'elementId')); - - equal(meta.length, 1, "The metamorph element should be directly inside its parent"); -}); - -QUnit.test("a metamorph view can be removed from the DOM", function() { - run(function() { - metamorphView.destroy(); - }); - - var meta = jQuery('#from-morph'); - equal(meta.length, 0, "the associated DOM was removed"); -}); - -QUnit.test("a metamorph view can be rerendered", function() { - equal(jQuery('#from-meta').text(), "Jason", "precond - renders to the DOM"); - - set(metamorphView, 'powerRanger', 'Trini'); - run(function() { - metamorphView.rerender(); - }); - - equal(jQuery('#from-meta').text(), "Trini", "updates value when re-rendering"); -}); - - -// Redefining without setup/teardown -QUnit.module("Metamorph views correctly handle DOM"); - -QUnit.test("a metamorph view calls its children's willInsertElement and didInsertElement", function() { - var parentView; - var willInsertElementCalled = false; - var didInsertElementCalled = false; - var didInsertElementSawElement = false; - - parentView = EmberView.create({ - ViewWithCallback: EmberView.extend({ - template: compile(''), - - willInsertElement() { - willInsertElementCalled = true; - }, - didInsertElement() { - didInsertElementCalled = true; - didInsertElementSawElement = (this.$('div').length === 1); - } - }), - - template: compile('{{#if view.condition}}{{view view.ViewWithCallback}}{{/if}}'), - condition: false - }); - - run(function() { - parentView.append(); - }); - run(function() { - parentView.set('condition', true); - }); - - ok(willInsertElementCalled, "willInsertElement called"); - ok(didInsertElementCalled, "didInsertElement called"); - ok(didInsertElementSawElement, "didInsertElement saw element"); - - run(function() { - parentView.destroy(); - }); - -}); - -QUnit.test("replacing a Metamorph should invalidate childView elements", function() { - var elementOnDidInsert; - - view = EmberView.create({ - show: false, - - CustomView: EmberView.extend({ - init() { - this._super.apply(this, arguments); - // This will be called in preRender - // We want it to cache a null value - // Hopefully it will be invalidated when `show` is toggled - this.get('element'); - }, - - didInsertElement() { - elementOnDidInsert = this.get('element'); - } - }), - - template: compile("{{#if view.show}}{{view view.CustomView}}{{/if}}") - }); - - run(function() { view.append(); }); - - run(function() { view.set('show', true); }); - - ok(elementOnDidInsert, "should have an element on insert"); - - run(function() { view.destroy(); }); -}); - -QUnit.test("trigger rerender of parent and SimpleBoundView", function () { - var view = EmberView.create({ - show: true, - foo: 'bar', - template: compile("{{#if view.show}}{{#if view.foo}}{{view.foo}}{{/if}}{{/if}}") - }); - - run(function() { view.append(); }); - - equal(view.$().text(), 'bar'); - - run(function() { - view.set('foo', 'baz'); // schedule render of simple bound - view.set('show', false); // destroy tree - }); - - equal(view.$().text(), ''); - - run(function() { - view.destroy(); - }); -}); - -QUnit.test("re-rendering and then changing the property does not raise an exception", function() { - view = EmberView.create({ - show: true, - foo: 'bar', - metamorphView: _MetamorphView, - template: compile("{{#view view.metamorphView}}truth{{/view}}") - }); - - run(function() { view.appendTo('#qunit-fixture'); }); - - equal(view.$().text(), 'truth'); - - run(function() { - view._childViews[0].rerender(); - view._childViews[0].rerender(); - }); - - equal(view.$().text(), 'truth'); - - run(function() { - view.destroy(); - }); -}); diff --git a/packages/ember-views/tests/views/simple_bound_view_test.js b/packages/ember-views/tests/views/simple_bound_view_test.js deleted file mode 100644 index 0c71366b63d..00000000000 --- a/packages/ember-views/tests/views/simple_bound_view_test.js +++ /dev/null @@ -1,36 +0,0 @@ -import Stream from "ember-metal/streams/stream"; -import SimpleBoundView from "ember-views/views/simple_bound_view"; - -QUnit.module('SimpleBoundView'); - -QUnit.test('does not render if update is triggered by normalizedValue is the same as the previous normalizedValue', function() { - var value = null; - var obj = { 'foo': 'bar' }; - var lazyValue = new Stream(function() { - return obj.foo; - }); - var morph = { - setContent(newValue) { - value = newValue; - } - }; - var view = new SimpleBoundView(null, null, morph, lazyValue); - - equal(value, null); - - view.update(); - - equal(value, 'bar', 'expected call to morph.setContent with "bar"'); - value = null; - - view.update(); - - equal(value, null, 'expected no call to morph.setContent'); - - obj.foo = 'baz'; // change property - lazyValue.notify(); - - view.update(); - - equal(value, 'baz', 'expected call to morph.setContent with "baz"'); -}); diff --git a/packages/ember-views/tests/views/text_area_test.js b/packages/ember-views/tests/views/text_area_test.js index 1a47a8cba4d..33a55b0cd4b 100644 --- a/packages/ember-views/tests/views/text_area_test.js +++ b/packages/ember-views/tests/views/text_area_test.js @@ -186,9 +186,11 @@ forEach.call(['cut', 'paste', 'input'], function(eventName) { }); textArea.$().val('new value'); - textArea.trigger(eventName, EmberObject.create({ - type: eventName - })); + run(function() { + textArea.trigger(eventName, EmberObject.create({ + type: eventName + })); + }); equal(textArea.get('value'), 'new value', 'value property updates on ' + eventName + ' events'); }); diff --git a/packages/ember-views/tests/views/view/append_to_test.js b/packages/ember-views/tests/views/view/append_to_test.js index 45c41473fe0..9f7e83bb0bf 100644 --- a/packages/ember-views/tests/views/view/append_to_test.js +++ b/packages/ember-views/tests/views/view/append_to_test.js @@ -4,6 +4,8 @@ import run from "ember-metal/run_loop"; import jQuery from "ember-views/system/jquery"; import EmberView from "ember-views/views/view"; import ContainerView from "ember-views/views/container_view"; +import compile from "ember-template-compiler/system/compile"; +import { runDestroy } from "ember-runtime/tests/utils"; var View, view, willDestroyCalled, childView; @@ -13,9 +15,7 @@ QUnit.module("EmberView - append() and appendTo()", { }, teardown() { - run(function() { - if (!view.isDestroyed) { view.destroy(); } - }); + runDestroy(view); } }); @@ -36,9 +36,7 @@ QUnit.test("should be added to the specified element when calling appendTo()", f QUnit.test("should be added to the document body when calling append()", function() { view = View.create({ - render(buffer) { - buffer.push("foo bar baz"); - } + template: compile("foo bar baz") }); ok(!get(view, 'element'), "precond - should not have an element"); @@ -73,13 +71,12 @@ QUnit.test("append calls willInsertElement and didInsertElement callbacks", func didInsertElement() { didInsertElementCalled = true; }, - render(buffer) { - this.appendChild(EmberView.create({ - willInsertElement() { - willInsertElementCalledInChild = true; - } - })); - } + childView: EmberView.create({ + willInsertElement() { + willInsertElementCalledInChild = true; + } + }), + template: compile("{{view view.childView}}") }); view = ViewWithCallback.create(); @@ -93,6 +90,101 @@ QUnit.test("append calls willInsertElement and didInsertElement callbacks", func ok(didInsertElementCalled, "didInsertElement called"); }); +QUnit.test("a view calls its children's willInsertElement and didInsertElement", function() { + var parentView; + var willInsertElementCalled = false; + var didInsertElementCalled = false; + var didInsertElementSawElement = false; + + parentView = EmberView.create({ + ViewWithCallback: EmberView.extend({ + template: compile(''), + + willInsertElement() { + willInsertElementCalled = true; + }, + didInsertElement() { + didInsertElementCalled = true; + didInsertElementSawElement = (this.$('div').length === 1); + } + }), + + template: compile('{{#if view.condition}}{{view view.ViewWithCallback}}{{/if}}'), + condition: false + }); + + run(function() { + parentView.append(); + }); + run(function() { + parentView.set('condition', true); + }); + + ok(willInsertElementCalled, "willInsertElement called"); + ok(didInsertElementCalled, "didInsertElement called"); + ok(didInsertElementSawElement, "didInsertElement saw element"); + + run(function() { + parentView.destroy(); + }); + +}); + +QUnit.test("replacing a view should invalidate childView elements", function() { + var elementOnDidInsert; + + view = EmberView.create({ + show: false, + + CustomView: EmberView.extend({ + init() { + this._super.apply(this, arguments); + // This will be called in preRender + // We want it to cache a null value + // Hopefully it will be invalidated when `show` is toggled + this.get('element'); + }, + + didInsertElement() { + elementOnDidInsert = this.get('element'); + } + }), + + template: compile("{{#if view.show}}{{view view.CustomView}}{{/if}}") + }); + + run(function() { view.append(); }); + + run(function() { view.set('show', true); }); + + ok(elementOnDidInsert, "should have an element on insert"); + + run(function() { view.destroy(); }); +}); + +QUnit.test("trigger rerender of parent and SimpleBoundView", function () { + var view = EmberView.create({ + show: true, + foo: 'bar', + template: compile("{{#if view.show}}{{#if view.foo}}{{view.foo}}{{/if}}{{/if}}") + }); + + run(function() { view.append(); }); + + equal(view.$().text(), 'bar'); + + run(function() { + view.set('foo', 'baz'); // schedule render of simple bound + view.set('show', false); // destroy tree + }); + + equal(view.$().text(), ''); + + run(function() { + view.destroy(); + }); +}); + QUnit.test("remove removes an element from the DOM", function() { willDestroyCalled = 0; @@ -279,4 +371,3 @@ QUnit.test("destroy removes a child view from its parent", function() { ok(get(view, 'childViews.length') === 0, "Destroyed child views should be removed from their parent"); }); - diff --git a/packages/ember-views/tests/views/view/attribute_bindings_test.js b/packages/ember-views/tests/views/view/attribute_bindings_test.js index d84b46dde4d..3ad27329601 100644 --- a/packages/ember-views/tests/views/view/attribute_bindings_test.js +++ b/packages/ember-views/tests/views/view/attribute_bindings_test.js @@ -262,13 +262,13 @@ QUnit.test("should teardown observers on rerender", function() { appendView(); - equal(observersFor(view, 'foo').length, 2, 'observer count after render is two'); + equal(observersFor(view, 'foo').length, 1, 'observer count after render is one'); run(function() { view.rerender(); }); - equal(observersFor(view, 'foo').length, 2, 'observer count after rerender remains two'); + equal(observersFor(view, 'foo').length, 1, 'observer count after rerender remains one'); }); QUnit.test("handles attribute bindings for properties", function() { @@ -405,6 +405,10 @@ QUnit.test("asserts if an attributeBinding is setup on class", function() { expectAssertion(function() { appendView(); }, 'You cannot use class as an attributeBinding, use classNameBindings instead.'); + + // Remove render node to avoid "Render node exists without concomitant env" + // assertion on teardown. + view.renderNode = null; }); QUnit.test("blacklists href bindings based on protocol", function() { diff --git a/packages/ember-views/tests/views/view/child_views_test.js b/packages/ember-views/tests/views/view/child_views_test.js index 8b60efbc195..b389a8e5304 100644 --- a/packages/ember-views/tests/views/view/child_views_test.js +++ b/packages/ember-views/tests/views/view/child_views_test.js @@ -1,20 +1,18 @@ import run from "ember-metal/run_loop"; - import EmberView from "ember-views/views/view"; +import { compile } from "ember-template-compiler"; var parentView, childView; QUnit.module('tests/views/view/child_views_tests.js', { setup() { - parentView = EmberView.create({ - render(buffer) { - buffer.push('Em'); - this.appendChild(childView); - } + childView = EmberView.create({ + template: compile('ber') }); - childView = EmberView.create({ - template() { return 'ber'; } + parentView = EmberView.create({ + template: compile('Em{{view view.childView}}'), + childView: childView }); }, @@ -40,40 +38,33 @@ QUnit.test("should render an inserted child view when the child is inserted befo QUnit.test("should not duplicate childViews when rerendering", function() { - var Inner = EmberView.extend({ - template() { return ''; } - }); - - var Inner2 = EmberView.extend({ - template() { return ''; } - }); + var InnerView = EmberView.extend(); + var InnerView2 = EmberView.extend(); - var Middle = EmberView.extend({ - render(buffer) { - this.appendChild(Inner); - this.appendChild(Inner2); - } + var MiddleView = EmberView.extend({ + innerViewClass: InnerView, + innerView2Class: InnerView2, + template: compile('{{view view.innerViewClass}}{{view view.innerView2Class}}') }); - var outer = EmberView.create({ - render(buffer) { - this.middle = this.appendChild(Middle); - } + var outerView = EmberView.create({ + middleViewClass: MiddleView, + template: compile('{{view view.middleViewClass viewName="middle"}}') }); run(function() { - outer.append(); + outerView.append(); }); - equal(outer.get('middle.childViews.length'), 2, 'precond middle has 2 child views rendered to buffer'); + equal(outerView.get('middle.childViews.length'), 2, 'precond middle has 2 child views rendered to buffer'); run(function() { - outer.middle.rerender(); + outerView.middle.rerender(); }); - equal(outer.get('middle.childViews.length'), 2, 'middle has 2 child views rendered to buffer'); + equal(outerView.get('middle.childViews.length'), 2, 'middle has 2 child views rendered to buffer'); run(function() { - outer.destroy(); + outerView.destroy(); }); }); diff --git a/packages/ember-views/tests/views/view/class_name_bindings_test.js b/packages/ember-views/tests/views/view/class_name_bindings_test.js index f364d7af119..268c326ce93 100644 --- a/packages/ember-views/tests/views/view/class_name_bindings_test.js +++ b/packages/ember-views/tests/views/view/class_name_bindings_test.js @@ -148,19 +148,21 @@ QUnit.test("classNameBindings should work when the binding property is updated a view.createElement(); }); - equal(view.$().attr('class'), 'ember-view high'); + equal(view.$().attr('class'), 'ember-view high', "has the high class"); run(function() { view.remove(); }); - view.set('priority', 'low'); + run(function() { + view.set('priority', 'low'); + }); run(function() { view.append(); }); - equal(view.$().attr('class'), 'ember-view low'); + equal(view.$().attr('class'), 'ember-view low', "has a low class"); }); @@ -189,7 +191,7 @@ QUnit.test("classNames removed by a classNameBindings observer should not re-app equal(view.$().attr('class'), 'ember-view'); }); -QUnit.test("classNameBindings lifecycle test", function() { +QUnit.skip("classNameBindings lifecycle test", function() { run(function() { view = EmberView.create({ classNameBindings: ['priority'], @@ -270,5 +272,9 @@ QUnit.test("Providing a binding with a space in it asserts", function() { expectAssertion(function() { view.createElement(); }, /classNameBindings must not have spaces in them/i); + + // Remove render node to avoid "Render node exists without concomitant env" + // assertion on teardown. + view.renderNode = null; }); diff --git a/packages/ember-views/tests/views/view/create_child_view_test.js b/packages/ember-views/tests/views/view/create_child_view_test.js index 84ddb2cc7bf..f9eb35ba622 100644 --- a/packages/ember-views/tests/views/view/create_child_view_test.js +++ b/packages/ember-views/tests/views/view/create_child_view_test.js @@ -54,7 +54,7 @@ QUnit.test("should create property on parentView to a childView instance if prov equal(get(view, 'someChildView'), newView); }); -QUnit.test("should update a view instances attributes, including the _parentView and container properties", function() { +QUnit.test("should update a view instances attributes, including the parentView and container properties", function() { var attrs = { foo: "baz" }; @@ -63,7 +63,7 @@ QUnit.test("should update a view instances attributes, including the _parentView newView = view.createChildView(myView, attrs); equal(newView.container, container, 'expects to share container with parent'); - equal(newView._parentView, view, 'expects to have the correct parent'); + equal(newView.parentView, view, 'expects to have the correct parent'); equal(get(newView, 'foo'), 'baz', 'view did get custom attributes'); deepEqual(newView, myView); @@ -84,7 +84,7 @@ QUnit.test("should create from string via container lookup", function() { newView = view.createChildView('bro'); equal(newView.container, container, 'expects to share container with parent'); - equal(newView._parentView, view, 'expects to have the correct parent'); + equal(newView.parentView, view, 'expects to have the correct parent'); }); QUnit.test("should assert when trying to create childView from string, but no such view is registered", function() { diff --git a/packages/ember-views/tests/views/view/create_element_test.js b/packages/ember-views/tests/views/view/create_element_test.js index 8db684d6f7c..0ec29082e78 100644 --- a/packages/ember-views/tests/views/view/create_element_test.js +++ b/packages/ember-views/tests/views/view/create_element_test.js @@ -2,7 +2,8 @@ import { get } from "ember-metal/property_get"; import run from "ember-metal/run_loop"; import EmberView from "ember-views/views/view"; import ContainerView from "ember-views/views/container_view"; -import { equalHTML } from "ember-metal-views/tests/test_helpers"; +import { equalHTML } from "ember-views/tests/test-helpers/equal-html"; +import compile from "ember-template-compiler/system/compile"; var view; @@ -39,16 +40,16 @@ QUnit.test('should assert if `tagName` is an empty string and `classNameBindings run(function() { view.createElement(); }); - }, /You cannot use `classNameBindings` on a tag-less view/); + }, /You cannot use `classNameBindings` on a tag-less component/); + + // Prevent further assertions + view.renderNode = null; }); QUnit.test("calls render and turns resultant string into element", function() { view = EmberView.create({ tagName: 'span', - - render(buffer) { - buffer.push("foo"); - } + template: compile("foo") }); equal(get(view, 'element'), null, 'precondition - has no element'); @@ -63,18 +64,17 @@ QUnit.test("calls render and turns resultant string into element", function() { equal(elem.tagName.toString().toLowerCase(), 'span', 'has tagName from view'); }); -QUnit.test("calls render and parses the buffer string in the right context", function() { +QUnit.test("renders the child view templates in the right context", function() { expectDeprecation("Setting `childViews` on a Container is deprecated."); view = ContainerView.create({ tagName: 'table', - childViews: [EmberView.create({ - tagName: '', - render(buffer) { - // Emulate a metamorph - buffer.push("template was called for " + get(dataSource, 'personName') + "
"; - }); +QUnit.test("should use the associated template with itself as the context", function() { + registry.register('template:testTemplate', compile( + "template was called for {{personName}}
" + )); view = EmberView.create({ container: container, @@ -124,35 +81,29 @@ QUnit.test("should call the function of the associated template with itself as t view.createElement(); }); - equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), "the named template was called with the view as the data source"); + equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), + "the named template was called with the view as the data source"); }); -QUnit.test("should fall back to defaultTemplate if neither template nor templateName are provided", function() { - var View; - - View = EmberView.extend({ - defaultLayout(dataSource) { return "template was called for " + get(dataSource, 'personName') + "
"; } +QUnit.test("should fall back to defaultLayout if neither template nor templateName are provided", function() { + var View = EmberView.extend({ + defaultLayout: compile('used default layout') }); - view = View.create({ - context: { - personName: "Tom DAAAALE" - } - }); + view = View.create(); run(function() { view.createElement(); }); - equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), "the named template was called with the view as the data source"); + equal("used default layout", view.$().text(), + "the named template was called with the view as the data source"); }); QUnit.test("should not use defaultLayout if layout is provided", function() { - var View; - - View = EmberView.extend({ - layout() { return "foo"; }, - defaultLayout(dataSource) { return "template was called for " + get(dataSource, 'personName') + "
"; } + var View = EmberView.extend({ + layout: compile("used layout"), + defaultLayout: compile("used default layout") }); view = View.create(); @@ -160,26 +111,5 @@ QUnit.test("should not use defaultLayout if layout is provided", function() { view.createElement(); }); - - equal("foo", view.$().text(), "default layout was not printed"); + equal("used layout", view.$().text(), "default layout was not printed"); }); - -QUnit.test("the template property is available to the layout template", function() { - view = EmberView.create({ - template(context, options) { - options.data.buffer.push(" derp"); - }, - - layout(context, options) { - options.data.buffer.push("Herp"); - get(options.data.view, 'template')(context, options); - } - }); - - run(function() { - view.createElement(); - }); - - equal("Herp derp", view.$().text(), "the layout has access to the template"); -}); - diff --git a/packages/ember-views/tests/views/view/nearest_of_type_test.js b/packages/ember-views/tests/views/view/nearest_of_type_test.js index 29ab0f54ecd..3332ad0a207 100644 --- a/packages/ember-views/tests/views/view/nearest_of_type_test.js +++ b/packages/ember-views/tests/views/view/nearest_of_type_test.js @@ -1,6 +1,7 @@ import run from "ember-metal/run_loop"; import { Mixin as EmberMixin } from "ember-metal/mixin"; import View from "ember-views/views/view"; +import compile from "ember-template-compiler/system/compile"; var parentView, view; @@ -16,9 +17,7 @@ QUnit.module("View#nearest*", { (function() { var Mixin = EmberMixin.create({}); var Parent = View.extend(Mixin, { - render(buffer) { - this.appendChild(View.create()); - } + template: compile(`{{view}}`) }); QUnit.test("nearestOfType should find the closest view by view class", function() { @@ -50,10 +49,7 @@ QUnit.module("View#nearest*", { view = View.create({ myProp: true, - - render(buffer) { - this.appendChild(View.create()); - } + template: compile('{{view}}') }); run(function() { diff --git a/packages/ember-views/tests/views/view/render_test.js b/packages/ember-views/tests/views/view/render_test.js deleted file mode 100644 index d750d08f9fd..00000000000 --- a/packages/ember-views/tests/views/view/render_test.js +++ /dev/null @@ -1,244 +0,0 @@ -import { get } from "ember-metal/property_get"; -import run from "ember-metal/run_loop"; -import jQuery from "ember-views/system/jquery"; -import EmberView from "ember-views/views/view"; -import ContainerView from "ember-views/views/container_view"; -import { computed } from "ember-metal/computed"; - -import compile from "ember-template-compiler/system/compile"; - -var view; - -// ....................................................... -// render() -// -QUnit.module("EmberView#render", { - teardown() { - run(function() { - view.destroy(); - }); - } -}); - -QUnit.test("default implementation does not render child views", function() { - expectDeprecation("Setting `childViews` on a Container is deprecated."); - - var rendered = 0; - var parentRendered = 0; - - view = ContainerView.createWithMixins({ - childViews: ["child"], - - render(buffer) { - parentRendered++; - this._super(buffer); - }, - - child: EmberView.createWithMixins({ - render(buffer) { - rendered++; - this._super(buffer); - } - }) - }); - - run(function() { - view.createElement(); - }); - equal(rendered, 1, 'rendered the child once'); - equal(parentRendered, 1); - equal(view.$('div').length, 1); - -}); - -QUnit.test("should invoke renderChildViews if layer is destroyed then re-rendered", function() { - expectDeprecation("Setting `childViews` on a Container is deprecated."); - - var rendered = 0; - var parentRendered = 0; - - view = ContainerView.createWithMixins({ - childViews: ["child"], - - render(buffer) { - parentRendered++; - this._super(buffer); - }, - - child: EmberView.createWithMixins({ - render(buffer) { - rendered++; - this._super(buffer); - } - }) - }); - - run(function() { - view.append(); - }); - - equal(rendered, 1, 'rendered the child once'); - equal(parentRendered, 1); - equal(view.$('div').length, 1); - - run(function() { - view.rerender(); - }); - - equal(rendered, 2, 'rendered the child twice'); - equal(parentRendered, 2); - equal(view.$('div').length, 1); - - run(function() { - view.destroy(); - }); -}); - -QUnit.test("should render child views with a different tagName", function() { - expectDeprecation("Setting `childViews` on a Container is deprecated."); - - view = ContainerView.create({ - childViews: ["child"], - - child: EmberView.create({ - tagName: 'aside' - }) - }); - - run(function() { - view.createElement(); - }); - - equal(view.$('aside').length, 1); -}); - -QUnit.test("should add ember-view to views", function() { - view = EmberView.create(); - - run(function() { - view.createElement(); - }); - - ok(view.$().hasClass('ember-view'), "the view has ember-view"); -}); - -QUnit.test("should allow tagName to be a computed property [DEPRECATED]", function() { - view = EmberView.extend({ - tagName: computed(function() { - return 'span'; - }) - }).create(); - - expectDeprecation(function() { - run(function() { - view.createElement(); - }); - }, /using a computed property to define tagName will not be permitted/); - - equal(view.element.tagName, 'SPAN', "the view has was created with the correct element"); - - run(function() { - view.set('tagName', 'div'); - }); - - equal(view.element.tagName, 'SPAN', "the tagName cannot be changed after initial render"); -}); - -QUnit.test("should allow hX tags as tagName", function() { - expectDeprecation("Setting `childViews` on a Container is deprecated."); - - view = ContainerView.create({ - childViews: ["child"], - - child: EmberView.create({ - tagName: 'h3' - }) - }); - - run(function() { - view.createElement(); - }); - - ok(view.$('h3').length, "does not render the h3 tag correctly"); -}); - -QUnit.test("should not add role attribute unless one is specified", function() { - view = EmberView.create(); - - run(function() { - view.createElement(); - }); - - ok(view.$().attr('role') === undefined, "does not have a role attribute"); -}); - -QUnit.test("should re-render if the context is changed", function() { - view = EmberView.create({ - elementId: 'template-context-test', - context: { foo: "bar" }, - render(buffer) { - var value = get(get(this, 'context'), 'foo'); - buffer.push(value); - } - }); - - run(function() { - view.appendTo('#qunit-fixture'); - }); - - equal(jQuery('#qunit-fixture #template-context-test').text(), "bar", "precond - renders the view with the initial value"); - - run(function() { - view.set('context', { - foo: "bang baz" - }); - }); - - equal(jQuery('#qunit-fixture #template-context-test').text(), "bang baz", "re-renders the view with the updated context"); -}); - -QUnit.test("renders contained view with omitted start tag and parent view context", function() { - expectDeprecation("Setting `childViews` on a Container is deprecated."); - - view = ContainerView.createWithMixins({ - tagName: 'table', - childViews: ["row"], - row: EmberView.createWithMixins({ - tagName: 'tr' - }) - }); - - run(view, view.append); - - equal(view.element.tagName, 'TABLE', 'container view is table'); - equal(view.element.childNodes[0].tagName, 'TR', 'inner view is tr'); - - run(view, view.rerender); - - equal(view.element.tagName, 'TABLE', 'container view is table'); - equal(view.element.childNodes[0].tagName, 'TR', 'inner view is tr'); -}); - -QUnit.test("renders a contained view with omitted start tag and tagless parent view context", function() { - view = EmberView.createWithMixins({ - tagName: 'table', - template: compile("{{view view.pivot}}"), - pivot: EmberView.extend({ - tagName: '', - template: compile("{{view view.row}}"), - row: EmberView.extend({ - tagName: 'tr' - }) - }) - }); - - run(view, view.append); - - equal(view.element.tagName, 'TABLE', 'container view is table'); - ok(view.$('tr').length, 'inner view is tr'); - - run(view, view.rerender); - - equal(view.element.tagName, 'TABLE', 'container view is table'); - ok(view.$('tr').length, 'inner view is tr'); -}); diff --git a/packages/ember-views/tests/views/view/stream_test.js b/packages/ember-views/tests/views/view/stream_test.js deleted file mode 100644 index 88c55632257..00000000000 --- a/packages/ember-views/tests/views/view/stream_test.js +++ /dev/null @@ -1,75 +0,0 @@ -import run from "ember-metal/run_loop"; -import EmberView from "ember-views/views/view"; - -var view; - -QUnit.module("ember-views: streams", { - teardown() { - if (view) { - run(view, 'destroy'); - } - } -}); - -QUnit.test("can return a stream that is notified of changes", function() { - expect(2); - - view = EmberView.create({ - controller: { - name: 'Robert' - } - }); - - var stream = view.getStream('name'); - - equal(stream.value(), 'Robert', 'initial value is correct'); - - stream.subscribe(function() { - equal(stream.value(), 'Max', 'value is updated'); - }); - - run(view, 'set', 'controller.name', 'Max'); -}); - -QUnit.test("a single stream is used for the same path", function() { - expect(2); - - var stream1, stream2; - - view = EmberView.create({ - controller: { - name: 'Robert' - } - }); - - stream1 = view.getStream('name'); - stream2 = view.getStream('name'); - - equal(stream1, stream2, 'streams for the same path should be the same object'); - - stream1 = view.getStream(''); - stream2 = view.getStream('this'); - - equal(stream1, stream2, 'streams "" and "this" should be the same object'); -}); - -QUnit.test("the stream returned is labeled with the requested path", function() { - expect(2); - var stream; - - view = EmberView.create({ - controller: { - name: 'Robert' - }, - - foo: 'bar' - }); - - stream = view.getStream('name'); - - equal(stream._label, 'name', 'stream is labeled'); - - stream = view.getStream('view.foo'); - - equal(stream._label, 'view.foo', 'stream is labeled'); -}); diff --git a/packages/ember-views/tests/views/view/template_test.js b/packages/ember-views/tests/views/view/template_test.js index e0e4aaba22a..3ada7fb9122 100644 --- a/packages/ember-views/tests/views/view/template_test.js +++ b/packages/ember-views/tests/views/view/template_test.js @@ -1,8 +1,8 @@ import Registry from "container/registry"; import { get } from "ember-metal/property_get"; import run from "ember-metal/run_loop"; -import EmberObject from "ember-runtime/system/object"; import EmberView from "ember-views/views/view"; +import { compile } from "ember-template-compiler"; var registry, container, view; @@ -32,25 +32,10 @@ QUnit.test("Template views return throw if their template cannot be found", func }, /cantBeFound/); }); -if (typeof Handlebars === "object") { - QUnit.test("should allow standard Handlebars template usage", function() { - view = EmberView.create({ - context: { name: "Erik" }, - template: Handlebars.compile("Hello, {{name}}") - }); - - run(function() { - view.createElement(); - }); - - equal(view.$().text(), "Hello, Erik"); - }); -} - QUnit.test("should call the function of the associated template", function() { - registry.register('template:testTemplate', function() { - return "template was called
"; - }); + registry.register('template:testTemplate', compile( + "template was called
" + )); view = EmberView.create({ container: container, @@ -65,9 +50,9 @@ QUnit.test("should call the function of the associated template", function() { }); QUnit.test("should call the function of the associated template with itself as the context", function() { - registry.register('template:testTemplate', function(dataSource) { - return "template was called for " + get(dataSource, 'personName') + "
"; - }); + registry.register('template:testTemplate', compile( + "template was called for {{personName}}
" + )); view = EmberView.create({ container: container, @@ -82,14 +67,17 @@ QUnit.test("should call the function of the associated template with itself as t view.createElement(); }); - equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), "the named template was called with the view as the data source"); + equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), + "the named template was called with the view as the data source"); }); QUnit.test("should fall back to defaultTemplate if neither template nor templateName are provided", function() { var View; View = EmberView.extend({ - defaultTemplate(dataSource) { return "template was called for " + get(dataSource, 'personName') + "
"; } + defaultTemplate: compile( + "template was called for {{personName}}
" + ) }); view = View.create({ @@ -102,15 +90,16 @@ QUnit.test("should fall back to defaultTemplate if neither template nor template view.createElement(); }); - equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), "the named template was called with the view as the data source"); + equal("template was called for Tom DAAAALE", view.$('#twas-called').text(), + "the named template was called with the view as the data source"); }); QUnit.test("should not use defaultTemplate if template is provided", function() { - var View; - - View = EmberView.extend({ - template() { return "foo"; }, - defaultTemplate(dataSource) { return "template was called for " + get(dataSource, 'personName') + "
"; } + var View = EmberView.extend({ + template: compile("foo"), + defaultTemplate: compile( + "template was called for {{personName}}
" + ) }); view = View.create(); @@ -122,14 +111,14 @@ QUnit.test("should not use defaultTemplate if template is provided", function() }); QUnit.test("should not use defaultTemplate if template is provided", function() { - var View; - - registry.register('template:foobar', function() { return 'foo'; }); + registry.register('template:foobar', compile("foo")); - View = EmberView.extend({ + var View = EmberView.extend({ container: container, templateName: 'foobar', - defaultTemplate(dataSource) { return "template was called for " + get(dataSource, 'personName') + "
"; } + defaultTemplate: compile( + "template was called for {{personName}}
" + ) }); view = View.create(); @@ -146,98 +135,7 @@ QUnit.test("should render an empty element if no template is specified", functio view.createElement(); }); - equal(view.$().html(), '', "view div should be empty"); -}); - -QUnit.test("should provide a controller to the template if a controller is specified on the view", function() { - expect(7); - - var Controller1 = EmberObject.extend({ - toString() { return "Controller1"; } - }); - - var Controller2 = EmberObject.extend({ - toString() { return "Controller2"; } - }); - - var controller1 = Controller1.create(); - var controller2 = Controller2.create(); - var optionsDataKeywordsControllerForView; - var optionsDataKeywordsControllerForChildView; - var contextForView; - var contextForControllerlessView; - - view = EmberView.create({ - controller: controller1, - - template(buffer, options) { - optionsDataKeywordsControllerForView = options.data.view._keywords.controller.value(); - } - }); - - run(function() { - view.appendTo('#qunit-fixture'); - }); - - strictEqual(optionsDataKeywordsControllerForView, controller1, "passes the controller in the data"); - - run(function() { - view.destroy(); - }); - - var parentView = EmberView.create({ - controller: controller1, - - template(buffer, options) { - options.data.view.appendChild(EmberView.create({ - controller: controller2, - template(context, options) { - contextForView = context; - optionsDataKeywordsControllerForChildView = options.data.view._keywords.controller.value(); - } - })); - optionsDataKeywordsControllerForView = options.data.view._keywords.controller.value(); - } - }); - - run(function() { - parentView.appendTo('#qunit-fixture'); - }); - - strictEqual(optionsDataKeywordsControllerForView, controller1, "passes the controller in the data"); - strictEqual(optionsDataKeywordsControllerForChildView, controller2, "passes the child view's controller in the data"); - - run(function() { - parentView.destroy(); - }); - - var parentViewWithControllerlessChild = EmberView.create({ - controller: controller1, - - template(buffer, options) { - options.data.view.appendChild(EmberView.create({ - template(context, options) { - contextForControllerlessView = context; - optionsDataKeywordsControllerForChildView = options.data.view._keywords.controller.value(); - } - })); - optionsDataKeywordsControllerForView = options.data.view._keywords.controller.value(); - } - }); - - run(function() { - parentViewWithControllerlessChild.appendTo('#qunit-fixture'); - }); - - strictEqual(optionsDataKeywordsControllerForView, controller1, "passes the original controller in the data"); - strictEqual(optionsDataKeywordsControllerForChildView, controller1, "passes the controller in the data to child views"); - strictEqual(contextForView, controller2, "passes the controller in as the main context of the parent view"); - strictEqual(contextForControllerlessView, controller1, "passes the controller in as the main context of the child view"); - - run(function() { - parentView.destroy(); - parentViewWithControllerlessChild.destroy(); - }); + equal(view.$().text(), '', "view div should be empty"); }); QUnit.test("should throw an assertion if no container has been set", function() { @@ -254,4 +152,6 @@ QUnit.test("should throw an assertion if no container has been set", function() view.createElement(); }); }, /Container was not found when looking up a views template./); + + view.renderNode = null; }); diff --git a/packages/ember-views/tests/views/view/view_lifecycle_test.js b/packages/ember-views/tests/views/view/view_lifecycle_test.js index 08a2ffe98a0..19f9d767182 100644 --- a/packages/ember-views/tests/views/view/view_lifecycle_test.js +++ b/packages/ember-views/tests/views/view/view_lifecycle_test.js @@ -3,6 +3,8 @@ import run from "ember-metal/run_loop"; import EmberObject from "ember-runtime/system/object"; import jQuery from "ember-views/system/jquery"; import EmberView from "ember-views/views/view"; +import { compile } from "ember-template-compiler"; +import { registerHelper } from "ember-htmlbars/helpers"; var originalLookup = Ember.lookup; var lookup, view; @@ -22,12 +24,6 @@ QUnit.module("views/view/view_lifecycle_test - pre-render", { } }); -function tmpl(str) { - return function(context, options) { - options.data.buffer.push(str); - }; -} - QUnit.test("should create and append a DOM element after bindings have synced", function() { var ViewTest; @@ -40,14 +36,13 @@ QUnit.test("should create and append a DOM element after bindings have synced", view = EmberView.createWithMixins({ fooBinding: 'ViewTest.fakeController.fakeThing', - - render(buffer) { - buffer.push(this.get('foo')); - } + template: compile("{{view.foo}}") }); ok(!view.get('element'), "precond - does not have an element before appending"); + // the actual render happens in the `render` queue, which is after the `sync` + // queue where the binding is synced. view.append(); }); @@ -67,7 +62,7 @@ QUnit.test("should throw an exception if trying to append a child before renderi QUnit.test("should not affect rendering if rerender is called before initial render happens", function() { run(function() { view = EmberView.create({ - template: tmpl("Rerender me!") + template: compile("Rerender me!") }); view.rerender(); @@ -80,7 +75,7 @@ QUnit.test("should not affect rendering if rerender is called before initial ren QUnit.test("should not affect rendering if destroyElement is called before initial render happens", function() { run(function() { view = EmberView.create({ - template: tmpl("Don't destroy me!") + template: compile("Don't destroy me!") }); view.destroyElement(); @@ -104,56 +99,40 @@ QUnit.module("views/view/view_lifecycle_test - in render", { } }); -QUnit.test("appendChild should work inside a template", function() { - run(function() { - view = EmberView.create({ - template(context, options) { - var buffer = options.data.buffer; - - buffer.push("Hi!
"); - - options.data.view.appendChild(EmberView, { - template: tmpl("Inception reached") - }); - - buffer.push(""); - } - }); - - view.appendTo("#qunit-fixture"); +QUnit.test("rerender of top level view during rendering should throw", function() { + registerHelper('throw', function() { + view.rerender(); }); - - ok(view.$('h1').length === 1 && view.$('div').length === 2, - "The appended child is visible"); + view = EmberView.create({ + template: compile("{{throw}}") + }); + throws( + function() { + run(view, view.appendTo, '#qunit-fixture'); + }, + /Something you did caused a view to re-render after it rendered but before it was inserted into the DOM./, + 'expected error was not raised' + ); }); -QUnit.test("rerender should throw inside a template", function() { - throws(function() { - run(function() { - var renderCount = 0; - view = EmberView.create({ - template(context, options) { - var view = options.data.view; - - var child1 = view.appendChild(EmberView, { - template(context, options) { - renderCount++; - options.data.buffer.push(String(renderCount)); - } - }); - - view.appendChild(EmberView, { - template(context, options) { - options.data.buffer.push("Inside child2"); - child1.rerender(); - } - }); - } - }); - - view.appendTo("#qunit-fixture"); - }); - }, /Something you did caused a view to re-render after it rendered but before it was inserted into the DOM./); +QUnit.test("rerender of non-top level view during rendering should throw", function() { + let innerView = EmberView.create({ + template: compile("{{throw}}") + }); + registerHelper('throw', function() { + innerView.rerender(); + }); + view = EmberView.create({ + template: compile("{{view view.innerView}}"), + innerView + }); + throws( + function() { + run(view, view.appendTo, '#qunit-fixture'); + }, + /Something you did caused a view to re-render after it rendered but before it was inserted into the DOM./, + 'expected error was not raised' + ); }); QUnit.module("views/view/view_lifecycle_test - hasElement", { @@ -167,20 +146,27 @@ QUnit.module("views/view/view_lifecycle_test - hasElement", { }); QUnit.test("createElement puts the view into the hasElement state", function() { + var hasCalledInsertElement = false; view = EmberView.create({ - render(buffer) { buffer.push('hello'); } + didInsertElement() { + hasCalledInsertElement = true; + } }); run(function() { view.createElement(); }); - equal(view.currentState, view._states.hasElement, "the view is in the hasElement state"); + ok(!hasCalledInsertElement, 'didInsertElement is not called'); + equal(view.element.tagName, 'DIV', 'content is rendered'); }); QUnit.test("trigger rerender on a view in the hasElement state doesn't change its state to inDOM", function() { + var hasCalledInsertElement = false; view = EmberView.create({ - render(buffer) { buffer.push('hello'); } + didInsertElement() { + hasCalledInsertElement = true; + } }); run(function() { @@ -188,7 +174,8 @@ QUnit.test("trigger rerender on a view in the hasElement state doesn't change it view.rerender(); }); - equal(view.currentState, view._states.hasElement, "the view is still in the hasElement state"); + ok(!hasCalledInsertElement, 'didInsertElement is not called'); + equal(view.element.tagName, 'DIV', 'content is rendered'); }); @@ -205,7 +192,7 @@ QUnit.module("views/view/view_lifecycle_test - in DOM", { QUnit.test("should throw an exception when calling appendChild when DOM element exists", function() { run(function() { view = EmberView.create({ - template: tmpl("Wait for the kick") + template: compile("Wait for the kick") }); view.append(); @@ -213,43 +200,45 @@ QUnit.test("should throw an exception when calling appendChild when DOM element throws(function() { view.appendChild(EmberView, { - template: tmpl("Ah ah ah! You didn't say the magic word!") + template: compile("Ah ah ah! You didn't say the magic word!") }); }, null, "throws an exception when calling appendChild after element is created"); }); QUnit.test("should replace DOM representation if rerender() is called after element is created", function() { run(function() { - view = EmberView.create({ - template(context, options) { - var buffer = options.data.buffer; - var value = context.get('shape'); - - buffer.push("Do not taunt happy fun "+value); + view = EmberView.createWithMixins({ + template: compile("Do not taunt happy fun {{unbound view.shape}}"), + rerender() { + this._super.apply(this, arguments); }, - - context: EmberObject.create({ - shape: 'sphere' - }) + shape: 'sphere' }); + view.volatileProp = view.get('context.shape'); view.append(); }); - equal(view.$().text(), "Do not taunt happy fun sphere", "precond - creates DOM element"); + equal(view.$().text(), "Do not taunt happy fun sphere", + "precond - creates DOM element"); + + view.shape = 'ball'; + + equal(view.$().text(), "Do not taunt happy fun sphere", + "precond - keeps DOM element"); - view.set('context.shape', 'ball'); run(function() { view.rerender(); }); - equal(view.$().text(), "Do not taunt happy fun ball", "rerenders DOM element when rerender() is called"); + equal(view.$().text(), "Do not taunt happy fun ball", + "rerenders DOM element when rerender() is called"); }); QUnit.test("should destroy DOM representation when destroyElement is called", function() { run(function() { view = EmberView.create({ - template: tmpl("Don't fear the reaper") + template: compile("Don't fear the reaper") }); view.append(); @@ -267,7 +256,7 @@ QUnit.test("should destroy DOM representation when destroyElement is called", fu QUnit.test("should destroy DOM representation when destroy is called", function() { run(function() { view = EmberView.create({ - template: tmpl("Don't fear the reaper
")
+ template: compile("Don't fear the reaper
")
});
view.append();
@@ -285,7 +274,7 @@ QUnit.test("should destroy DOM representation when destroy is called", function(
QUnit.test("should throw an exception if trying to append an element that is already in DOM", function() {
run(function() {
view = EmberView.create({
- template: tmpl('Broseidon, King of the Brocean')
+ template: compile('Broseidon, King of the Brocean')
});
view.append();
@@ -305,7 +294,7 @@ QUnit.module("views/view/view_lifecycle_test - destroyed");
QUnit.test("should throw an exception when calling appendChild after view is destroyed", function() {
run(function() {
view = EmberView.create({
- template: tmpl("Wait for the kick")
+ template: compile("Wait for the kick")
});
view.append();
@@ -317,7 +306,7 @@ QUnit.test("should throw an exception when calling appendChild after view is des
throws(function() {
view.appendChild(EmberView, {
- template: tmpl("Ah ah ah! You didn't say the magic word!")
+ template: compile("Ah ah ah! You didn't say the magic word!")
});
}, null, "throws an exception when calling appendChild");
});
@@ -325,7 +314,7 @@ QUnit.test("should throw an exception when calling appendChild after view is des
QUnit.test("should throw an exception when rerender is called after view is destroyed", function() {
run(function() {
view = EmberView.create({
- template: tmpl('foo')
+ template: compile('foo')
});
view.append();
@@ -343,7 +332,7 @@ QUnit.test("should throw an exception when rerender is called after view is dest
QUnit.test("should throw an exception when destroyElement is called after view is destroyed", function() {
run(function() {
view = EmberView.create({
- template: tmpl('foo')
+ template: compile('foo')
});
view.append();
@@ -361,7 +350,7 @@ QUnit.test("should throw an exception when destroyElement is called after view i
QUnit.test("trigger rerender on a view in the inDOM state keeps its state as inDOM", function() {
run(function() {
view = EmberView.create({
- template: tmpl('foo')
+ template: compile('foo')
});
view.append();
diff --git a/packages/ember-views/tests/views/view/virtual_views_test.js b/packages/ember-views/tests/views/view/virtual_views_test.js
deleted file mode 100644
index 922813a880d..00000000000
--- a/packages/ember-views/tests/views/view/virtual_views_test.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { get } from "ember-metal/property_get";
-import run from "ember-metal/run_loop";
-import jQuery from "ember-views/system/jquery";
-import EmberView from "ember-views/views/view";
-
-var rootView, childView;
-
-QUnit.module("virtual views", {
- teardown() {
- run(function() {
- rootView.destroy();
- childView.destroy();
- });
- }
-});
-
-QUnit.test("a virtual view does not appear as a view's parentView", function() {
- rootView = EmberView.create({
- elementId: 'root-view',
-
- render(buffer) {
- buffer.push("Hi
"); - this.appendChild(virtualView); - } - }); - - var virtualView = EmberView.create({ - isVirtual: true, - tagName: '', - - render(buffer) { - buffer.push("Virtual
"); - this.appendChild(childView); - } - }); - - childView = EmberView.create({ - render(buffer) { - buffer.push("Bye!
"); - } - }); - - run(function() { - jQuery("#qunit-fixture").empty(); - rootView.appendTo("#qunit-fixture"); - }); - - equal(jQuery("#root-view > h2").length, 1, "nodes with '' tagName do not create wrappers"); - equal(get(childView, 'parentView'), rootView); - - var children = get(rootView, 'childViews'); - - equal(get(children, 'length'), 1, "there is one child element"); - equal(children.objectAt(0), childView, "the child element skips through the virtual view"); -}); - -QUnit.test("when a virtual view's child views change, the parent's childViews should reflect", function() { - rootView = EmberView.create({ - elementId: 'root-view', - - render(buffer) { - buffer.push("Hi
"); - this.appendChild(virtualView); - } - }); - - var virtualView = EmberView.create({ - isVirtual: true, - tagName: '', - - render(buffer) { - buffer.push("Virtual
"); - this.appendChild(childView); - } - }); - - childView = EmberView.create({ - render(buffer) { - buffer.push("Bye!
"); - } - }); - - run(function() { - jQuery("#qunit-fixture").empty(); - rootView.appendTo("#qunit-fixture"); - }); - - equal(virtualView.get('childViews.length'), 1, "has childView - precond"); - equal(rootView.get('childViews.length'), 1, "has childView - precond"); - - run(function() { - childView.removeFromParent(); - }); - - equal(virtualView.get('childViews.length'), 0, "has no childView"); - equal(rootView.get('childViews.length'), 0, "has no childView"); -}); diff --git a/packages/ember-views/tests/views/view_test.js b/packages/ember-views/tests/views/view_test.js new file mode 100644 index 00000000000..e09d7dcc7e3 --- /dev/null +++ b/packages/ember-views/tests/views/view_test.js @@ -0,0 +1,153 @@ +import { computed } from "ember-metal/computed"; +import run from "ember-metal/run_loop"; +import jQuery from "ember-views/system/jquery"; +import EmberView from "ember-views/views/view"; +import { compile } from "ember-template-compiler"; + +var view; + +QUnit.module("Ember.View", { + teardown() { + run(function() { + view.destroy(); + }); + } +}); + +QUnit.test("should add ember-view to views", function() { + view = EmberView.create(); + + run(function() { + view.createElement(); + }); + + ok(view.$().hasClass('ember-view'), "the view has ember-view"); +}); + +QUnit.test("should not add role attribute unless one is specified", function() { + view = EmberView.create(); + + run(function() { + view.createElement(); + }); + + ok(view.$().attr('role') === undefined, "does not have a role attribute"); +}); + +QUnit.test("should allow tagName to be a computed property [DEPRECATED]", function() { + view = EmberView.extend({ + tagName: computed(function() { + return 'span'; + }) + }).create(); + + expectDeprecation(function() { + run(function() { + view.createElement(); + }); + }, /using a computed property to define tagName will not be permitted/); + + equal(view.element.tagName, 'SPAN', "the view has was created with the correct element"); + + run(function() { + view.set('tagName', 'div'); + }); + + equal(view.element.tagName, 'SPAN', "the tagName cannot be changed after initial render"); +}); + +QUnit.test("should re-render if the context is changed", function() { + view = EmberView.create({ + elementId: 'template-context-test', + context: { foo: "bar" }, + template: compile("{{foo}}") + }); + + run(function() { + view.appendTo('#qunit-fixture'); + }); + + equal(jQuery('#qunit-fixture #template-context-test').text(), "bar", "precond - renders the view with the initial value"); + + run(function() { + view.set('context', { + foo: "bang baz" + }); + }); + + equal(jQuery('#qunit-fixture #template-context-test').text(), "bang baz", "re-renders the view with the updated context"); +}); + +QUnit.test("renders a contained view with omitted start tag and tagless parent view context", function() { + view = EmberView.createWithMixins({ + tagName: 'table', + template: compile("{{view view.pivot}}"), + pivot: EmberView.extend({ + tagName: '', + template: compile("{{view view.row}}"), + row: EmberView.extend({ + tagName: 'tr' + }) + }) + }); + + run(view, view.append); + + equal(view.element.tagName, 'TABLE', 'container view is table'); + ok(view.$('tr').length, 'inner view is tr'); + + run(view, view.rerender); + + equal(view.element.tagName, 'TABLE', 'container view is table'); + ok(view.$('tr').length, 'inner view is tr'); +}); + +QUnit.test("propagates dependent-key invalidated sets upstream", function() { + view = EmberView.create({ + parentProp: 'parent-value', + template: compile("{{view view.childView childProp=view.parentProp}}"), + childView: EmberView.createWithMixins({ + template: compile("child template"), + childProp: 'old-value' + }) + }); + + run(view, view.append); + + equal(view.get('parentProp'), 'parent-value', 'precond - parent value is there'); + var childView = view.get('childView'); + + run(function() { + childView.set('childProp', 'new-value'); + }); + + equal(view.get('parentProp'), 'new-value', 'new value is propagated across template'); +}); + +QUnit.test("propagates dependent-key invalidated bindings upstream", function() { + view = EmberView.create({ + parentProp: 'parent-value', + template: compile("{{view view.childView childProp=view.parentProp}}"), + childView: EmberView.createWithMixins({ + template: compile("child template"), + childProp: Ember.computed('dependencyProp', { + get(key) { + return this.get('dependencyProp'); + }, + set(key, value) { + // Avoid getting stomped by the template attrs + return this.get('dependencyProp'); + } + }), + dependencyProp: 'old-value' + }) + }); + + run(view, view.append); + + equal(view.get('parentProp'), 'parent-value', 'precond - parent value is there'); + var childView = view.get('childView'); + run(() => childView.set('dependencyProp', 'new-value')); + equal(childView.get('childProp'), 'new-value', 'pre-cond - new value is propagated to CP'); + equal(view.get('parentProp'), 'new-value', 'new value is propagated across template'); +}); diff --git a/packages/ember/tests/component_registration_test.js b/packages/ember/tests/component_registration_test.js index 888d954c73b..c6c2c5f472f 100644 --- a/packages/ember/tests/component_registration_test.js +++ b/packages/ember/tests/component_registration_test.js @@ -92,7 +92,7 @@ QUnit.test("Late-registered components can be rendered with custom `template` pr boot(function() { registry.register('component:my-hero', Ember.Component.extend({ classNames: 'testing123', - template() { return "watch him as he GOES"; } + template: compile("watch him as he GOES") })); }); @@ -160,8 +160,9 @@ QUnit.test("Assigning templateName to a component should setup the template as a equal(Ember.$('#wrapper').text(), "inner-outer", "The component is composed correctly"); }); -QUnit.test("Assigning templateName and layoutName should use the templates specified", function() { - expect(1); +QUnit.test("Assigning templateName and layoutName should use the templates specified [DEPRECATED]", function() { + expect(2); + expectDeprecation(/Using deprecated `template` property on a Component/); Ember.TEMPLATES.application = compile("{{my-component}}
");
Ember.TEMPLATES['foo'] = compile("{{text}}");
@@ -187,7 +188,7 @@ QUnit.test('Using name of component that does not exist', function () {
expectAssertion(function () {
boot();
- }, /A helper named `no-good` could not be found/);
+ }, /A helper named 'no-good' could not be found/);
});
QUnit.module("Application Lifecycle - Component Context", {
@@ -263,7 +264,8 @@ QUnit.test("Components without a block should have the proper content", function
equal(Ember.$('#wrapper').text(), "Some text inserted by jQuery", "The component is composed correctly");
});
-QUnit.test("properties of a component without a template should not collide with internal structures", function() {
+// The test following this one is the non-deprecated version
+QUnit.test("properties of a component without a template should not collide with internal structures [DEPRECATED]", function() {
Ember.TEMPLATES.application = compile("{{my-component data=foo}}
");
boot(function() {
@@ -282,6 +284,26 @@ QUnit.test("properties of a component without a template should not collide wit
equal(Ember.$('#wrapper').text(), "Some text inserted by jQuery", "The component is composed correctly");
});
+QUnit.test("attrs property of a component without a template should not collide with internal structures", function() {
+ Ember.TEMPLATES.application = compile("{{my-component attrs=foo}}
");
+
+ boot(function() {
+ registry.register('controller:application', Ember.Controller.extend({
+ 'text': 'outer',
+ 'foo': 'Some text inserted by jQuery'
+ }));
+
+ registry.register('component:my-component', Ember.Component.extend({
+ didInsertElement() {
+ // FIXME: I'm unsure if this is even the right way to access attrs
+ this.$().html(this.get('attrs.attrs.value'));
+ }
+ }));
+ });
+
+ equal(Ember.$('#wrapper').text(), "Some text inserted by jQuery", "The component is composed correctly");
+});
+
QUnit.test("Components trigger actions in the parents context when called from within a block", function() {
Ember.TEMPLATES.application = compile("{{#my-component}}Fizzbuzz{{/my-component}}
");
diff --git a/packages/ember/tests/controller_test.js b/packages/ember/tests/controller_test.js
new file mode 100644
index 00000000000..e0433dfb4d6
--- /dev/null
+++ b/packages/ember/tests/controller_test.js
@@ -0,0 +1,147 @@
+import "ember";
+import EmberHandlebars from "ember-htmlbars/compat";
+
+/*
+ In Ember 1.x, controllers subtly affect things like template scope
+ and action targets in exciting and often inscrutable ways. This test
+ file contains integration tests that verify the correct behavior of
+ the many parts of the system that change and rely upon controller scope,
+ from the runtime up to the templating layer.
+*/
+
+var compile = EmberHandlebars.compile;
+var App, $fixture, templates;
+
+QUnit.module("Template scoping examples", {
+ setup() {
+ Ember.run(function() {
+ templates = Ember.TEMPLATES;
+ App = Ember.Application.create({
+ name: "App",
+ rootElement: '#qunit-fixture'
+ });
+ App.deferReadiness();
+
+ App.Router.reopen({
+ location: 'none'
+ });
+
+ App.LoadingRoute = Ember.Route.extend();
+ });
+
+ $fixture = Ember.$('#qunit-fixture');
+ },
+
+ teardown() {
+ Ember.run(function() {
+ App.destroy();
+ });
+
+ App = null;
+
+ Ember.TEMPLATES = {};
+ }
+});
+
+QUnit.test("Actions inside an outlet go to the associated controller", function() {
+ expect(1);
+
+ templates.index = compile("{{component-with-action action='componentAction'}}");
+
+ App.IndexController = Ember.Controller.extend({
+ actions: {
+ componentAction() {
+ ok(true, "received the click");
+ }
+ }
+ });
+
+ App.ComponentWithActionComponent = Ember.Component.extend({
+ classNames: ['component-with-action'],
+ click() {
+ this.sendAction();
+ }
+ });
+
+ bootApp();
+
+ $fixture.find('.component-with-action').click();
+});
+
+QUnit.test('the controller property is provided to route driven views', function() {
+ var applicationController, applicationViewController;
+
+ App.ApplicationController = Ember.Controller.extend({
+ init: function() {
+ this._super(...arguments);
+ applicationController = this;
+ }
+ });
+
+ App.ApplicationView = Ember.View.extend({
+ init: function() {
+ this._super(...arguments);
+ applicationViewController = this.get('controller');
+ }
+ });
+
+ bootApp();
+
+ equal(applicationViewController, applicationController, 'application view should get its controller set properly');
+});
+
+// This test caught a regression where {{#each}}s used directly in a template
+// (i.e., not inside a view or component) did not have access to a container and
+// would raise an exception.
+QUnit.test("{{#each}} inside outlet can have an itemController", function(assert) {
+ templates.index = compile(`
+ {{#each model itemController='thing'}}
+ hi
+ {{/each}} + `); + + App.IndexController = Ember.Controller.extend({ + model: Ember.A([1, 2, 3]) + }); + + App.ThingController = Ember.Controller.extend(); + + bootApp(); + + assert.equal($fixture.find('p').length, 3, "the {{#each}} rendered without raising an exception"); +}); + +QUnit.test("", function(assert) { + templates.index = compile(` + {{#each model itemController='thing'}} + {{controller}} + + {{/each}} + `); + + App.IndexRoute = Ember.Route.extend({ + model: function() { + return Ember.A([ + { name: 'red' }, + { name: 'yellow' }, + { name: 'blue' } + ]); + } + }); + + App.ThingController = Ember.Controller.extend({ + actions: { + checkController: function(controller) { + assert.ok(controller === this, "correct controller was passed as action context"); + } + } + }); + + bootApp(); + + $fixture.find('a').first().click(); +}); + +function bootApp() { + Ember.run(App, 'advanceReadiness'); +} diff --git a/packages/ember/tests/default_initializers_test.js b/packages/ember/tests/default_initializers_test.js new file mode 100644 index 00000000000..989dfc17e2e --- /dev/null +++ b/packages/ember/tests/default_initializers_test.js @@ -0,0 +1,39 @@ +import Application from "ember-application/system/application"; +import TextField from "ember-views/views/text_field"; +import Checkbox from "ember-views/views/checkbox"; + +import run from "ember-metal/run_loop"; + +var App; + +QUnit.module("Default Registry", { + setup() { + run(function() { + App = Application.create({ + rootElement: '#qunit-fixture' + }); + + App.deferReadiness(); + }); + }, + + teardown() { + run(App, 'destroy'); + } +}); + +QUnit.test("Default objects are registered", function(assert) { + App.instanceInitializer({ + name: "test", + initialize(instance) { + var registry = instance.registry; + + assert.strictEqual(registry.resolve("component:-text-field"), TextField, "TextField was registered"); + assert.strictEqual(registry.resolve("component:-checkbox"), Checkbox, "Checkbox was registered"); + } + }); + + run(function() { + App.advanceReadiness(); + }); +}); diff --git a/packages/ember/tests/helpers/helper_registration_test.js b/packages/ember/tests/helpers/helper_registration_test.js index 7f8920f993e..2d2cdb8ae7d 100644 --- a/packages/ember/tests/helpers/helper_registration_test.js +++ b/packages/ember/tests/helpers/helper_registration_test.js @@ -6,6 +6,7 @@ var compile, helpers, makeBoundHelper; compile = EmberHandlebars.compile; helpers = EmberHandlebars.helpers; makeBoundHelper = EmberHandlebars.makeBoundHelper; +var makeViewHelper = EmberHandlebars.makeViewHelper; var App, registry, container; @@ -83,6 +84,22 @@ QUnit.test("Bound helpers registered on the container can be late-invoked", func ok(!helpers['x-reverse'], "Container-registered helper doesn't wind up on global helpers hash"); }); +QUnit.test("Bound `makeViewHelper` helpers registered on the container can be used", function() { + Ember.TEMPLATES.application = compile("{{x-foo}} {{x-foo name=foo}}
");
+
+ boot(function() {
+ registry.register('controller:application', Ember.Controller.extend({
+ foo: "alex"
+ }));
+
+ registry.register('helper:x-foo', makeViewHelper(Ember.Component.extend({
+ layout: compile('woot!!{{attrs.name}}')
+ })));
+ });
+
+ equal(Ember.$('#wrapper').text(), "woot!! woot!!alex", "The helper was invoked from the container");
+});
+
// we have unit tests for this in ember-htmlbars/tests/system/lookup-helper
// and we are not going to recreate the handlebars helperMissing concept
QUnit.test("Undashed helpers registered on the container can not (presently) be invoked", function() {
diff --git a/packages/ember/tests/helpers/link_to_test.js b/packages/ember/tests/helpers/link_to_test.js
index 960222a7be7..8dff4224396 100644
--- a/packages/ember/tests/helpers/link_to_test.js
+++ b/packages/ember/tests/helpers/link_to_test.js
@@ -193,10 +193,7 @@ QUnit.test("the {{link-to}} doesn't apply a 'disabled' class if disabledWhen is
});
QUnit.test("the {{link-to}} helper supports a custom disabledClass", function () {
- Ember.TEMPLATES.index = compile('{{#link-to "about" id="about-link" disabledWhen="shouldDisable" disabledClass="do-not-want"}}About{{/link-to}}');
- App.IndexController = Ember.Controller.extend({
- shouldDisable: true
- });
+ Ember.TEMPLATES.index = compile('{{#link-to "about" id="about-link" disabledWhen=true disabledClass="do-not-want"}}About{{/link-to}}');
Router.map(function() {
this.route("about");
@@ -213,10 +210,7 @@ QUnit.test("the {{link-to}} helper supports a custom disabledClass", function ()
});
QUnit.test("the {{link-to}} helper does not respond to clicks when disabled", function () {
- Ember.TEMPLATES.index = compile('{{#link-to "about" id="about-link" disabledWhen="shouldDisable"}}About{{/link-to}}');
- App.IndexController = Ember.Controller.extend({
- shouldDisable: true
- });
+ Ember.TEMPLATES.index = compile('{{#link-to "about" id="about-link" disabledWhen=true}}About{{/link-to}}');
Router.map(function() {
this.route("about");
@@ -449,7 +443,7 @@ QUnit.test("The {{link-to}} helper moves into the named route with context", fun
this.resource("item", { path: "/item/:id" });
});
- Ember.TEMPLATES.about = compile("List
- {{#each person in model}}
- {{#link-to 'item' person}}{{person.name}}{{/link-to}} {{/each}}
List
- {{#each model as |person|}}
- {{#link-to 'item' person}}{{person.name}}{{/link-to}} {{/each}}
Home
- {{#each person in controller}}
- {{link-to person.name 'item' person}} {{/each}}
Home
- {{#each controller as |person|}}
- {{link-to person.name 'item' person}} {{/each}}
Item
{{model.name}}
{{#link-to 'index' id='home-link'}}Home{{/link-to}}"); bootApplication(); diff --git a/packages/ember/tests/routing/basic_test.js b/packages/ember/tests/routing/basic_test.js index 8ce7796087e..9b285e3d68a 100644 --- a/packages/ember/tests/routing/basic_test.js +++ b/packages/ember/tests/routing/basic_test.js @@ -1125,7 +1125,7 @@ asyncTest("Nested callbacks are not exited when moving to siblings", function() }); }); -asyncTest("Events are triggered on the controller if a matching action name is implemented", function() { +QUnit.asyncTest("Events are triggered on the controller if a matching action name is implemented", function() { Router.map(function() { this.route("home", { path: "/" }); }); @@ -1169,7 +1169,7 @@ asyncTest("Events are triggered on the controller if a matching action name is i action.handler(event); }); -asyncTest("Events are triggered on the current state when defined in `actions` object", function() { +QUnit.asyncTest("Events are triggered on the current state when defined in `actions` object", function() { Router.map(function() { this.route("home", { path: "/" }); }); @@ -1203,7 +1203,7 @@ asyncTest("Events are triggered on the current state when defined in `actions` o action.handler(event); }); -asyncTest("Events defined in `actions` object are triggered on the current state when routes are nested", function() { +QUnit.asyncTest("Events defined in `actions` object are triggered on the current state when routes are nested", function() { Router.map(function() { this.resource("root", { path: "/" }, function() { this.route("index", { path: "/" }); @@ -1241,7 +1241,7 @@ asyncTest("Events defined in `actions` object are triggered on the current state action.handler(event); }); -asyncTest("Events are triggered on the current state when defined in `events` object (DEPRECATED)", function() { +QUnit.asyncTest("Events are triggered on the current state when defined in `events` object (DEPRECATED)", function() { Router.map(function() { this.route("home", { path: "/" }); }); @@ -1276,7 +1276,7 @@ asyncTest("Events are triggered on the current state when defined in `events` ob action.handler(event); }); -asyncTest("Events defined in `events` object are triggered on the current state when routes are nested (DEPRECATED)", function() { +QUnit.asyncTest("Events defined in `events` object are triggered on the current state when routes are nested (DEPRECATED)", function() { Router.map(function() { this.resource("root", { path: "/" }, function() { this.route("index", { path: "/" }); @@ -1354,7 +1354,7 @@ QUnit.test("Events can be handled by inherited event handlers", function() { router.send("baz"); }); -asyncTest("Actions are not triggered on the controller if a matching action name is implemented as a method", function() { +QUnit.asyncTest("Actions are not triggered on the controller if a matching action name is implemented as a method", function() { Router.map(function() { this.route("home", { path: "/" }); }); @@ -1397,7 +1397,7 @@ asyncTest("Actions are not triggered on the controller if a matching action name action.handler(event); }); -asyncTest("actions can be triggered with multiple arguments", function() { +QUnit.asyncTest("actions can be triggered with multiple arguments", function() { Router.map(function() { this.resource("root", { path: "/" }, function() { this.route("index", { path: "/" }); @@ -3604,8 +3604,6 @@ QUnit.test("Can render into a named outlet at the top level, later", function() Ember.run(router, 'send', 'launch'); - //debugger; - //router._setOutlets(); equal(Ember.$('#qunit-fixture').text(), "A-The index-B-Hello world-C", "second render"); }); @@ -3740,7 +3738,7 @@ QUnit.test("Allows any route to disconnectOutlet another route's templates", fun equal(trim(Ember.$('#qunit-fixture').text()), 'hi'); }); -QUnit.test("Can render({into:...}) the render helper", function() { +QUnit.test("Can this.render({into:...}) the render helper", function() { Ember.TEMPLATES.application = compile('{{render "foo"}}'); Ember.TEMPLATES.foo = compile('{{outlet}}
');
Ember.TEMPLATES.index = compile('other');
@@ -3793,7 +3791,7 @@ QUnit.test("Can disconnect from the render helper", function() {
});
-QUnit.test("Can render({into:...}) the render helper's children", function() {
+QUnit.test("Can this.render({into:...}) the render helper's children", function() {
Ember.TEMPLATES.application = compile('{{render "foo"}}');
Ember.TEMPLATES.foo = compile('{{outlet}}
');
Ember.TEMPLATES.index = compile('{{outlet}}
');
@@ -3850,7 +3848,7 @@ QUnit.test("Can disconnect from the render helper's children", function() {
equal(Ember.$('#qunit-fixture .foo .index').text(), '');
});
-QUnit.test("Can render({into:...}) nested render helpers", function() {
+QUnit.test("Can this.render({into:...}) nested render helpers", function() {
Ember.TEMPLATES.application = compile('{{render "foo"}}');
Ember.TEMPLATES.foo = compile('{{render "bar"}}
');
Ember.TEMPLATES.bar = compile('');
@@ -3903,3 +3901,58 @@ QUnit.test("Can disconnect from nested render helpers", function() {
Ember.run(router, 'send', 'disconnect');
equal(Ember.$('#qunit-fixture .bar').text(), '');
});
+
+QUnit.test("Can render with layout", function() {
+ Ember.TEMPLATES.application = compile('{{outlet}}');
+ Ember.TEMPLATES.index = compile('index-template');
+ Ember.TEMPLATES['my-layout'] = compile('my-layout [{{yield}}]');
+
+ App.IndexView = Ember.View.extend({
+ layoutName: 'my-layout'
+ });
+
+ bootApplication();
+ equal(Ember.$('#qunit-fixture').text(), 'my-layout [index-template]');
+});
+
+QUnit.test("Components inside an outlet have their didInsertElement hook invoked when the route is displayed", function(assert) {
+ Ember.TEMPLATES.index = compile('{{#if showFirst}}{{my-component}}{{else}}{{other-component}}{{/if}}');
+
+ var myComponentCounter = 0;
+ var otherComponentCounter = 0;
+ var indexController;
+
+ App.IndexController = Ember.Controller.extend({
+ showFirst: true
+ });
+
+ App.IndexRoute = Ember.Route.extend({
+ setupController(controller) {
+ indexController = controller;
+ }
+ });
+
+ App.MyComponentComponent = Ember.Component.extend({
+ didInsertElement() {
+ myComponentCounter++;
+ }
+ });
+
+ App.OtherComponentComponent = Ember.Component.extend({
+ didInsertElement() {
+ otherComponentCounter++;
+ }
+ });
+
+ bootApplication();
+
+ assert.strictEqual(myComponentCounter, 1, "didInsertElement invoked on displayed component");
+ assert.strictEqual(otherComponentCounter, 0, "didInsertElement not invoked on displayed component");
+
+ Ember.run(function() {
+ indexController.set('showFirst', false);
+ });
+
+ assert.strictEqual(myComponentCounter, 1, "didInsertElement not invoked on displayed component");
+ assert.strictEqual(otherComponentCounter, 1, "didInsertElement invoked on displayed component");
+});
diff --git a/packages/ember/tests/routing/query_params_test.js b/packages/ember/tests/routing/query_params_test.js
index 09fcb222817..efb2a2b3d04 100644
--- a/packages/ember/tests/routing/query_params_test.js
+++ b/packages/ember/tests/routing/query_params_test.js
@@ -1142,7 +1142,7 @@ QUnit.test("opting into replace does not affect transitions between routes", fun
Ember.TEMPLATES.application = compile(
"{{link-to 'Foo' 'foo' id='foo-link'}}" +
"{{link-to 'Bar' 'bar' id='bar-no-qp-link'}}" +
- "{{link-to 'Bar' 'bar' (query-params raytiley='isanerd') id='bar-link'}}" +
+ "{{link-to 'Bar' 'bar' (query-params raytiley='isthebest') id='bar-link'}}" +
"{{outlet}}"
);
App.Router.map(function() {
@@ -1152,7 +1152,7 @@ QUnit.test("opting into replace does not affect transitions between routes", fun
App.BarController = Ember.Controller.extend({
queryParams: ['raytiley'],
- raytiley: 'isadork'
+ raytiley: 'israd'
});
App.BarRoute = Ember.Route.extend({
@@ -1172,13 +1172,13 @@ QUnit.test("opting into replace does not affect transitions between routes", fun
expectedPushURL = '/bar';
Ember.run(Ember.$('#bar-no-qp-link'), 'click');
- expectedReplaceURL = '/bar?raytiley=boo';
- setAndFlush(controller, 'raytiley', 'boo');
+ expectedReplaceURL = '/bar?raytiley=woot';
+ setAndFlush(controller, 'raytiley', 'woot');
expectedPushURL = '/foo';
Ember.run(Ember.$('#foo-link'), 'click');
- expectedPushURL = '/bar?raytiley=isanerd';
+ expectedPushURL = '/bar?raytiley=isthebest';
Ember.run(Ember.$('#bar-link'), 'click');
});
diff --git a/packages/ember/tests/routing/toplevel_dom_test.js b/packages/ember/tests/routing/toplevel_dom_test.js
new file mode 100644
index 00000000000..413aab4f17a
--- /dev/null
+++ b/packages/ember/tests/routing/toplevel_dom_test.js
@@ -0,0 +1,65 @@
+import "ember";
+import EmberHandlebars from "ember-htmlbars/compat";
+
+var compile = EmberHandlebars.compile;
+
+var Router, App, templates, router, container;
+
+function bootApplication() {
+ for (var name in templates) {
+ Ember.TEMPLATES[name] = compile(templates[name]);
+ }
+ router = container.lookup('router:main');
+ Ember.run(App, 'advanceReadiness');
+}
+
+QUnit.module("Top Level DOM Structure", {
+ setup() {
+ Ember.run(function() {
+ App = Ember.Application.create({
+ name: "App",
+ rootElement: '#qunit-fixture'
+ });
+
+ App.deferReadiness();
+
+ App.Router.reopen({
+ location: 'none'
+ });
+
+ Router = App.Router;
+
+ container = App.__container__;
+
+ templates = {
+ application: 'hello world'
+ };
+ });
+ },
+
+ teardown() {
+ Ember.run(function() {
+ App.destroy();
+ App = null;
+
+ Ember.TEMPLATES = {};
+ });
+
+ Ember.NoneLocation.reopen({
+ path: ''
+ });
+ }
+});
+
+QUnit.test("Topmost template always get an element", function() {
+ bootApplication();
+ equal(Ember.$('#qunit-fixture > .ember-view').text(), 'hello world');
+});
+
+QUnit.test("If topmost view has its own element, it doesn't get wrapped in a higher element", function() {
+ App.registry.register('view:application', Ember.View.extend({
+ classNames: ['im-special']
+ }));
+ bootApplication();
+ equal(Ember.$('#qunit-fixture > .im-special').text(), 'hello world');
+});
diff --git a/tests/index.html b/tests/index.html
index 4c99ba9e18f..3529e154b6c 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -37,6 +37,18 @@
};
window.ENV = window.ENV || {};
+ window.printTestCounts = function() {
+ var passing = $("li[id^='qunit-'].pass").length;
+ var failing = $("li[id^='qunit-'].fail").length;
+ var total = passing + failing;
+
+ console.table([{ passing: passing, failing: failing, total: total }], ["passing", "failing", "total"]);
+ }
+
+ window.findPassingSkippedTests = function() {
+ console.log($("li[id^='qunit-'].pass:contains(SKIPPED)").map(function() { return $("strong", this).text() }).toArray().join("\n"));
+ };
+
// Test for "hooks in ENV.EMBER_LOAD_HOOKS['hookName'] get executed"
ENV.EMBER_LOAD_HOOKS = ENV.EMBER_LOAD_HOOKS || {};
ENV.EMBER_LOAD_HOOKS.__before_ember_test_hook__ = ENV.EMBER_LOAD_HOOKS.__before_ember_test_hook__ || [];
@@ -86,6 +98,19 @@
diff --git a/tests/node/app-boot-test.js b/tests/node/app-boot-test.js
index 890361fed55..37bfa3861d9 100644
--- a/tests/node/app-boot-test.js
+++ b/tests/node/app-boot-test.js
@@ -74,6 +74,7 @@ function registerDOMHelper(app) {
function registerTemplates(app, templates) {
app.instanceInitializer({
name: 'register-application-template',
+
initialize: function(app) {
for (var key in templates) {
app.registry.register('template:' + key, compile(templates[key]));
@@ -104,7 +105,7 @@ QUnit.module("App boot", {
Ember = require(emberPath);
compile = require(templateCompilerPath).compile;
Ember.testing = true;
- DOMHelper = Ember.View.DOMHelper;
+ DOMHelper = Ember.HTMLBars.DOMHelper;
domHelper = createDOMHelper();
run = Ember.run;
},
@@ -164,7 +165,7 @@ if (canUseInstanceInitializers && canUseApplicationVisit) {
assert.ok(serializer.serialize(view.element).match(/Hello World<\/h1>/));
});
- QUnit.test("It is possible to render a view with a nested {{view}} helper in Node", function(assert) {
+ QUnit.skip("It is possible to render a view with a nested {{view}} helper in Node", function(assert) {
var View = Ember.Component.extend({
renderer: new Ember.View._Renderer(new DOMHelper(new SimpleDOM.Document())),
layout: compile("Hello {{#if hasExistence}}{{location}}{{/if}}
{{view bar}}"),
@@ -182,11 +183,10 @@ if (canUseInstanceInitializers && canUseApplicationVisit) {
run(view, view.createElement);
var serializer = new SimpleDOM.HTMLSerializer(SimpleDOM.voidMap);
-
assert.ok(serializer.serialize(view.element).match(/Hello World<\/h1> The files are \*inside\* the computer\?\!<\/p><\/div><\/div>/));
});
- QUnit.test("It is possible to render a view with {{link-to}} in Node", function(assert) {
+ QUnit.skip("It is possible to render a view with {{link-to}} in Node", function(assert) {
run(function() {
app = createApplication();
@@ -207,7 +207,7 @@ if (canUseInstanceInitializers && canUseApplicationVisit) {
});
});
- QUnit.test("It is possible to render outlets in Node", function(assert) {
+ QUnit.skip("It is possible to render outlets in Node", function(assert) {
run(function() {
app = createApplication();
diff --git a/tests/node/template-compiler-test.js b/tests/node/template-compiler-test.js
index 2230a3ae26b..c45cad4eaa9 100644
--- a/tests/node/template-compiler-test.js
+++ b/tests/node/template-compiler-test.js
@@ -37,10 +37,10 @@ test('uses plugins with precompile', function() {
var templateCompiler = require(path.join(distPath, 'ember-template-compiler'));
templateOutput = templateCompiler.precompile('{{#each foo in bar}}{{/each}}');
- ok(templateOutput.match(/{"keyword": "foo"}/), 'transform each in to block params');
+ ok(templateOutput.match(/locals: \["foo"\]/), 'transform each in to block params');
templateOutput = templateCompiler.precompile('{{#with foo as bar}}{{/with}}');
- ok(templateOutput.match(/set\(env, context, "bar", blockArguments\[0\]\);/), 'transform with as to block params');
+ ok(templateOutput.match(/locals: \["bar"\]/), 'transform with as to block params');
});
test('allows enabling of features', function() {
@@ -53,7 +53,7 @@ test('allows enabling of features', function() {
templateCompiler._Ember.FEATURES['ember-htmlbars-component-generation'] = true;
templateOutput = templateCompiler.precompile('
The files are \*inside\* the computer\?\!<\/p><\/div><\/div>/));
});
- QUnit.test("It is possible to render a view with {{link-to}} in Node", function(assert) {
+ QUnit.skip("It is possible to render a view with {{link-to}} in Node", function(assert) {
run(function() {
app = createApplication();
@@ -207,7 +207,7 @@ if (canUseInstanceInitializers && canUseApplicationVisit) {
});
});
- QUnit.test("It is possible to render outlets in Node", function(assert) {
+ QUnit.skip("It is possible to render outlets in Node", function(assert) {
run(function() {
app = createApplication();
diff --git a/tests/node/template-compiler-test.js b/tests/node/template-compiler-test.js
index 2230a3ae26b..c45cad4eaa9 100644
--- a/tests/node/template-compiler-test.js
+++ b/tests/node/template-compiler-test.js
@@ -37,10 +37,10 @@ test('uses plugins with precompile', function() {
var templateCompiler = require(path.join(distPath, 'ember-template-compiler'));
templateOutput = templateCompiler.precompile('{{#each foo in bar}}{{/each}}');
- ok(templateOutput.match(/{"keyword": "foo"}/), 'transform each in to block params');
+ ok(templateOutput.match(/locals: \["foo"\]/), 'transform each in to block params');
templateOutput = templateCompiler.precompile('{{#with foo as bar}}{{/with}}');
- ok(templateOutput.match(/set\(env, context, "bar", blockArguments\[0\]\);/), 'transform with as to block params');
+ ok(templateOutput.match(/locals: \["bar"\]/), 'transform with as to block params');
});
test('allows enabling of features', function() {
@@ -53,7 +53,7 @@ test('allows enabling of features', function() {
templateCompiler._Ember.FEATURES['ember-htmlbars-component-generation'] = true;
templateOutput = templateCompiler.precompile('