I am the template
+ ```
+
+ Within an Ember application is more common to define a Handlebars templates as
+ part of a page:
+
+ ```html
+
+ ```
+
+ And associate it by name using a view's `templateName` property:
+
+ ```javascript
+ AView = Ember.View.extend({
+ templateName: 'some-template'
+ });
+ ```
+
+ If you have nested resources, your Handlebars template will look like this:
+
+ ```html
+
+ ```
+
+ And `templateName` property:
+
+ ```javascript
+ AView = Ember.View.extend({
+ templateName: 'posts/new'
+ });
+ ```
+
+ Using a value for `templateName` that does not have a Handlebars template
+ with a matching `data-template-name` attribute will throw an error.
+
+ For views classes that may have a template later defined (e.g. as the block
+ portion of a `{{view}}` Handlebars helper call in another template or in
+ a subclass), you can provide a `defaultTemplate` property set to compiled
+ template function. If a template is not later provided for the view instance
+ the `defaultTemplate` value will be used:
+
+ ```javascript
+ AView = Ember.View.extend({
+ defaultTemplate: Ember.Handlebars.compile('I was the default'),
+ template: null,
+ templateName: null
+ });
+ ```
+
+ Will result in instances with an HTML representation of:
+
+ ```html
+ I was the default
+ ```
+
+ If a `template` or `templateName` is provided it will take precedence over
+ `defaultTemplate`:
+
+ ```javascript
+ AView = Ember.View.extend({
+ defaultTemplate: Ember.Handlebars.compile('I was the default')
+ });
+
+ aView = AView.create({
+ template: Ember.Handlebars.compile('I was the template, not default')
+ });
+ ```
+
+ Will result in the following HTML representation when rendered:
+
+ ```html
+ I was the template, not default
+ ```
+
+ ## View Context
+
+ The default context of the compiled template is the view's controller:
+
+ ```javascript
+ AView = Ember.View.extend({
+ template: Ember.Handlebars.compile('Hello {{excitedGreeting}}')
+ });
+
+ aController = Ember.Object.create({
+ firstName: 'Barry',
+ excitedGreeting: function() {
+ return this.get("content.firstName") + "!!!"
+ }.property()
+ });
+
+ aView = AView.create({
+ controller: aController,
+ });
+ ```
+
+ Will result in an HTML representation of:
+
+ ```html
+ Hello Barry!!!
+ ```
+
+ A context can also be explicitly supplied through the view's `context`
+ property. If the view has neither `context` nor `controller` properties, the
+ `parentView`'s context will be used.
+
+ ## Layouts
+
+ Views can have a secondary template that wraps their main template. Like
+ primary templates, layouts can be any function that accepts an optional
+ context parameter and returns a string of HTML that will be inserted inside
+ view's tag. Views whose HTML element is self closing (e.g. ``)
+ cannot have a layout and this property will be ignored.
+
+ Most typically in Ember a layout will be a compiled `Ember.Handlebars`
+ template.
+
+ A view's layout can be set directly with the `layout` property or reference
+ an existing Handlebars template by name with the `layoutName` property.
+
+ A template used as a layout must contain a single use of the Handlebars
+ `{{yield}}` helper. The HTML contents of a view's rendered `template` will be
+ inserted at this location:
+
+ ```javascript
+ AViewWithLayout = Ember.View.extend({
+ layout: Ember.Handlebars.compile("{{yield}}
")
+ template: Ember.Handlebars.compile("I got wrapped"),
+ });
+ ```
+
+ Will result in view instances with an HTML representation of:
+
+ ```html
+
+
+ ```
+
+ See [Ember.Handlebars.helpers.yield](/api/classes/Ember.Handlebars.helpers.html#method_yield)
+ for more information.
+
+ ## Responding to Browser Events
+
+ Views can respond to user-initiated events in one of three ways: method
+ implementation, through an event manager, and through `{{action}}` helper use
+ in their template or layout.
+
+ ### Method Implementation
+
+ Views can respond to user-initiated events by implementing a method that
+ matches the event name. A `jQuery.Event` object will be passed as the
+ argument to this method.
+
+ ```javascript
+ AView = Ember.View.extend({
+ click: function(event) {
+ // will be called when when an instance's
+ // rendered element is clicked
+ }
+ });
+ ```
+
+ ### Event Managers
+
+ Views can define an object as their `eventManager` property. This object can
+ then implement methods that match the desired event names. Matching events
+ that occur on the view's rendered HTML or the rendered HTML of any of its DOM
+ descendants will trigger this method. A `jQuery.Event` object will be passed
+ as the first argument to the method and an `Ember.View` object as the
+ second. The `Ember.View` will be the view whose rendered HTML was interacted
+ with. This may be the view with the `eventManager` property or one of its
+ descendent views.
+
+ ```javascript
+ AView = Ember.View.extend({
+ eventManager: Ember.Object.create({
+ doubleClick: function(event, view) {
+ // will be called when when an instance's
+ // rendered element or any rendering
+ // of this views's descendent
+ // elements is clicked
+ }
+ })
+ });
+ ```
+
+ An event defined for an event manager takes precedence over events of the
+ same name handled through methods on the view.
+
+ ```javascript
+ AView = Ember.View.extend({
+ mouseEnter: function(event) {
+ // will never trigger.
+ },
+ eventManager: Ember.Object.create({
+ mouseEnter: function(event, view) {
+ // takes precedence over AView#mouseEnter
+ }
+ })
+ });
+ ```
+
+ Similarly a view's event manager will take precedence for events of any views
+ rendered as a descendent. A method name that matches an event name will not
+ be called if the view instance was rendered inside the HTML representation of
+ a view that has an `eventManager` property defined that handles events of the
+ name. Events not handled by the event manager will still trigger method calls
+ on the descendent.
+
+ ```javascript
+ OuterView = Ember.View.extend({
+ template: Ember.Handlebars.compile("outer {{#view InnerView}}inner{{/view}} outer"),
+ eventManager: Ember.Object.create({
+ mouseEnter: function(event, view) {
+ // view might be instance of either
+ // OuterView or InnerView depending on
+ // where on the page the user interaction occured
+ }
+ })
+ });
+
+ InnerView = Ember.View.extend({
+ click: function(event) {
+ // will be called if rendered inside
+ // an OuterView because OuterView's
+ // eventManager doesn't handle click events
+ },
+ mouseEnter: function(event) {
+ // will never be called if rendered inside
+ // an OuterView.
+ }
+ });
+ ```
+
+ ### Handlebars `{{action}}` Helper
+
+ See [Handlebars.helpers.action](/api/classes/Ember.Handlebars.helpers.html#method_action).
+
+ ### Event Names
+
+ All of the event handling approaches described above respond to the same set
+ of events. The names of the built-in events are listed below. (The hash of
+ built-in events exists in `Ember.EventDispatcher`.) Additional, custom events
+ can be registered by using `Ember.Application.customEvents`.
+
+ Touch events:
+
+ * `touchStart`
+ * `touchMove`
+ * `touchEnd`
+ * `touchCancel`
+
+ Keyboard events
+
+ * `keyDown`
+ * `keyUp`
+ * `keyPress`
+
+ Mouse events
+
+ * `mouseDown`
+ * `mouseUp`
+ * `contextMenu`
+ * `click`
+ * `doubleClick`
+ * `mouseMove`
+ * `focusIn`
+ * `focusOut`
+ * `mouseEnter`
+ * `mouseLeave`
+
+ Form events:
+
+ * `submit`
+ * `change`
+ * `focusIn`
+ * `focusOut`
+ * `input`
+
+ HTML5 drag and drop events:
+
+ * `dragStart`
+ * `drag`
+ * `dragEnter`
+ * `dragLeave`
+ * `drop`
+ * `dragEnd`
+
+ ## Handlebars `{{view}}` Helper
+
+ Other `Ember.View` instances can be included as part of a view's template by
+ using the `{{view}}` Handlebars helper. See [Ember.Handlebars.helpers.view](/api/classes/Ember.Handlebars.helpers.html#method_view)
+ for additional information.
+
+ @class View
+ @namespace Ember
+ @extends Ember.CoreView
+*/
+Ember.View = Ember.CoreView.extend({
+
+ concatenatedProperties: ['classNames', 'classNameBindings', 'attributeBindings'],
+
+ /**
+ @property isView
+ @type Boolean
+ @default true
+ @static
+ */
+ isView: true,
+
+ // ..........................................................
+ // TEMPLATE SUPPORT
+ //
+
+ /**
+ The name of the template to lookup if no template is provided.
+
+ By default `Ember.View` will lookup a template with this name in
+ `Ember.TEMPLATES` (a shared global object).
+
+ @property templateName
+ @type String
+ @default null
+ */
+ templateName: null,
+
+ /**
+ The name of the layout to lookup if no layout is provided.
+
+ By default `Ember.View` will lookup a template with this name in
+ `Ember.TEMPLATES` (a shared global object).
+
+ @property layoutName
+ @type String
+ @default null
+ */
+ layoutName: null,
+
+ /**
+ The template used to render the view. This should be a function that
+ accepts an optional context parameter and returns a string of HTML that
+ will be inserted into the DOM relative to its parent view.
+
+ In general, you should set the `templateName` property instead of setting
+ the template yourself.
+
+ @property template
+ @type Function
+ */
+ template: Ember.computed('templateName', function(key, value) {
+ if (value !== undefined) { return value; }
+
+ var templateName = get(this, 'templateName'),
+ template = this.templateForName(templateName, 'template');
+
+ Ember.assert("You specified the templateName " + templateName + " for " + this + ", but it did not exist.", !templateName || template);
+
+ return template || get(this, 'defaultTemplate');
+ }),
+
+ /**
+ The controller managing this view. If this property is set, it will be
+ made available for use by the template.
+
+ @property controller
+ @type Object
+ */
+ controller: Ember.computed('_parentView', function(key) {
+ var parentView = get(this, '_parentView');
+ return parentView ? get(parentView, 'controller') : null;
+ }),
+
+ /**
+ A view may contain a layout. A layout is a regular template but
+ supersedes the `template` property during rendering. It is the
+ responsibility of the layout template to retrieve the `template`
+ property from the view (or alternatively, call `Handlebars.helpers.yield`,
+ `{{yield}}`) to render it in the correct location.
+
+ This is useful for a view that has a shared wrapper, but which delegates
+ the rendering of the contents of the wrapper to the `template` property
+ on a subclass.
+
+ @property layout
+ @type Function
+ */
+ layout: Ember.computed(function(key) {
+ var layoutName = get(this, 'layoutName'),
+ layout = this.templateForName(layoutName, 'layout');
+
+ Ember.assert("You specified the layoutName " + layoutName + " for " + this + ", but it did not exist.", !layoutName || layout);
+
+ return layout || get(this, 'defaultLayout');
+ }).property('layoutName'),
+
+ _yield: function(context, options) {
+ var template = get(this, 'template');
+ if (template) { template(context, options); }
+ },
+
+ templateForName: function(name, type) {
+ if (!name) { return; }
+ Ember.assert("templateNames are not allowed to contain periods: "+name, name.indexOf('.') === -1);
+
+ // the defaultContainer is deprecated
+ var container = this.container || (Ember.Container && Ember.Container.defaultContainer);
+ return container && container.lookup('template:' + name);
+ },
+
+ /**
+ The object from which templates should access properties.
+
+ This object will be passed to the template function each time the render
+ method is called, but it is up to the individual function to decide what
+ to do with it.
+
+ By default, this will be the view's controller.
+
+ @property context
+ @type Object
+ */
+ context: Ember.computed(function(key, value) {
+ if (arguments.length === 2) {
+ set(this, '_context', value);
+ return value;
+ } else {
+ return get(this, '_context');
+ }
+ }).volatile(),
+
+ /**
+ Private copy of the view's template context. This can be set directly
+ by Handlebars without triggering the observer that causes the view
+ to be re-rendered.
+
+ The context of a view is looked up as follows:
+
+ 1. Supplied context (usually by Handlebars)
+ 2. Specified controller
+ 3. `parentView`'s context (for a child of a ContainerView)
+
+ The code in Handlebars that overrides the `_context` property first
+ checks to see whether the view has a specified controller. This is
+ something of a hack and should be revisited.
+
+ @property _context
+ @private
+ */
+ _context: Ember.computed(function(key) {
+ var parentView, controller;
+
+ if (controller = get(this, 'controller')) {
+ return controller;
+ }
+
+ parentView = this._parentView;
+ if (parentView) {
+ return get(parentView, '_context');
+ }
+
+ return null;
+ }),
+
+ /**
+ If a value that affects template rendering changes, the view should be
+ re-rendered to reflect the new value.
+
+ @method _contextDidChange
+ @private
+ */
+ _contextDidChange: Ember.observer('context', function() {
+ this.rerender();
+ }),
+
+ /**
+ If `false`, the view will appear hidden in DOM.
+
+ @property isVisible
+ @type Boolean
+ @default null
+ */
+ isVisible: true,
+
+ /**
+ Array of child views. You should never edit this array directly.
+ Instead, use `appendChild` and `removeFromParent`.
+
+ @property childViews
+ @type Array
+ @default []
+ @private
+ */
+ childViews: childViewsProperty,
+
+ _childViews: EMPTY_ARRAY,
+
+ // When it's a virtual view, we need to notify the parent that their
+ // childViews will change.
+ _childViewsWillChange: Ember.beforeObserver('childViews', function() {
+ if (this.isVirtual) {
+ var parentView = get(this, 'parentView');
+ if (parentView) { Ember.propertyWillChange(parentView, 'childViews'); }
+ }
+ }),
+
+ // When it's a virtual view, we need to notify the parent that their
+ // childViews did change.
+ _childViewsDidChange: Ember.observer('childViews', function() {
+ if (this.isVirtual) {
+ var parentView = get(this, 'parentView');
+ if (parentView) { Ember.propertyDidChange(parentView, 'childViews'); }
+ }
+ }),
+
+ /**
+ Return the nearest ancestor that is an instance of the provided
+ class.
+
+ @method nearestInstanceOf
+ @param {Class} klass Subclass of Ember.View (or Ember.View itself)
+ @return Ember.View
+ @deprecated
+ */
+ nearestInstanceOf: function(klass) {
+ Ember.deprecate("nearestInstanceOf is deprecated and will be removed from future releases. Use nearestOfType.");
+ var view = get(this, 'parentView');
+
+ while (view) {
+ if (view instanceof klass) { return view; }
+ view = get(view, 'parentView');
+ }
+ },
+
+ /**
+ Return the nearest ancestor that is an instance of the provided
+ class or mixin.
+
+ @method nearestOfType
+ @param {Class,Mixin} klass Subclass of Ember.View (or Ember.View itself),
+ or an instance of Ember.Mixin.
+ @return Ember.View
+ */
+ nearestOfType: function(klass) {
+ var view = get(this, 'parentView'),
+ isOfType = klass instanceof Ember.Mixin ?
+ function(view) { return klass.detect(view); } :
+ function(view) { return klass.detect(view.constructor); };
+
+ while (view) {
+ if (isOfType(view)) { return view; }
+ view = get(view, 'parentView');
+ }
+ },
+
+ /**
+ Return the nearest ancestor that has a given property.
+
+ @function nearestWithProperty
+ @param {String} property A property name
+ @return Ember.View
+ */
+ nearestWithProperty: function(property) {
+ var view = get(this, 'parentView');
+
+ while (view) {
+ if (property in view) { return view; }
+ view = get(view, 'parentView');
+ }
+ },
+
+ /**
+ Return the nearest ancestor whose parent is an instance of
+ `klass`.
+
+ @method nearestChildOf
+ @param {Class} klass Subclass of Ember.View (or Ember.View itself)
+ @return Ember.View
+ */
+ nearestChildOf: function(klass) {
+ var view = get(this, 'parentView');
+
+ while (view) {
+ if (get(view, 'parentView') instanceof klass) { return view; }
+ view = get(view, 'parentView');
+ }
+ },
+
+ /**
+ When the parent view changes, recursively invalidate `controller`
+
+ @method _parentViewDidChange
+ @private
+ */
+ _parentViewDidChange: Ember.observer('_parentView', function() {
+ if (this.isDestroying) { return; }
+
+ this.trigger('parentViewDidChange');
+
+ if (get(this, 'parentView.controller') && !get(this, 'controller')) {
+ this.notifyPropertyChange('controller');
+ }
+ }),
+
+ _controllerDidChange: Ember.observer('controller', function() {
+ if (this.isDestroying) { return; }
+
+ this.rerender();
+
+ this.forEachChildView(function(view) {
+ view.propertyDidChange('controller');
+ });
+ }),
+
+ cloneKeywords: function() {
+ var templateData = get(this, 'templateData');
+
+ var keywords = templateData ? Ember.copy(templateData.keywords) : {};
+ set(keywords, 'view', get(this, 'concreteView'));
+ set(keywords, '_view', this);
+ set(keywords, 'controller', get(this, 'controller'));
+
+ return keywords;
+ },
+
+ /**
+ Called on your view when it should push strings of HTML into a
+ `Ember.RenderBuffer`. Most users will want to override the `template`
+ or `templateName` properties instead of this method.
+
+ By default, `Ember.View` will look for a function in the `template`
+ property and invoke it with the value of `context`. The value of
+ `context` will be the view's controller unless you override it.
+
+ @method render
+ @param {Ember.RenderBuffer} buffer The render buffer
+ */
+ render: function(buffer) {
+ // If this view has a layout, it is the responsibility of the
+ // the layout to render the view's template. Otherwise, render the template
+ // directly.
+ var template = get(this, 'layout') || get(this, 'template');
+
+ if (template) {
+ var context = get(this, 'context');
+ var keywords = this.cloneKeywords();
+ var output;
+
+ var data = {
+ view: this,
+ buffer: buffer,
+ isRenderData: true,
+ keywords: keywords,
+ insideGroup: get(this, 'templateData.insideGroup')
+ };
+
+ // Invoke the template with the provided template context, which
+ // is the view's controller by default. A hash of data is also passed that provides
+ // the template with access to the view and render buffer.
+
+ Ember.assert('template must be a function. Did you mean to call Ember.Handlebars.compile("...") or specify templateName instead?', typeof template === 'function');
+ // The template should write directly to the render buffer instead
+ // of returning a string.
+ output = template(context, { data: data });
+
+ // If the template returned a string instead of writing to the buffer,
+ // push the string onto the buffer.
+ if (output !== undefined) { buffer.push(output); }
+ }
+ },
+
+ /**
+ 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
+ rendering process will be deferred to give bindings a chance
+ to synchronize.
+
+ If children were added during the rendering process using `appendChild`,
+ `rerender` will remove them, because they will be added again
+ if needed by the next `render`.
+
+ In general, if the display of your view changes, you should modify
+ the DOM element directly instead of manually calling `rerender`, which can
+ be slow.
+
+ @method rerender
+ */
+ rerender: function() {
+ return this.currentState.rerender(this);
+ },
+
+ clearRenderedChildren: function() {
+ var lengthBefore = this.lengthBeforeRender,
+ lengthAfter = this.lengthAfterRender;
+
+ // If there were child views created during the last call to render(),
+ // remove them under the assumption that they will be re-created when
+ // we re-render.
+
+ // VIEW-TODO: Unit test this path.
+ var childViews = this._childViews;
+ for (var i=lengthAfter-1; i>=lengthBefore; i--) {
+ if (childViews[i]) { childViews[i].destroy(); }
+ }
+ },
+
+ /**
+ Iterates over the view's `classNameBindings` array, inserts the value
+ of the specified property into the `classNames` array, then creates an
+ observer to update the view's element if the bound property ever changes
+ in the future.
+
+ @method _applyClassNameBindings
+ @private
+ */
+ _applyClassNameBindings: function(classBindings) {
+ var classNames = this.classNames,
+ elem, newClass, dasherizedClass;
+
+ // Loop through all of the configured bindings. These will be either
+ // property names ('isUrgent') or property paths relative to the view
+ // ('content.isUrgent')
+ a_forEach(classBindings, function(binding) {
+
+ Ember.assert("classNameBindings must not have spaces in them. Multiple class name bindings can be provided as elements of an array, e.g. ['foo', ':bar']", binding.indexOf(' ') === -1);
+
+ // Variable in which the old class value is saved. The observer function
+ // closes over this variable, so it knows which string to remove when
+ // the property changes.
+ var oldClass;
+ // Extract just the property name from bindings like 'foo:bar'
+ var parsedPath = Ember.View._parsePropertyPath(binding);
+
+ // Set up an observer on the context. If the property changes, toggle the
+ // class name.
+ var observer = function() {
+ // Get the current value of the property
+ newClass = this._classStringForProperty(binding);
+ elem = this.$();
+
+ // If we had previously added a class to the element, remove it.
+ if (oldClass) {
+ elem.removeClass(oldClass);
+ // Also remove from classNames so that if the view gets rerendered,
+ // the class doesn't get added back to the DOM.
+ classNames.removeObject(oldClass);
+ }
+
+ // If necessary, add a new class. Make sure we keep track of it so
+ // it can be removed in the future.
+ if (newClass) {
+ elem.addClass(newClass);
+ oldClass = newClass;
+ } else {
+ oldClass = null;
+ }
+ };
+
+ // Get the class name for the property at its current value
+ dasherizedClass = this._classStringForProperty(binding);
+
+ if (dasherizedClass) {
+ // Ensure that it gets into the classNames array
+ // so it is displayed when we render.
+ a_addObject(classNames, dasherizedClass);
+
+ // Save a reference to the class name so we can remove it
+ // if the observer fires. Remember that this variable has
+ // been closed over by the observer.
+ oldClass = dasherizedClass;
+ }
+
+ this.registerObserver(this, parsedPath.path, observer);
+ // Remove className so when the view is rerendered,
+ // the className is added based on binding reevaluation
+ this.one('willClearRender', function() {
+ if (oldClass) {
+ classNames.removeObject(oldClass);
+ oldClass = null;
+ }
+ });
+
+ }, this);
+ },
+
+ _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
+ @private
+ */
+ _applyAttributeBindings: function(buffer, attributeBindings) {
+ var attributeValue,
+ unspecifiedAttributeBindings = this._unspecifiedAttributeBindings = this._unspecifiedAttributeBindings || {};
+
+ a_forEach(attributeBindings, function(binding) {
+ var split = binding.split(':'),
+ property = split[0],
+ attributeName = split[1] || property;
+
+ if (property in this) {
+ this._setupAttributeBindingObservation(property, attributeName);
+
+ // Determine the current value and add it to the render buffer
+ // if necessary.
+ attributeValue = get(this, property);
+ Ember.View.applyAttributeBindings(buffer, attributeName, attributeValue);
+ } else {
+ unspecifiedAttributeBindings[property] = attributeName;
+ }
+ }, this);
+
+ // Lazily setup setUnknownProperty after attributeBindings are initially applied
+ this.setUnknownProperty = this._setUnknownProperty;
+ },
+
+ _setupAttributeBindingObservation: function(property, attributeName) {
+ var attributeValue, elem;
+
+ // Create an observer to add/remove/change the attribute if the
+ // JavaScript property changes.
+ var observer = function() {
+ elem = this.$();
+
+ attributeValue = get(this, property);
+
+ Ember.View.applyAttributeBindings(elem, attributeName, attributeValue);
+ };
+
+ this.registerObserver(this, property, observer);
+ },
+
+ /**
+ We're using setUnknownProperty as a hook to setup attributeBinding observers for
+ properties that aren't defined on a view at initialization time.
+
+ Note: setUnknownProperty will only be called once for each property.
+
+ @method setUnknownProperty
+ @param key
+ @param value
+ @private
+ */
+ setUnknownProperty: null, // Gets defined after initialization by _applyAttributeBindings
+
+ _setUnknownProperty: function(key, value) {
+ var attributeName = this._unspecifiedAttributeBindings && this._unspecifiedAttributeBindings[key];
+ if (attributeName) {
+ this._setupAttributeBindingObservation(key, attributeName);
+ }
+
+ defineProperty(this, key);
+ return set(this, key, value);
+ },
+
+ /**
+ Given a property name, returns a dasherized version of that
+ property name if the property evaluates to a non-falsy value.
+
+ For example, if the view has property `isUrgent` that evaluates to true,
+ passing `isUrgent` to this method will return `"is-urgent"`.
+
+ @method _classStringForProperty
+ @param property
+ @private
+ */
+ _classStringForProperty: function(property) {
+ var parsedPath = Ember.View._parsePropertyPath(property);
+ var path = parsedPath.path;
+
+ var val = get(this, path);
+ if (val === undefined && Ember.isGlobalPath(path)) {
+ val = get(Ember.lookup, path);
+ }
+
+ return Ember.View._classStringForValue(path, val, parsedPath.className, parsedPath.falsyClassName);
+ },
+
+ // ..........................................................
+ // ELEMENT SUPPORT
+ //
+
+ /**
+ Returns the current DOM element for the view.
+
+ @property element
+ @type DOMElement
+ */
+ element: Ember.computed('_parentView', function(key, value) {
+ if (value !== undefined) {
+ return this.currentState.setElement(this, value);
+ } else {
+ return this.currentState.getElement(this);
+ }
+ }),
+
+ /**
+ Returns a jQuery object for this view's element. If you pass in a selector
+ string, this method will return a jQuery object, using the current element
+ as its buffer.
+
+ For example, calling `view.$('li')` will return a jQuery object containing
+ all of the `li` elements inside the DOM element of this view.
+
+ @method $
+ @param {String} [selector] a jQuery-compatible selector string
+ @return {jQuery} the jQuery object for the DOM node
+ */
+ $: function(sel) {
+ return this.currentState.$(this, sel);
+ },
+
+ mutateChildViews: function(callback) {
+ var childViews = this._childViews,
+ idx = childViews.length,
+ view;
+
+ while(--idx >= 0) {
+ view = childViews[idx];
+ callback(this, view, idx);
+ }
+
+ return this;
+ },
+
+ forEachChildView: function(callback) {
+ var childViews = this._childViews;
+
+ if (!childViews) { return this; }
+
+ var len = childViews.length,
+ view, idx;
+
+ for (idx = 0; idx < len; idx++) {
+ view = childViews[idx];
+ callback(view);
+ }
+
+ return this;
+ },
+
+ /**
+ Appends the view's element to the specified parent element.
+
+ If the view does not have an HTML representation yet, `createElement()`
+ will be called automatically.
+
+ Note that this method just schedules the view to be appended; the DOM
+ element will not be appended to the given element until all bindings have
+ finished synchronizing.
+
+ This is not typically a function that you will need to call directly when
+ building your application. You might consider using `Ember.ContainerView`
+ instead. If you do need to use `appendTo`, be sure that the target element
+ you are providing is associated with an `Ember.Application` and does not
+ have an ancestor element that is associated with an Ember view.
+
+ @method appendTo
+ @param {String|DOMElement|jQuery} A selector, element, HTML string, or jQuery object
+ @return {Ember.View} receiver
+ */
+ appendTo: function(target) {
+ // Schedule the DOM element to be created and appended to the given
+ // element after bindings have synchronized.
+ this._insertElementLater(function() {
+ Ember.assert("You tried to append to (" + target + ") but that isn't in the DOM", Ember.$(target).length > 0);
+ Ember.assert("You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.", !Ember.$(target).is('.ember-view') && !Ember.$(target).parents().is('.ember-view'));
+ this.$().appendTo(target);
+ });
+
+ return this;
+ },
+
+ /**
+ Replaces the content of the specified parent element with this view's
+ element. If the view does not have an HTML representation yet,
+ `createElement()` will be called automatically.
+
+ Note that this method just schedules the view to be appended; the DOM
+ element will not be appended to the given element until all bindings have
+ finished synchronizing
+
+ @method replaceIn
+ @param {String|DOMElement|jQuery} target A selector, element, HTML string, or jQuery object
+ @return {Ember.View} received
+ */
+ replaceIn: function(target) {
+ Ember.assert("You tried to replace in (" + target + ") but that isn't in the DOM", Ember.$(target).length > 0);
+ Ember.assert("You cannot replace an existing Ember.View. Consider using Ember.ContainerView instead.", !Ember.$(target).is('.ember-view') && !Ember.$(target).parents().is('.ember-view'));
+
+ this._insertElementLater(function() {
+ Ember.$(target).empty();
+ this.$().appendTo(target);
+ });
+
+ return this;
+ },
+
+ /**
+ Schedules a DOM operation to occur during the next render phase. This
+ ensures that all bindings have finished synchronizing before the view is
+ rendered.
+
+ To use, pass a function that performs a DOM operation.
+
+ Before your function is called, this view and all child views will receive
+ the `willInsertElement` event. After your function is invoked, this view
+ and all of its child views will receive the `didInsertElement` event.
+
+ ```javascript
+ view._insertElementLater(function() {
+ this.createElement();
+ this.$().appendTo('body');
+ });
+ ```
+
+ @method _insertElementLater
+ @param {Function} fn the function that inserts the element into the DOM
+ @private
+ */
+ _insertElementLater: function(fn) {
+ this._scheduledInsert = Ember.run.scheduleOnce('render', this, '_insertElement', fn);
+ },
+
+ _insertElement: function (fn) {
+ this._scheduledInsert = null;
+ this.currentState.insertElement(this, fn);
+ },
+
+ /**
+ Appends the view's element to the document body. If the view does
+ not have an HTML representation yet, `createElement()` will be called
+ automatically.
+
+ If your application uses the `rootElement` property, you must append
+ the view within that element. Rendering views outside of the `rootElement`
+ is not supported.
+
+ Note that this method just schedules the view to be appended; the DOM
+ element will not be appended to the document body until all bindings have
+ finished synchronizing.
+
+ @method append
+ @return {Ember.View} receiver
+ */
+ append: function() {
+ return this.appendTo(document.body);
+ },
+
+ /**
+ Removes the view's element from the element to which it is attached.
+
+ @method remove
+ @return {Ember.View} receiver
+ */
+ remove: function() {
+ // What we should really do here is wait until the end of the run loop
+ // to determine if the element has been re-appended to a different
+ // element.
+ // 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(); }
+ this.invokeRecursively(function(view) {
+ if (view.clearRenderedChildren) { view.clearRenderedChildren(); }
+ });
+ },
+
+ elementId: null,
+
+ /**
+ Attempts to discover the element in the parent element. The default
+ implementation looks for an element with an ID of `elementId` (or the
+ view's guid if `elementId` is null). You can override this method to
+ provide your own form of lookup. For example, if you want to discover your
+ element using a CSS class name instead of an ID.
+
+ @method findElementInParentElement
+ @param {DOMElement} parentElement The parent's DOM element
+ @return {DOMElement} The discovered element
+ */
+ findElementInParentElement: function(parentElem) {
+ var id = "#" + this.elementId;
+ return Ember.$(id)[0] || Ember.$(id, parentElem)[0];
+ },
+
+ /**
+ Creates a DOM representation of the view and all of its
+ child views by recursively calling the `render()` method.
+
+ After the element has been created, `didInsertElement` will
+ be called on this view and all of its child views.
+
+ @method createElement
+ @return {Ember.View} receiver
+ */
+ createElement: function() {
+ if (get(this, 'element')) { return this; }
+
+ var buffer = this.renderToBuffer();
+ set(this, 'element', buffer.element());
+
+ return this;
+ },
+
+ /**
+ Called when a view is going to insert an element into the DOM.
+
+ @event willInsertElement
+ */
+ willInsertElement: Ember.K,
+
+ /**
+ Called when the element of the view has been inserted into the DOM
+ or after the view was re-rendered. Override this function to do any
+ set up that requires an element in the document body.
+
+ @event didInsertElement
+ */
+ didInsertElement: Ember.K,
+
+ /**
+ Called when the view is about to rerender, but before anything has
+ been torn down. This is a good opportunity to tear down any manual
+ observers you have installed based on the DOM state
+
+ @event willClearRender
+ */
+ willClearRender: Ember.K,
+
+ /**
+ Run this callback on the current view (unless includeSelf is false) and recursively on child views.
+
+ @method invokeRecursively
+ @param fn {Function}
+ @param includeSelf {Boolean} Includes itself if true.
+ @private
+ */
+ invokeRecursively: function(fn, includeSelf) {
+ var childViews = (includeSelf === false) ? this._childViews : [this];
+ var currentViews, view, currentChildViews;
+
+ while (childViews.length) {
+ currentViews = childViews.slice();
+ childViews = [];
+
+ for (var i=0, l=currentViews.length; i
+ I got wrapped
+
+
+ Ember.View.extend({
+ attributeBindings: ['type'],
+ type: 'button'
+ });
+ ```
+
+ If the value of the property is a Boolean, the name of that property is
+ added as an attribute.
+
+ ```javascript
+ // Renders something like
+ Ember.View.extend({
+ attributeBindings: ['enabled'],
+ enabled: true
+ });
+ ```
+
+ @property attributeBindings
+ */
+ attributeBindings: EMPTY_ARRAY,
+
+ // .......................................................
+ // CORE DISPLAY METHODS
+ //
+
+ /**
+ Setup a view, but do not finish waking it up.
+
+ * configure `childViews`
+ * register the view with the global views hash, which is used for event
+ dispatch
+
+ @method init
+ @private
+ */
+ init: function() {
+ this.elementId = this.elementId || guidFor(this);
+
+ this._super();
+
+ // setup child views. be sure to clone the child views array first
+ this._childViews = this._childViews.slice();
+
+ Ember.assert("Only arrays are allowed for 'classNameBindings'", Ember.typeOf(this.classNameBindings) === 'array');
+ this.classNameBindings = Ember.A(this.classNameBindings.slice());
+
+ Ember.assert("Only arrays are allowed for 'classNames'", Ember.typeOf(this.classNames) === 'array');
+ this.classNames = Ember.A(this.classNames.slice());
+ },
+
+ appendChild: function(view, options) {
+ return this.currentState.appendChild(this, view, options);
+ },
+
+ /**
+ Removes the child view from the parent view.
+
+ @method removeChild
+ @param {Ember.View} view
+ @return {Ember.View} receiver
+ */
+ removeChild: function(view) {
+ // If we're destroying, the entire subtree will be
+ // freed, and the DOM will be handled separately,
+ // so no need to mess with childViews.
+ if (this.isDestroying) { return; }
+
+ // update parent node
+ set(view, '_parentView', null);
+
+ // remove view from childViews array.
+ var childViews = this._childViews;
+
+ Ember.EnumerableUtils.removeObject(childViews, view);
+
+ this.propertyDidChange('childViews'); // HUH?! what happened to will change?
+
+ return this;
+ },
+
+ /**
+ Removes all children from the `parentView`.
+
+ @method removeAllChildren
+ @return {Ember.View} receiver
+ */
+ removeAllChildren: function() {
+ return this.mutateChildViews(function(parentView, view) {
+ parentView.removeChild(view);
+ });
+ },
+
+ destroyAllChildren: function() {
+ return this.mutateChildViews(function(parentView, view) {
+ view.destroy();
+ });
+ },
+
+ /**
+ Removes the view from its `parentView`, if one is found. Otherwise
+ does nothing.
+
+ @method removeFromParent
+ @return {Ember.View} receiver
+ */
+ removeFromParent: function() {
+ var parent = this._parentView;
+
+ // Remove DOM element from parent
+ this.remove();
+
+ if (parent) { parent.removeChild(this); }
+ return this;
+ },
+
+ /**
+ You must call `destroy` on a view to destroy the view (and all of its
+ child views). This will remove the view from any parent node, then make
+ sure that the DOM element managed by the view can be released by the
+ memory manager.
+
+ @method destroy
+ */
+ destroy: function() {
+ var childViews = this._childViews,
+ // get parentView before calling super because it'll be destroyed
+ nonVirtualParentView = get(this, 'parentView'),
+ viewName = this.viewName,
+ childLen, i;
+
+ if (!this._super()) { return; }
+
+ childLen = childViews.length;
+ for (i=childLen-1; i>=0; i--) {
+ childViews[i].removedFromDOM = true;
+ }
+
+ // remove from non-virtual parent view if viewName was specified
+ if (viewName && nonVirtualParentView) {
+ nonVirtualParentView.set(viewName, null);
+ }
+
+ childLen = childViews.length;
+ for (i=childLen-1; i>=0; i--) {
+ childViews[i].destroy();
+ }
+
+ return this;
+ },
+
+ /**
+ Instantiates a view to be added to the childViews array during view
+ initialization. You generally will not call this method directly unless
+ you are overriding `createChildViews()`. Note that this method will
+ automatically configure the correct settings on the new view instance to
+ act as a child of the parent.
+
+ @method createChildView
+ @param {Class|String} viewClass
+ @param {Hash} [attrs] Attributes to add
+ @return {Ember.View} new instance
+ */
+ createChildView: function(view, attrs) {
+ if (!view) {
+ throw new TypeError("createChildViews first argument must exist");
+ }
+
+ if (view.isView && view._parentView === this && view.container === this.container) {
+ return view;
+ }
+
+ attrs = attrs || {};
+ attrs._parentView = this;
+
+ if (Ember.CoreView.detect(view)) {
+ attrs.templateData = attrs.templateData || get(this, 'templateData');
+
+ attrs.container = this.container;
+ view = view.create(attrs);
+
+ // don't set the property on a virtual view, as they are invisible to
+ // consumers of the view API
+ if (view.viewName) {
+ set(get(this, 'concreteView'), view.viewName, view);
+ }
+ } else if ('string' === typeof view) {
+ var fullName = 'view:' + view;
+ var View = this.container.lookupFactory(fullName);
+
+ Ember.assert("Could not find view: '" + fullName + "'", !!View);
+
+ attrs.templateData = get(this, 'templateData');
+ view = View.create(attrs);
+ } else {
+ Ember.assert('You must pass instance or subclass of View', view.isView);
+ attrs.container = this.container;
+
+ if (!get(view, 'templateData')) {
+ attrs.templateData = get(this, 'templateData');
+ }
+
+ Ember.setProperties(view, attrs);
+
+ }
+
+ return view;
+ },
+
+ becameVisible: Ember.K,
+ becameHidden: Ember.K,
+
+ /**
+ When the view's `isVisible` property changes, toggle the visibility
+ element of the actual DOM element.
+
+ @method _isVisibleDidChange
+ @private
+ */
+ _isVisibleDidChange: Ember.observer('isVisible', function() {
+ if (this._isVisible === get(this, 'isVisible')) { return ; }
+ Ember.run.scheduleOnce('render', this, this._toggleVisibility);
+ }),
+
+ _toggleVisibility: function() {
+ var $el = this.$();
+ if (!$el) { return; }
+
+ var isVisible = get(this, 'isVisible');
+
+ if (this._isVisible === isVisible) { return ; }
+
+ $el.toggle(isVisible);
+
+ this._isVisible = isVisible;
+
+ if (this._isAncestorHidden()) { return; }
+
+ if (isVisible) {
+ this._notifyBecameVisible();
+ } else {
+ this._notifyBecameHidden();
+ }
+ },
+
+ _notifyBecameVisible: function() {
+ this.trigger('becameVisible');
+
+ this.forEachChildView(function(view) {
+ var isVisible = get(view, 'isVisible');
+
+ if (isVisible || isVisible === null) {
+ view._notifyBecameVisible();
+ }
+ });
+ },
+
+ _notifyBecameHidden: function() {
+ this.trigger('becameHidden');
+ this.forEachChildView(function(view) {
+ var isVisible = get(view, 'isVisible');
+
+ if (isVisible || isVisible === null) {
+ view._notifyBecameHidden();
+ }
+ });
+ },
+
+ _isAncestorHidden: function() {
+ var parent = get(this, 'parentView');
+
+ while (parent) {
+ if (get(parent, 'isVisible') === false) { return true; }
+
+ parent = get(parent, 'parentView');
+ }
+
+ return false;
+ },
+
+ clearBuffer: function() {
+ this.invokeRecursively(nullViewsBuffer);
+ },
+
+ transitionTo: function(state, children) {
+ var priorState = this.currentState,
+ currentState = this.currentState = this.states[state];
+ this.state = state;
+
+ if (priorState && priorState.exit) { priorState.exit(this); }
+ if (currentState.enter) { currentState.enter(this); }
+ if (state === 'inDOM') { delete Ember.meta(this).cache.element; }
+
+ if (children !== false) {
+ this.forEachChildView(function(view) {
+ view.transitionTo(state);
+ });
+ }
+ },
+
+ // .......................................................
+ // EVENT HANDLING
+ //
+
+ /**
+ Handle events from `Ember.EventDispatcher`
+
+ @method handleEvent
+ @param eventName {String}
+ @param evt {Event}
+ @private
+ */
+ handleEvent: function(eventName, evt) {
+ return this.currentState.handleEvent(this, eventName, evt);
+ },
+
+ registerObserver: function(root, path, target, observer) {
+ if (!observer && 'function' === typeof target) {
+ observer = target;
+ target = null;
+ }
+
+ if (!root || typeof root !== 'object') {
+ return;
+ }
+
+ var view = this,
+ stateCheckedObserver = function() {
+ view.currentState.invokeObserver(this, observer);
+ },
+ scheduledObserver = function() {
+ Ember.run.scheduleOnce('render', this, stateCheckedObserver);
+ };
+
+ Ember.addObserver(root, path, target, scheduledObserver);
+
+ this.one('willClearRender', function() {
+ Ember.removeObserver(root, path, target, scheduledObserver);
+ });
+ }
+
+});
+
+/*
+ Describe how the specified actions should behave in the various
+ states that a view can exist in. Possible states:
+
+ * preRender: when a view is first instantiated, and after its
+ element was destroyed, it is in the preRender state
+ * inBuffer: once a view has been rendered, but before it has
+ been inserted into the DOM, it is in the inBuffer state
+ * hasElement: the DOM representation of the view is created,
+ and is ready to be inserted
+ * inDOM: once a view has been inserted into the DOM it is in
+ the inDOM state. A view spends the vast majority of its
+ existence in this state.
+ * destroyed: once a view has been destroyed (using the destroy
+ method), it is in this state. No further actions can be invoked
+ on a destroyed view.
+*/
+
+ // in the destroyed state, everything is illegal
+
+ // before rendering has begun, all legal manipulations are noops.
+
+ // inside the buffer, legal manipulations are done on the buffer
+
+ // once the view has been inserted into the DOM, legal manipulations
+ // are done on the DOM element.
+
+function notifyMutationListeners() {
+ Ember.run.once(Ember.View, 'notifyMutationListeners');
+}
+
+var DOMManager = {
+ prepend: function(view, html) {
+ view.$().prepend(html);
+ notifyMutationListeners();
+ },
+
+ after: function(view, html) {
+ view.$().after(html);
+ notifyMutationListeners();
+ },
+
+ html: function(view, html) {
+ view.$().html(html);
+ notifyMutationListeners();
+ },
+
+ replace: function(view) {
+ var element = get(view, 'element');
+
+ set(view, 'element', null);
+
+ view._insertElementLater(function() {
+ Ember.$(element).replaceWith(get(view, 'element'));
+ notifyMutationListeners();
+ });
+ },
+
+ remove: function(view) {
+ view.$().remove();
+ notifyMutationListeners();
+ },
+
+ empty: function(view) {
+ view.$().empty();
+ notifyMutationListeners();
+ }
+};
+
+Ember.View.reopen({
+ domManager: DOMManager
+});
+
+Ember.View.reopenClass({
+
+ /**
+ Parse a path and return an object which holds the parsed properties.
+
+ For example a path like "content.isEnabled:enabled:disabled" will return the
+ following object:
+
+ ```javascript
+ {
+ path: "content.isEnabled",
+ className: "enabled",
+ falsyClassName: "disabled",
+ classNames: ":enabled:disabled"
+ }
+ ```
+
+ @method _parsePropertyPath
+ @static
+ @private
+ */
+ _parsePropertyPath: function(path) {
+ var split = path.split(':'),
+ propertyPath = split[0],
+ classNames = "",
+ className,
+ falsyClassName;
+
+ // check if the property is defined as prop:class or prop:trueClass:falseClass
+ if (split.length > 1) {
+ className = split[1];
+ if (split.length === 3) { falsyClassName = split[2]; }
+
+ classNames = ':' + className;
+ if (falsyClassName) { classNames += ":" + falsyClassName; }
+ }
+
+ return {
+ path: propertyPath,
+ classNames: classNames,
+ className: (className === '') ? undefined : className,
+ falsyClassName: falsyClassName
+ };
+ },
+
+ /**
+ Get the class name for a given value, based on the path, optional
+ `className` and optional `falsyClassName`.
+
+ - if a `className` or `falsyClassName` has been specified:
+ - if the value is truthy and `className` has been specified,
+ `className` is returned
+ - if the value is falsy and `falsyClassName` has been specified,
+ `falsyClassName` is returned
+ - otherwise `null` is returned
+ - if the value is `true`, the dasherized last part of the supplied path
+ is returned
+ - if the value is not `false`, `undefined` or `null`, the `value`
+ is returned
+ - if none of the above rules apply, `null` is returned
+
+ @method _classStringForValue
+ @param path
+ @param val
+ @param className
+ @param falsyClassName
+ @static
+ @private
+ */
+ _classStringForValue: function(path, val, className, falsyClassName) {
+ // When using the colon syntax, evaluate the truthiness or falsiness
+ // of the value to determine which className to return
+ if (className || falsyClassName) {
+ if (className && !!val) {
+ return className;
+
+ } else if (falsyClassName && !val) {
+ return falsyClassName;
+
+ } else {
+ return null;
+ }
+
+ // If value is a Boolean and true, return the dasherized property
+ // name.
+ } else if (val === true) {
+ // Normalize property path to be suitable for use
+ // as a class name. For exaple, content.foo.barBaz
+ // becomes bar-baz.
+ var parts = path.split('.');
+ return Ember.String.dasherize(parts[parts.length-1]);
+
+ // If the value is not false, undefined, or null, return the current
+ // value of the property.
+ } else if (val !== false && val != null) {
+ return val;
+
+ // Nothing to display. Return null so that the old class is removed
+ // but no new class is added.
+ } else {
+ return null;
+ }
+ }
+});
+
+var mutation = Ember.Object.extend(Ember.Evented).create();
+
+Ember.View.addMutationListener = function(callback) {
+ mutation.on('change', callback);
+};
+
+Ember.View.removeMutationListener = function(callback) {
+ mutation.off('change', callback);
+};
+
+Ember.View.notifyMutationListeners = function() {
+ mutation.trigger('change');
+};
+
+/**
+ Global views hash
+
+ @property views
+ @static
+ @type Hash
+*/
+Ember.View.views = {};
+
+// If someone overrides the child views computed property when
+// defining their class, we want to be able to process the user's
+// supplied childViews and then restore the original computed property
+// at view initialization time. This happens in Ember.ContainerView's init
+// method.
+Ember.View.childViewsProperty = childViewsProperty;
+
+Ember.View.applyAttributeBindings = function(elem, name, value) {
+ var type = Ember.typeOf(value);
+
+ // if this changes, also change the logic in ember-handlebars/lib/helpers/binding.js
+ if (name !== 'value' && (type === 'string' || (type === 'number' && !isNaN(value)))) {
+ if (value !== elem.attr(name)) {
+ elem.attr(name, value);
+ }
+ } else if (name === 'value' || type === 'boolean') {
+ if (Ember.isNone(value) || value === false) {
+ // `null`, `undefined` or `false` should remove attribute
+ elem.removeAttr(name);
+ elem.prop(name, '');
+ } else if (value !== elem.prop(name)) {
+ // value should always be properties
+ elem.prop(name, value);
+ }
+ } else if (!value) {
+ elem.removeAttr(name);
+ }
+};
+
+Ember.View.states = states;
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var get = Ember.get, set = Ember.set;
+
+Ember.View.states._default = {
+ // appendChild is only legal while rendering the buffer.
+ appendChild: function() {
+ throw "You can't use appendChild outside of the rendering process";
+ },
+
+ $: function() {
+ return undefined;
+ },
+
+ getElement: function() {
+ return null;
+ },
+
+ // Handle events from `Ember.EventDispatcher`
+ handleEvent: function() {
+ return true; // continue event propagation
+ },
+
+ destroyElement: function(view) {
+ set(view, 'element', null);
+ if (view._scheduledInsert) {
+ Ember.run.cancel(view._scheduledInsert);
+ view._scheduledInsert = null;
+ }
+ return view;
+ },
+
+ renderToBufferIfNeeded: function () {
+ return false;
+ },
+
+ rerender: Ember.K,
+ invokeObserver: Ember.K
+};
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var preRender = Ember.View.states.preRender = Ember.create(Ember.View.states._default);
+
+Ember.merge(preRender, {
+ // a view leaves the preRender state once its element has been
+ // created (createElement).
+ insertElement: function(view, fn) {
+ view.createElement();
+ var viewCollection = view.viewHierarchyCollection();
+
+ viewCollection.trigger('willInsertElement');
+
+ fn.call(view);
+
+ // We transition to `inDOM` if the element exists in the DOM
+ var element = view.get('element');
+ if (document.body.contains(element)) {
+ viewCollection.transitionTo('inDOM', false);
+ viewCollection.trigger('didInsertElement');
+ }
+ },
+
+ renderToBufferIfNeeded: function(view, buffer) {
+ view.renderToBuffer(buffer);
+ return true;
+ },
+
+ empty: Ember.K,
+
+ setElement: function(view, value) {
+ if (value !== null) {
+ view.transitionTo('hasElement');
+ }
+ return value;
+ }
+});
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var get = Ember.get, set = Ember.set;
+
+var inBuffer = Ember.View.states.inBuffer = Ember.create(Ember.View.states._default);
+
+Ember.merge(inBuffer, {
+ $: function(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 Ember.$();
+ },
+
+ // when a view is rendered in a buffer, rerendering it simply
+ // replaces the existing buffer with a new one
+ rerender: function(view) {
+ throw new Ember.Error("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: function(view, childView, options) {
+ var buffer = view.buffer, _childViews = view._childViews;
+
+ childView = view.createChildView(childView, options);
+ if (!_childViews.length) { _childViews = view._childViews = _childViews.slice(); }
+ _childViews.push(childView);
+
+ childView.renderToBuffer(buffer);
+
+ view.propertyDidChange('childViews');
+
+ return childView;
+ },
+
+ // when a view is rendered in a buffer, destroying the
+ // element will simply destroy the buffer and put the
+ // state back into the preRender state.
+ destroyElement: function(view) {
+ view.clearBuffer();
+ var viewCollection = view._notifyWillDestroyElement();
+ viewCollection.transitionTo('preRender', false);
+
+ return view;
+ },
+
+ empty: function() {
+ Ember.assert("Emptying a view in the inBuffer state is not allowed and " +
+ "should not happen under normal circumstances. Most likely " +
+ "there is a bug in your application. This may be due to " +
+ "excessive property change notifications.");
+ },
+
+ renderToBufferIfNeeded: function (view, buffer) {
+ return false;
+ },
+
+ // It should be impossible for a rendered view to be scheduled for
+ // insertion.
+ insertElement: function() {
+ throw "You can't insert an element that has already been rendered";
+ },
+
+ setElement: function(view, value) {
+ if (value === null) {
+ view.transitionTo('preRender');
+ } else {
+ view.clearBuffer();
+ view.transitionTo('hasElement');
+ }
+
+ return value;
+ },
+
+ invokeObserver: function(target, observer) {
+ observer.call(target);
+ }
+});
+
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var get = Ember.get, set = Ember.set;
+
+var hasElement = Ember.View.states.hasElement = Ember.create(Ember.View.states._default);
+
+Ember.merge(hasElement, {
+ $: function(view, sel) {
+ var elem = get(view, 'element');
+ return sel ? Ember.$(sel, elem) : Ember.$(elem);
+ },
+
+ getElement: function(view) {
+ var parent = get(view, 'parentView');
+ if (parent) { parent = get(parent, 'element'); }
+ if (parent) { return view.findElementInParentElement(parent); }
+ return Ember.$("#" + get(view, 'elementId'))[0];
+ },
+
+ setElement: function(view, value) {
+ if (value === null) {
+ view.transitionTo('preRender');
+ } else {
+ throw "You cannot set an element to a non-null value when the element is already in the DOM.";
+ }
+
+ return value;
+ },
+
+ // once the view has been inserted into the DOM, rerendering is
+ // deferred to allow bindings to synchronize.
+ rerender: function(view) {
+ view.triggerRecursively('willClearRender');
+
+ view.clearRenderedChildren();
+
+ view.domManager.replace(view);
+ return view;
+ },
+
+ // once the view is already in the DOM, destroying it removes it
+ // from the DOM, nukes its element, and puts it back into the
+ // preRender state if inDOM.
+
+ destroyElement: function(view) {
+ view._notifyWillDestroyElement();
+ view.domManager.remove(view);
+ set(view, 'element', null);
+ if (view._scheduledInsert) {
+ Ember.run.cancel(view._scheduledInsert);
+ view._scheduledInsert = null;
+ }
+ return view;
+ },
+
+ empty: function(view) {
+ var _childViews = view._childViews, len, idx;
+ if (_childViews) {
+ len = _childViews.length;
+ for (idx = 0; idx < len; idx++) {
+ _childViews[idx]._notifyWillDestroyElement();
+ }
+ }
+ view.domManager.empty(view);
+ },
+
+ // Handle events from `Ember.EventDispatcher`
+ handleEvent: function(view, eventName, evt) {
+ if (view.has(eventName)) {
+ // Handler should be able to re-dispatch events, so we don't
+ // preventDefault or stopPropagation.
+ return view.trigger(eventName, evt);
+ } else {
+ return true; // continue event propagation
+ }
+ },
+
+ invokeObserver: function(target, observer) {
+ observer.call(target);
+ }
+});
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var hasElement = Ember.View.states.hasElement;
+var inDOM = Ember.View.states.inDOM = Ember.create(hasElement);
+
+Ember.merge(inDOM, {
+ enter: function(view) {
+ // Register the view for event handling. This hash is used by
+ // Ember.EventDispatcher to dispatch incoming events.
+ if (!view.isVirtual) {
+ Ember.assert("Attempted to register a view with an id already in use: "+view.elementId, !Ember.View.views[view.elementId]);
+ Ember.View.views[view.elementId] = view;
+ }
+
+ view.addBeforeObserver('elementId', function() {
+ throw new Ember.Error("Changing a view's elementId after creation is not allowed");
+ });
+ },
+
+ exit: function(view) {
+ if (!this.isVirtual) delete Ember.View.views[view.elementId];
+ },
+
+ insertElement: function(view, fn) {
+ throw "You can't insert an element into the DOM that has already been inserted";
+ }
+});
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-views
+*/
+
+var destroyingError = "You can't call %@ on a view being destroyed", fmt = Ember.String.fmt;
+
+var destroying = Ember.View.states.destroying = Ember.create(Ember.View.states._default);
+
+Ember.merge(destroying, {
+ appendChild: function() {
+ throw fmt(destroyingError, ['appendChild']);
+ },
+ rerender: function() {
+ throw fmt(destroyingError, ['rerender']);
+ },
+ destroyElement: function() {
+ throw fmt(destroyingError, ['destroyElement']);
+ },
+ empty: function() {
+ throw fmt(destroyingError, ['empty']);
+ },
+
+ setElement: function() {
+ throw fmt(destroyingError, ["set('element', ...)"]);
+ },
+
+ renderToBufferIfNeeded: function() {
+ return false;
+ },
+
+ // Since element insertion is scheduled, don't do anything if
+ // the view has been destroyed between scheduling and execution
+ insertElement: Ember.K
+});
+
+
+})();
+
+
+
+(function() {
+Ember.View.cloneStates = function(from) {
+ var into = {};
+
+ into._default = {};
+ into.preRender = Ember.create(into._default);
+ into.destroying = Ember.create(into._default);
+ into.inBuffer = Ember.create(into._default);
+ into.hasElement = Ember.create(into._default);
+ into.inDOM = Ember.create(into.hasElement);
+
+ for (var stateName in from) {
+ if (!from.hasOwnProperty(stateName)) { continue; }
+ Ember.merge(into[stateName], from[stateName]);
+ }
+
+ return into;
+};
+
+})();
+
+
+
+(function() {
+var states = Ember.View.cloneStates(Ember.View.states);
+
+/**
+@module ember
+@submodule ember-views
+*/
+
+var get = Ember.get, set = Ember.set;
+var forEach = Ember.EnumerableUtils.forEach;
+var ViewCollection = Ember._ViewCollection;
+
+/**
+ A `ContainerView` is an `Ember.View` subclass that implements `Ember.MutableArray`
+ allowing programmatic management of its child views.
+
+ ## Setting Initial Child Views
+
+ The initial array of child views can be set in one of two ways. You can
+ provide a `childViews` property at creation time that contains instance of
+ `Ember.View`:
+
+ ```javascript
+ aContainer = Ember.ContainerView.create({
+ childViews: [Ember.View.create(), Ember.View.create()]
+ });
+ ```
+
+ You can also provide a list of property names whose values are instances of
+ `Ember.View`:
+
+ ```javascript
+ aContainer = Ember.ContainerView.create({
+ childViews: ['aView', 'bView', 'cView'],
+ aView: Ember.View.create(),
+ bView: Ember.View.create(),
+ cView: Ember.View.create()
+ });
+ ```
+
+ The two strategies can be combined:
+
+ ```javascript
+ aContainer = Ember.ContainerView.create({
+ childViews: ['aView', Ember.View.create()],
+ aView: Ember.View.create()
+ });
+ ```
+
+ Each child view's rendering will be inserted into the container's rendered
+ HTML in the same order as its position in the `childViews` property.
+
+ ## Adding and Removing Child Views
+
+ The container view implements `Ember.MutableArray` allowing programmatic management of its child views.
+
+ To remove a view, pass that view into a `removeObject` call on the container view.
+
+ Given an empty `` the following code
+
+ ```javascript
+ aContainer = Ember.ContainerView.create({
+ classNames: ['the-container'],
+ childViews: ['aView', 'bView'],
+ aView: Ember.View.create({
+ template: Ember.Handlebars.compile("A")
+ }),
+ bView: Ember.View.create({
+ template: Ember.Handlebars.compile("B")
+ })
+ });
+
+ aContainer.appendTo('body');
+ ```
+
+ Results in the HTML
+
+ ```html
+ ]
+ ```
+
+ Will result in the following HTML
+
+ ```html
+ ` and the following code:
+
+ ```javascript
+ someItemsView = Ember.CollectionView.create({
+ classNames: ['a-collection'],
+ content: ['A','B','C'],
+ itemViewClass: Ember.View.extend({
+ template: Ember.Handlebars.compile("the letter: {{view.content}}")
+ })
+ });
+
+ someItemsView.appendTo('body');
+ ```
+
+ Will result in the following HTML structure
+
+ ```html
+ 
+ hi . Other browsers create it
+ * before the first node, no matter what.
+ *
+ * This means the the following code:
+ *
+ * div = document.createElement("div");
+ * div.innerHTML = "
+ *
+ * Generates the following DOM in IE:
+ *
+ * + div
+ * + table
+ * - script id='first'
+ * + tbody
+ * + tr
+ * + td
+ * - "hi"
+ * - script id='last'
+ *
+ * Which means that the two script tags, even though they were
+ * inserted at the same point in the hierarchy in the original
+ * HTML, now have different parents.
+ *
+ * This code reparents the first script tag by making it the tbody's
+ * first child.
+ *
+ */
+ var fixParentage = function(start, end) {
+ if (start.parentNode !== end.parentNode) {
+ end.parentNode.insertBefore(start, end.parentNode.firstChild);
+ }
+ };
+
+ htmlFunc = function(html, outerToo) {
+ // get the real starting node. see realNode for details.
+ var start = realNode(document.getElementById(this.start));
+ var end = document.getElementById(this.end);
+ var parentNode = end.parentNode;
+ var node, nextSibling, last;
+
+ // make sure that the start and end nodes share the same
+ // parent. If not, fix it.
+ fixParentage(start, end);
+
+ // remove all of the nodes after the starting placeholder and
+ // before the ending placeholder.
+ node = start.nextSibling;
+ while (node) {
+ nextSibling = node.nextSibling;
+ last = node === end;
+
+ // if this is the last node, and we want to remove it as well,
+ // set the `end` node to the next sibling. This is because
+ // for the rest of the function, we insert the new nodes
+ // before the end (note that insertBefore(node, null) is
+ // the same as appendChild(node)).
+ //
+ // if we do not want to remove it, just break.
+ if (last) {
+ if (outerToo) { end = node.nextSibling; } else { break; }
+ }
+
+ node.parentNode.removeChild(node);
+
+ // if this is the last node and we didn't break before
+ // (because we wanted to remove the outer nodes), break
+ // now.
+ if (last) { break; }
+
+ node = nextSibling;
+ }
+
+ // get the first node for the HTML string, even in cases like
+ // tables and lists where a simple innerHTML on a div would
+ // swallow some of the content.
+ node = firstNodeFor(start.parentNode, html);
+
+ if (outerToo) {
+ start.parentNode.removeChild(start);
+ }
+
+ // copy the nodes for the HTML between the starting and ending
+ // placeholder.
+ while (node) {
+ nextSibling = node.nextSibling;
+ parentNode.insertBefore(node, end);
+ node = nextSibling;
+ }
+ };
+
+ // remove the nodes in the DOM representing this metamorph.
+ //
+ // this includes the starting and ending placeholders.
+ removeFunc = function() {
+ var start = realNode(document.getElementById(this.start));
+ var end = document.getElementById(this.end);
+
+ this.html('');
+ start.parentNode.removeChild(start);
+ end.parentNode.removeChild(end);
+ };
+
+ appendToFunc = function(parentNode) {
+ var node = firstNodeFor(parentNode, this.outerHTML());
+ var nextSibling;
+
+ while (node) {
+ nextSibling = node.nextSibling;
+ parentNode.appendChild(node);
+ node = nextSibling;
+ }
+ };
+
+ afterFunc = function(html) {
+ // get the real starting node. see realNode for details.
+ var end = document.getElementById(this.end);
+ var insertBefore = end.nextSibling;
+ var parentNode = end.parentNode;
+ var nextSibling;
+ var node;
+
+ // get the first node for the HTML string, even in cases like
+ // tables and lists where a simple innerHTML on a div would
+ // swallow some of the content.
+ node = firstNodeFor(parentNode, html);
+
+ // copy the nodes for the HTML between the starting and ending
+ // placeholder.
+ while (node) {
+ nextSibling = node.nextSibling;
+ parentNode.insertBefore(node, insertBefore);
+ node = nextSibling;
+ }
+ };
+
+ prependFunc = function(html) {
+ var start = document.getElementById(this.start);
+ var parentNode = start.parentNode;
+ var nextSibling;
+ var node;
+
+ node = firstNodeFor(parentNode, html);
+ var insertBefore = start.nextSibling;
+
+ while (node) {
+ nextSibling = node.nextSibling;
+ parentNode.insertBefore(node, insertBefore);
+ node = nextSibling;
+ }
+ };
+ }
+
+ Metamorph.prototype.html = function(html) {
+ this.checkRemoved();
+ if (html === undefined) { return this.innerHTML; }
+
+ htmlFunc.call(this, html);
+
+ this.innerHTML = html;
+ };
+
+ Metamorph.prototype.replaceWith = function(html) {
+ this.checkRemoved();
+ htmlFunc.call(this, html, true);
+ };
+
+ Metamorph.prototype.remove = removeFunc;
+ Metamorph.prototype.outerHTML = outerHTMLFunc;
+ Metamorph.prototype.appendTo = appendToFunc;
+ Metamorph.prototype.after = afterFunc;
+ Metamorph.prototype.prepend = prependFunc;
+ Metamorph.prototype.startTag = startTagFunc;
+ Metamorph.prototype.endTag = endTagFunc;
+
+ Metamorph.prototype.isRemoved = function() {
+ var before = document.getElementById(this.start);
+ var after = document.getElementById(this.end);
+
+ return !before || !after;
+ };
+
+ Metamorph.prototype.checkRemoved = function() {
+ if (this.isRemoved()) {
+ throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.");
+ }
+ };
+
+ return Metamorph;
+ });
+
+})();
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars-compiler
+*/
+
+// Eliminate dependency on any Ember to simplify precompilation workflow
+var objectCreate = Object.create || function(parent) {
+ function F() {}
+ F.prototype = parent;
+ return new F();
+};
+
+var Handlebars = (Ember.imports && Ember.imports.Handlebars) || (this && this.Handlebars);
+if (!Handlebars && typeof require === 'function') {
+ Handlebars = require('handlebars');
+}
+
+Ember.assert("Ember Handlebars requires Handlebars version 1.0 or 1.1. Include " +
+ "a SCRIPT tag in the HTML HEAD linking to the Handlebars file " +
+ "before you link to Ember.", Handlebars);
+
+Ember.assert("Ember Handlebars requires Handlebars version 1.0 or 1.1, " +
+ "COMPILER_REVISION expected: 4, got: " + Handlebars.COMPILER_REVISION +
+ " - Please note: Builds of master may have other COMPILER_REVISION values.",
+ Handlebars.COMPILER_REVISION === 4);
+
+/**
+ Prepares the Handlebars templating library for use inside Ember's view
+ system.
+
+ The `Ember.Handlebars` object is the standard Handlebars library, extended to
+ use Ember's `get()` method instead of direct property access, which allows
+ computed properties to be used inside templates.
+
+ To create an `Ember.Handlebars` template, call `Ember.Handlebars.compile()`.
+ This will return a function that can be used by `Ember.View` for rendering.
+
+ @class Handlebars
+ @namespace Ember
+*/
+Ember.Handlebars = objectCreate(Handlebars);
+
+/**
+ Register a bound helper or custom view helper.
+
+ ## Simple bound helper example
+
+ ```javascript
+ Ember.Handlebars.helper('capitalize', function(value) {
+ return value.toUpperCase();
+ });
+ ```
+
+ The above bound helper can be used inside of templates as follows:
+
+ ```handlebars
+ {{capitalize name}}
+ ```
+
+ In this case, when the `name` property of the template's context changes,
+ the rendered value of the helper will update to reflect this change.
+
+ For more examples of bound helpers, see documentation for
+ `Ember.Handlebars.registerBoundHelper`.
+
+ ## Custom view helper example
+
+ Assuming a view subclass named `App.CalendarView` were defined, a helper
+ for rendering instances of this view could be registered as follows:
+
+ ```javascript
+ Ember.Handlebars.helper('calendar', App.CalendarView):
+ ```
+
+ The above bound helper can be used inside of templates as follows:
+
+ ```handlebars
+ {{calendar}}
+ ```
+
+ Which is functionally equivalent to:
+
+ ```handlebars
+ {{view App.CalendarView}}
+ ```
+
+ Options in the helper will be passed to the view in exactly the same
+ manner as with the `view` helper.
+
+ @method helper
+ @for Ember.Handlebars
+ @param {String} name
+ @param {Function|Ember.View} function or view class constructor
+ @param {String} dependentKeys*
+*/
+Ember.Handlebars.helper = function(name, value) {
+ Ember.assert("You tried to register a component named '" + name + "', but component names must include a '-'", !Ember.Component.detect(value) || name.match(/-/));
+
+ if (Ember.View.detect(value)) {
+ Ember.Handlebars.registerHelper(name, Ember.Handlebars.makeViewHelper(value));
+ } else {
+ Ember.Handlebars.registerBoundHelper.apply(null, arguments);
+ }
+};
+
+/**
+ Returns a helper function that renders the provided ViewClass.
+
+ Used internally by Ember.Handlebars.helper and other methods
+ involving helper/component registration.
+
+ @private
+ @method makeViewHelper
+ @for Ember.Handlebars
+ @param {Function} ViewClass view class constructor
+*/
+Ember.Handlebars.makeViewHelper = function(ViewClass) {
+ return function(options) {
+ Ember.assert("You can only pass attributes (such as name=value) not bare values to a helper for a View found in '" + ViewClass.toString() + "'", arguments.length < 2);
+ return Ember.Handlebars.helpers.view.call(this, ViewClass, options);
+ };
+};
+
+/**
+@class helpers
+@namespace Ember.Handlebars
+*/
+Ember.Handlebars.helpers = objectCreate(Handlebars.helpers);
+
+/**
+ Override the the opcode compiler and JavaScript compiler for Handlebars.
+
+ @class Compiler
+ @namespace Ember.Handlebars
+ @private
+ @constructor
+*/
+Ember.Handlebars.Compiler = function() {};
+
+// Handlebars.Compiler doesn't exist in runtime-only
+if (Handlebars.Compiler) {
+ Ember.Handlebars.Compiler.prototype = objectCreate(Handlebars.Compiler.prototype);
+}
+
+Ember.Handlebars.Compiler.prototype.compiler = Ember.Handlebars.Compiler;
+
+/**
+ @class JavaScriptCompiler
+ @namespace Ember.Handlebars
+ @private
+ @constructor
+*/
+Ember.Handlebars.JavaScriptCompiler = function() {};
+
+// Handlebars.JavaScriptCompiler doesn't exist in runtime-only
+if (Handlebars.JavaScriptCompiler) {
+ Ember.Handlebars.JavaScriptCompiler.prototype = objectCreate(Handlebars.JavaScriptCompiler.prototype);
+ Ember.Handlebars.JavaScriptCompiler.prototype.compiler = Ember.Handlebars.JavaScriptCompiler;
+}
+
+
+Ember.Handlebars.JavaScriptCompiler.prototype.namespace = "Ember.Handlebars";
+
+Ember.Handlebars.JavaScriptCompiler.prototype.initializeBuffer = function() {
+ return "''";
+};
+
+/**
+ Override the default buffer for Ember Handlebars. By default, Handlebars
+ creates an empty String at the beginning of each invocation and appends to
+ it. Ember's Handlebars overrides this to append to a single shared buffer.
+
+ @private
+ @method appendToBuffer
+ @param string {String}
+*/
+Ember.Handlebars.JavaScriptCompiler.prototype.appendToBuffer = function(string) {
+ return "data.buffer.push("+string+");";
+};
+
+// Hacks ahead:
+// Handlebars presently has a bug where the `blockHelperMissing` hook
+// doesn't get passed the name of the missing helper name, but rather
+// gets passed the value of that missing helper evaluated on the current
+// context, which is most likely `undefined` and totally useless.
+//
+// So we alter the compiled template function to pass the name of the helper
+// instead, as expected.
+//
+// This can go away once the following is closed:
+// https://github.com/wycats/handlebars.js/issues/634
+
+var DOT_LOOKUP_REGEX = /helpers\.(.*?)\)/,
+ BRACKET_STRING_LOOKUP_REGEX = /helpers\['(.*?)'/,
+ INVOCATION_SPLITTING_REGEX = /(.*blockHelperMissing\.call\(.*)(stack[0-9]+)(,.*)/;
+
+Ember.Handlebars.JavaScriptCompiler.stringifyLastBlockHelperMissingInvocation = function(source) {
+ var helperInvocation = source[source.length - 1],
+ helperName = (DOT_LOOKUP_REGEX.exec(helperInvocation) || BRACKET_STRING_LOOKUP_REGEX.exec(helperInvocation))[1],
+ matches = INVOCATION_SPLITTING_REGEX.exec(helperInvocation);
+
+ source[source.length - 1] = matches[1] + "'" + helperName + "'" + matches[3];
+};
+var stringifyBlockHelperMissing = Ember.Handlebars.JavaScriptCompiler.stringifyLastBlockHelperMissingInvocation;
+
+var originalBlockValue = Ember.Handlebars.JavaScriptCompiler.prototype.blockValue;
+Ember.Handlebars.JavaScriptCompiler.prototype.blockValue = function() {
+ originalBlockValue.apply(this, arguments);
+ stringifyBlockHelperMissing(this.source);
+};
+
+var originalAmbiguousBlockValue = Ember.Handlebars.JavaScriptCompiler.prototype.ambiguousBlockValue;
+Ember.Handlebars.JavaScriptCompiler.prototype.ambiguousBlockValue = function() {
+ originalAmbiguousBlockValue.apply(this, arguments);
+ stringifyBlockHelperMissing(this.source);
+};
+
+/**
+ Rewrite simple mustaches from `{{foo}}` to `{{bind "foo"}}`. This means that
+ all simple mustaches in Ember's Handlebars will also set up an observer to
+ keep the DOM up to date when the underlying property changes.
+
+ @private
+ @method mustache
+ @for Ember.Handlebars.Compiler
+ @param mustache
+*/
+Ember.Handlebars.Compiler.prototype.mustache = function(mustache) {
+ if (!(mustache.params.length || mustache.hash)) {
+ var id = new Handlebars.AST.IdNode([{ part: '_triageMustache' }]);
+
+ // Update the mustache node to include a hash value indicating whether the original node
+ // was escaped. This will allow us to properly escape values when the underlying value
+ // changes and we need to re-render the value.
+ if (!mustache.escaped) {
+ mustache.hash = mustache.hash || new Handlebars.AST.HashNode([]);
+ mustache.hash.pairs.push(["unescaped", new Handlebars.AST.StringNode("true")]);
+ }
+ mustache = new Handlebars.AST.MustacheNode([id].concat([mustache.id]), mustache.hash, !mustache.escaped);
+ }
+
+ return Handlebars.Compiler.prototype.mustache.call(this, mustache);
+};
+
+/**
+ Used for precompilation of Ember Handlebars templates. This will not be used
+ during normal app execution.
+
+ @method precompile
+ @for Ember.Handlebars
+ @static
+ @param {String} string The template to precompile
+*/
+Ember.Handlebars.precompile = function(string) {
+ var ast = Handlebars.parse(string);
+
+ var options = {
+ knownHelpers: {
+ action: true,
+ unbound: true,
+ 'bind-attr': true,
+ template: true,
+ view: true,
+ _triageMustache: true
+ },
+ data: true,
+ stringParams: true
+ };
+
+ var environment = new Ember.Handlebars.Compiler().compile(ast, options);
+ return new Ember.Handlebars.JavaScriptCompiler().compile(environment, options, undefined, true);
+};
+
+// We don't support this for Handlebars runtime-only
+if (Handlebars.compile) {
+ /**
+ The entry point for Ember Handlebars. This replaces the default
+ `Handlebars.compile` and turns on template-local data and String
+ parameters.
+
+ @method compile
+ @for Ember.Handlebars
+ @static
+ @param {String} string The template to compile
+ @return {Function}
+ */
+ Ember.Handlebars.compile = function(string) {
+ var ast = Handlebars.parse(string);
+ var options = { data: true, stringParams: true };
+ var environment = new Ember.Handlebars.Compiler().compile(ast, options);
+ var templateSpec = new Ember.Handlebars.JavaScriptCompiler().compile(environment, options, undefined, true);
+
+ var template = Ember.Handlebars.template(templateSpec);
+ template.isMethod = false; //Make sure we don't wrap templates with ._super
+
+ return template;
+ };
+}
+
+
+})();
+
+(function() {
+var slice = Array.prototype.slice,
+ originalTemplate = Ember.Handlebars.template;
+
+/**
+ If a path starts with a reserved keyword, returns the root
+ that should be used.
+
+ @private
+ @method normalizePath
+ @for Ember
+ @param root {Object}
+ @param path {String}
+ @param data {Hash}
+*/
+var normalizePath = Ember.Handlebars.normalizePath = function(root, path, data) {
+ var keywords = (data && data.keywords) || {},
+ keyword, isKeyword;
+
+ // Get the first segment of the path. For example, if the
+ // path is "foo.bar.baz", returns "foo".
+ keyword = path.split('.', 1)[0];
+
+ // Test to see if the first path is a keyword that has been
+ // passed along in the view's data hash. If so, we will treat
+ // that object as the new root.
+ if (keywords.hasOwnProperty(keyword)) {
+ // Look up the value in the template's data hash.
+ root = keywords[keyword];
+ isKeyword = true;
+
+ // Handle cases where the entire path is the reserved
+ // word. In that case, return the object itself.
+ if (path === keyword) {
+ path = '';
+ } else {
+ // Strip the keyword from the path and look up
+ // the remainder from the newly found root.
+ path = path.substr(keyword.length+1);
+ }
+ }
+
+ return { root: root, path: path, isKeyword: isKeyword };
+};
+
+
+/**
+ Lookup both on root and on window. If the path starts with
+ a keyword, the corresponding object will be looked up in the
+ template's data hash and used to resolve the path.
+
+ @method get
+ @for Ember.Handlebars
+ @param {Object} root The object to look up the property on
+ @param {String} path The path to be lookedup
+ @param {Object} options The template's option hash
+*/
+var handlebarsGet = Ember.Handlebars.get = function(root, path, options) {
+ var data = options && options.data,
+ normalizedPath = normalizePath(root, path, data),
+ value;
+
+
+ root = normalizedPath.root;
+ path = normalizedPath.path;
+
+ value = Ember.get(root, path);
+
+ if (value === undefined && root !== Ember.lookup && Ember.isGlobalPath(path)) {
+ value = Ember.get(Ember.lookup, path);
+ }
+
+
+ return value;
+};
+
+/**
+ This method uses `Ember.Handlebars.get` to lookup a value, then ensures
+ that the value is escaped properly.
+
+ If `unescaped` is a truthy value then the escaping will not be performed.
+
+ @method getEscaped
+ @for Ember.Handlebars
+ @param {Object} root The object to look up the property on
+ @param {String} path The path to be lookedup
+ @param {Object} options The template's option hash
+*/
+Ember.Handlebars.getEscaped = function(root, path, options) {
+ var result = handlebarsGet(root, path, options);
+
+ if (result === null || result === undefined) {
+ result = "";
+ } else if (!(result instanceof Handlebars.SafeString)) {
+ result = String(result);
+ }
+ if (!options.hash.unescaped){
+ result = Handlebars.Utils.escapeExpression(result);
+ }
+
+ return result;
+};
+
+Ember.Handlebars.resolveParams = function(context, params, options) {
+ var resolvedParams = [], types = options.types, param, type;
+
+ for (var i=0, l=params.length; isomeString')
+ ```
+
+ @method htmlSafe
+ @for Ember.String
+ @static
+ @return {Handlebars.SafeString} a string that will not be html escaped by Handlebars
+*/
+Ember.String.htmlSafe = function(str) {
+ return new Handlebars.SafeString(str);
+};
+
+var htmlSafe = Ember.String.htmlSafe;
+
+if (Ember.EXTEND_PROTOTYPES === true || Ember.EXTEND_PROTOTYPES.String) {
+
+ /**
+ Mark a string as being safe for unescaped output with Handlebars.
+
+ ```javascript
+ '{{user.name}}
+
+ {{post.title}}
+ {{/each}}
+ {{/with}}
+ ```
+
+ Without the `as` operator, it would be impossible to reference `user.name` in the example above.
+
+ NOTE: The alias should not reuse a name from the bound property path.
+ For example: `{{#with foo.bar as foo}}` is not supported because it attempts to alias using
+ the first part of the property path, `foo`. Instead, use `{{#with foo.bar as baz}}`.
+
+ ### `controller` option
+
+ Adding `controller='something'` instructs the `{{with}}` helper to create and use an instance of
+ the specified controller with the new context as its content.
+
+ This is very similar to using an `itemController` option with the `{{each}}` helper.
+
+ ```handlebars
+ {{#with users.posts controller='userBlogPosts'}}
+ {{!- The current context is wrapped in our controller instance }}
+ {{/with}}
+ ```
+
+ In the above example, the template provided to the `{{with}}` block is now wrapped in the
+ `userBlogPost` controller, which provides a very elegant way to decorate the context with custom
+ functions/properties.
+
+ @method with
+ @for Ember.Handlebars.helpers
+ @param {Function} context
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('with', function withHelper(context, options) {
+ if (arguments.length === 4) {
+ var keywordName, path, rootPath, normalized, contextPath;
+
+ Ember.assert("If you pass more than one argument to the with helper, it must be in the form #with foo as bar", arguments[1] === "as");
+ options = arguments[3];
+ keywordName = arguments[2];
+ path = arguments[0];
+
+ Ember.assert("You must pass a block to the with helper", options.fn && options.fn !== Handlebars.VM.noop);
+
+ var localizedOptions = o_create(options);
+ localizedOptions.data = o_create(options.data);
+ localizedOptions.data.keywords = o_create(options.data.keywords || {});
+
+ if (Ember.isGlobalPath(path)) {
+ contextPath = path;
+ } else {
+ normalized = normalizePath(this, path, options.data);
+ path = normalized.path;
+ rootPath = normalized.root;
+
+ // This is a workaround for the fact that you cannot bind separate objects
+ // together. When we implement that functionality, we should use it here.
+ var contextKey = Ember.$.expando + Ember.guidFor(rootPath);
+ localizedOptions.data.keywords[contextKey] = rootPath;
+ // if the path is '' ("this"), just bind directly to the current context
+ contextPath = path ? contextKey + '.' + path : contextKey;
+ }
+
+ Ember.bind(localizedOptions.data.keywords, keywordName, contextPath);
+
+ return bind.call(this, path, localizedOptions, true, exists);
+ } else {
+ Ember.assert("You must pass exactly one argument to the with helper", arguments.length === 2);
+ Ember.assert("You must pass a block to the with helper", options.fn && options.fn !== Handlebars.VM.noop);
+ return helpers.bind.call(options.contexts[0], context, options);
+ }
+});
+
+
+/**
+ See [boundIf](/api/classes/Ember.Handlebars.helpers.html#method_boundIf)
+ and [unboundIf](/api/classes/Ember.Handlebars.helpers.html#method_unboundIf)
+
+ @method if
+ @for Ember.Handlebars.helpers
+ @param {Function} context
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('if', function ifHelper(context, options) {
+ Ember.assert("You must pass exactly one argument to the if helper", arguments.length === 2);
+ Ember.assert("You must pass a block to the if helper", options.fn && options.fn !== Handlebars.VM.noop);
+ if (options.data.isUnbound) {
+ return helpers.unboundIf.call(options.contexts[0], context, options);
+ } else {
+ return helpers.boundIf.call(options.contexts[0], context, options);
+ }
+});
+
+/**
+ @method unless
+ @for Ember.Handlebars.helpers
+ @param {Function} context
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('unless', function unlessHelper(context, options) {
+ Ember.assert("You must pass exactly one argument to the unless helper", arguments.length === 2);
+ Ember.assert("You must pass a block to the unless helper", options.fn && options.fn !== Handlebars.VM.noop);
+
+ var fn = options.fn, inverse = options.inverse;
+
+ options.fn = inverse;
+ options.inverse = fn;
+
+ if (options.data.isUnbound) {
+ return helpers.unboundIf.call(options.contexts[0], context, options);
+ } else {
+ return helpers.boundIf.call(options.contexts[0], context, options);
+ }
+});
+
+/**
+ `bind-attr` allows you to create a binding between DOM element attributes and
+ Ember objects. For example:
+
+ ```handlebars
+ 
+ ```
+
+ The above handlebars template will fill the `![]()
`'s `src` attribute will
+ the value of the property referenced with `"imageUrl"` and its `alt`
+ attribute with the value of the property referenced with `"imageTitle"`.
+
+ If the rendering context of this template is the following object:
+
+ ```javascript
+ {
+ imageUrl: 'http://lolcats.info/haz-a-funny',
+ imageTitle: 'A humorous image of a cat'
+ }
+ ```
+
+ The resulting HTML output will be:
+
+ ```html
+ 
+ ```
+
+ `bind-attr` cannot redeclare existing DOM element attributes. The use of `src`
+ in the following `bind-attr` example will be ignored and the hard coded value
+ of `src="/failwhale.gif"` will take precedence:
+
+ ```handlebars
+ 
+ ```
+
+ ### `bind-attr` and the `class` attribute
+
+ `bind-attr` supports a special syntax for handling a number of cases unique
+ to the `class` DOM element attribute. The `class` attribute combines
+ multiple discrete values into a single attribute as a space-delimited
+ list of strings. Each string can be:
+
+ * a string return value of an object's property.
+ * a boolean return value of an object's property
+ * a hard-coded value
+
+ A string return value works identically to other uses of `bind-attr`. The
+ return value of the property will become the value of the attribute. For
+ example, the following view and template:
+
+ ```javascript
+ AView = Ember.View.extend({
+ someProperty: function() {
+ return "aValue";
+ }.property()
+ })
+ ```
+
+ ```handlebars
+ ![]()
+ ```
+
+ A boolean return value will insert a specified class name if the property
+ returns `true` and remove the class name if the property returns `false`.
+
+ A class name is provided via the syntax
+ `somePropertyName:class-name-if-true`.
+
+ ```javascript
+ AView = Ember.View.extend({
+ someBool: true
+ })
+ ```
+
+ ```handlebars
+ ![]()
+ ```
+
+ Result in the following rendered output:
+
+ ```html
+ ![]()
+ ```
+
+ An additional section of the binding can be provided if you want to
+ replace the existing class instead of removing it when the boolean
+ value changes:
+
+ ```handlebars
+ ![]()
+ ```
+
+ A hard-coded value can be used by prepending `:` to the desired
+ class name: `:class-name-to-always-apply`.
+
+ ```handlebars
+ ![]()
+ ```
+
+ Results in the following rendered output:
+
+ ```html
+ ![]()
+ ```
+
+ All three strategies - string return value, boolean return value, and
+ hard-coded value – can be combined in a single declaration:
+
+ ```handlebars
+ ![]()
+ ```
+
+ @method bind-attr
+ @for Ember.Handlebars.helpers
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('bind-attr', function bindAttrHelper(options) {
+
+ var attrs = options.hash;
+
+ Ember.assert("You must specify at least one hash argument to bind-attr", !!Ember.keys(attrs).length);
+
+ var view = options.data.view;
+ var ret = [];
+ var ctx = this;
+
+ // Generate a unique id for this element. This will be added as a
+ // data attribute to the element so it can be looked up when
+ // the bound property changes.
+ var dataId = ++Ember.uuid;
+
+ // Handle classes differently, as we can bind multiple classes
+ var classBindings = attrs['class'];
+ if (classBindings != null) {
+ var classResults = EmberHandlebars.bindClasses(this, classBindings, view, dataId, options);
+
+ ret.push('class="' + Handlebars.Utils.escapeExpression(classResults.join(' ')) + '"');
+ delete attrs['class'];
+ }
+
+ var attrKeys = Ember.keys(attrs);
+
+ // For each attribute passed, create an observer and emit the
+ // current value of the property as an attribute.
+ forEach.call(attrKeys, function(attr) {
+ var path = attrs[attr],
+ normalized;
+
+ Ember.assert(fmt("You must provide an expression as the value of bound attribute. You specified: %@=%@", [attr, path]), typeof path === 'string');
+
+ normalized = normalizePath(ctx, path, options.data);
+
+ var value = (path === 'this') ? normalized.root : handlebarsGet(ctx, path, options),
+ type = Ember.typeOf(value);
+
+ Ember.assert(fmt("Attributes must be numbers, strings or booleans, not %@", [value]), value === null || value === undefined || type === 'number' || type === 'string' || type === 'boolean');
+
+ var observer, invoker;
+
+ observer = function observer() {
+ var result = handlebarsGet(ctx, path, options);
+
+ Ember.assert(fmt("Attributes must be numbers, strings or booleans, not %@", [result]),
+ result === null || result === undefined || typeof result === 'number' ||
+ typeof result === 'string' || typeof result === 'boolean');
+
+ var elem = view.$("[data-bindattr-" + dataId + "='" + dataId + "']");
+
+ // If we aren't able to find the element, it means the element
+ // to which we were bound has been removed from the view.
+ // In that case, we can assume the template has been re-rendered
+ // and we need to clean up the observer.
+ if (!elem || elem.length === 0) {
+ Ember.removeObserver(normalized.root, normalized.path, invoker);
+ return;
+ }
+
+ Ember.View.applyAttributeBindings(elem, attr, result);
+ };
+
+ // Add an observer to the view for when the property changes.
+ // When the observer fires, find the element using the
+ // unique data id and update the attribute to the new value.
+ // Note: don't add observer when path is 'this' or path
+ // is whole keyword e.g. {{#each x in list}} ... {{bind-attr attr="x"}}
+ if (path !== 'this' && !(normalized.isKeyword && normalized.path === '' )) {
+ view.registerObserver(normalized.root, normalized.path, observer);
+ }
+
+ // if this changes, also change the logic in ember-views/lib/views/view.js
+ if ((type === 'string' || (type === 'number' && !isNaN(value)))) {
+ ret.push(attr + '="' + Handlebars.Utils.escapeExpression(value) + '"');
+ } else if (value && type === 'boolean') {
+ // The developer controls the attr name, so it should always be safe
+ ret.push(attr + '="' + attr + '"');
+ }
+ }, this);
+
+ // Add the unique identifier
+ // NOTE: We use all lower-case since Firefox has problems with mixed case in SVG
+ ret.push('data-bindattr-' + dataId + '="' + dataId + '"');
+ return new EmberHandlebars.SafeString(ret.join(' '));
+});
+
+/**
+ See `bind-attr`
+
+ @method bindAttr
+ @for Ember.Handlebars.helpers
+ @deprecated
+ @param {Function} context
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('bindAttr', function bindAttrHelper() {
+ Ember.warn("The 'bindAttr' view helper is deprecated in favor of 'bind-attr'");
+ return EmberHandlebars.helpers['bind-attr'].apply(this, arguments);
+});
+
+/**
+ Helper that, given a space-separated string of property paths and a context,
+ returns an array of class names. Calling this method also has the side
+ effect of setting up observers at those property paths, such that if they
+ change, the correct class name will be reapplied to the DOM element.
+
+ For example, if you pass the string "fooBar", it will first look up the
+ "fooBar" value of the context. If that value is true, it will add the
+ "foo-bar" class to the current element (i.e., the dasherized form of
+ "fooBar"). If the value is a string, it will add that string as the class.
+ Otherwise, it will not add any new class name.
+
+ @private
+ @method bindClasses
+ @for Ember.Handlebars
+ @param {Ember.Object} context The context from which to lookup properties
+ @param {String} classBindings A string, space-separated, of class bindings
+ to use
+ @param {Ember.View} view The view in which observers should look for the
+ element to update
+ @param {Srting} bindAttrId Optional bindAttr id used to lookup elements
+ @return {Array} An array of class names to add
+*/
+EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId, options) {
+ var ret = [], newClass, value, elem;
+
+ // Helper method to retrieve the property from the context and
+ // determine which class string to return, based on whether it is
+ // a Boolean or not.
+ var classStringForPath = function(root, parsedPath, options) {
+ var val,
+ path = parsedPath.path;
+
+ if (path === 'this') {
+ val = root;
+ } else if (path === '') {
+ val = true;
+ } else {
+ val = handlebarsGet(root, path, options);
+ }
+
+ return Ember.View._classStringForValue(path, val, parsedPath.className, parsedPath.falsyClassName);
+ };
+
+ // For each property passed, loop through and setup
+ // an observer.
+ forEach.call(classBindings.split(' '), function(binding) {
+
+ // Variable in which the old class value is saved. The observer function
+ // closes over this variable, so it knows which string to remove when
+ // the property changes.
+ var oldClass;
+
+ var observer, invoker;
+
+ var parsedPath = Ember.View._parsePropertyPath(binding),
+ path = parsedPath.path,
+ pathRoot = context,
+ normalized;
+
+ if (path !== '' && path !== 'this') {
+ normalized = normalizePath(context, path, options.data);
+
+ pathRoot = normalized.root;
+ path = normalized.path;
+ }
+
+ // Set up an observer on the context. If the property changes, toggle the
+ // class name.
+ observer = function() {
+ // Get the current value of the property
+ newClass = classStringForPath(context, parsedPath, options);
+ elem = bindAttrId ? view.$("[data-bindattr-" + bindAttrId + "='" + bindAttrId + "']") : view.$();
+
+ // If we can't find the element anymore, a parent template has been
+ // re-rendered and we've been nuked. Remove the observer.
+ if (!elem || elem.length === 0) {
+ Ember.removeObserver(pathRoot, path, invoker);
+ } else {
+ // If we had previously added a class to the element, remove it.
+ if (oldClass) {
+ elem.removeClass(oldClass);
+ }
+
+ // If necessary, add a new class. Make sure we keep track of it so
+ // it can be removed in the future.
+ if (newClass) {
+ elem.addClass(newClass);
+ oldClass = newClass;
+ } else {
+ oldClass = null;
+ }
+ }
+ };
+
+ if (path !== '' && path !== 'this') {
+ view.registerObserver(pathRoot, path, observer);
+ }
+
+ // We've already setup the observer; now we just need to figure out the
+ // correct behavior right now on the first pass through.
+ value = classStringForPath(context, parsedPath, options);
+
+ if (value) {
+ ret.push(value);
+
+ // Make sure we save the current value so that it can be removed if the
+ // observer fires.
+ oldClass = value;
+ }
+ });
+
+ return ret;
+};
+
+
+})();
+
+
+
+(function() {
+/*globals Handlebars */
+
+// TODO: Don't require the entire module
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, set = Ember.set;
+var EmberHandlebars = Ember.Handlebars;
+var LOWERCASE_A_Z = /^[a-z]/;
+var VIEW_PREFIX = /^view\./;
+
+function makeBindings(thisContext, options) {
+ var hash = options.hash,
+ hashType = options.hashTypes;
+
+ for (var prop in hash) {
+ if (hashType[prop] === 'ID') {
+
+ var value = hash[prop];
+
+ if (Ember.IS_BINDING.test(prop)) {
+ Ember.warn("You're attempting to render a view by passing " + prop + "=" + value + " to a view helper, but this syntax is ambiguous. You should either surround " + value + " in quotes or remove `Binding` from " + prop + ".");
+ } else {
+ hash[prop + 'Binding'] = value;
+ hashType[prop + 'Binding'] = 'STRING';
+ delete hash[prop];
+ delete hashType[prop];
+ }
+ }
+ }
+
+ if (hash.hasOwnProperty('idBinding')) {
+ // id can't be bound, so just perform one-time lookup.
+ hash.id = EmberHandlebars.get(thisContext, hash.idBinding, options);
+ hashType.id = 'STRING';
+ delete hash.idBinding;
+ delete hashType.idBinding;
+ }
+}
+
+EmberHandlebars.ViewHelper = Ember.Object.create({
+
+ propertiesFromHTMLOptions: function(options) {
+ var hash = options.hash, data = options.data;
+ var extensions = {},
+ classes = hash['class'],
+ dup = false;
+
+ if (hash.id) {
+ extensions.elementId = hash.id;
+ dup = true;
+ }
+
+ if (hash.tag) {
+ extensions.tagName = hash.tag;
+ dup = true;
+ }
+
+ if (classes) {
+ classes = classes.split(' ');
+ extensions.classNames = classes;
+ dup = true;
+ }
+
+ if (hash.classBinding) {
+ extensions.classNameBindings = hash.classBinding.split(' ');
+ dup = true;
+ }
+
+ if (hash.classNameBindings) {
+ if (extensions.classNameBindings === undefined) extensions.classNameBindings = [];
+ extensions.classNameBindings = extensions.classNameBindings.concat(hash.classNameBindings.split(' '));
+ dup = true;
+ }
+
+ if (hash.attributeBindings) {
+ Ember.assert("Setting 'attributeBindings' via Handlebars is not allowed. Please subclass Ember.View and set it there instead.");
+ extensions.attributeBindings = null;
+ dup = true;
+ }
+
+ if (dup) {
+ hash = Ember.$.extend({}, hash);
+ delete hash.id;
+ delete hash.tag;
+ delete hash['class'];
+ delete hash.classBinding;
+ }
+
+ // Set the proper context for all bindings passed to the helper. This applies to regular attribute bindings
+ // as well as class name bindings. If the bindings are local, make them relative to the current context
+ // instead of the view.
+ var path;
+
+ // Evaluate the context of regular attribute bindings:
+ for (var prop in hash) {
+ if (!hash.hasOwnProperty(prop)) { continue; }
+
+ // Test if the property ends in "Binding"
+ if (Ember.IS_BINDING.test(prop) && typeof hash[prop] === 'string') {
+ path = this.contextualizeBindingPath(hash[prop], data);
+ if (path) { hash[prop] = path; }
+ }
+ }
+
+ // Evaluate the context of class name bindings:
+ if (extensions.classNameBindings) {
+ for (var b in extensions.classNameBindings) {
+ var full = extensions.classNameBindings[b];
+ if (typeof full === 'string') {
+ // Contextualize the path of classNameBinding so this:
+ //
+ // classNameBinding="isGreen:green"
+ //
+ // is converted to this:
+ //
+ // classNameBinding="_parentView.context.isGreen:green"
+ var parsedPath = Ember.View._parsePropertyPath(full);
+ path = this.contextualizeBindingPath(parsedPath.path, data);
+ if (path) { extensions.classNameBindings[b] = path + parsedPath.classNames; }
+ }
+ }
+ }
+
+ return Ember.$.extend(hash, extensions);
+ },
+
+ // Transform bindings from the current context to a context that can be evaluated within the view.
+ // Returns null if the path shouldn't be changed.
+ //
+ // TODO: consider the addition of a prefix that would allow this method to return `path`.
+ contextualizeBindingPath: function(path, data) {
+ var normalized = Ember.Handlebars.normalizePath(null, path, data);
+ if (normalized.isKeyword) {
+ return 'templateData.keywords.' + path;
+ } else if (Ember.isGlobalPath(path)) {
+ return null;
+ } else if (path === 'this' || path === '') {
+ return '_parentView.context';
+ } else {
+ return '_parentView.context.' + path;
+ }
+ },
+
+ helper: function(thisContext, path, options) {
+ var data = options.data,
+ fn = options.fn,
+ newView;
+
+ makeBindings(thisContext, options);
+
+ if ('string' === typeof path) {
+
+ // TODO: this is a lame conditional, this should likely change
+ // but something along these lines will likely need to be added
+ // as deprecation warnings
+ //
+ if (options.types[0] === 'STRING' && LOWERCASE_A_Z.test(path) && !VIEW_PREFIX.test(path)) {
+ Ember.assert("View requires a container", !!data.view.container);
+ newView = data.view.container.lookupFactory('view:' + path);
+ } else {
+ newView = EmberHandlebars.get(thisContext, path, options);
+ }
+
+ Ember.assert("Unable to find view at path '" + path + "'", !!newView);
+ } else {
+ newView = path;
+ }
+
+ Ember.assert(Ember.String.fmt('You must pass a view to the #view helper, not %@ (%@)', [path, newView]), Ember.View.detect(newView) || Ember.View.detectInstance(newView));
+
+ var viewOptions = this.propertiesFromHTMLOptions(options, thisContext);
+ var currentView = data.view;
+ viewOptions.templateData = data;
+ var newViewProto = newView.proto ? newView.proto() : newView;
+
+ if (fn) {
+ Ember.assert("You cannot provide a template block if you also specified a templateName", !get(viewOptions, 'templateName') && !get(newViewProto, 'templateName'));
+ viewOptions.template = fn;
+ }
+
+ // We only want to override the `_context` computed property if there is
+ // no specified controller. See View#_context for more information.
+ if (!newViewProto.controller && !newViewProto.controllerBinding && !viewOptions.controller && !viewOptions.controllerBinding) {
+ viewOptions._context = thisContext;
+ }
+
+ currentView.appendChild(newView, viewOptions);
+ }
+});
+
+/**
+ `{{view}}` inserts a new instance of `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
+
+
+
+ "
+ ```
+
+ @method debugger
+ @for Ember.Handlebars.helpers
+ @param {String} property
+*/
+Ember.Handlebars.registerHelper('debugger', function debuggerHelper(options) {
+
+ // These are helpful values you can inspect while debugging.
+ var templateContext = this;
+ var typeOfTemplateContext = Ember.inspect(templateContext);
+
+ debugger;
+});
+
+
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, set = Ember.set;
+var fmt = Ember.String.fmt;
+
+Ember.Handlebars.EachView = Ember.CollectionView.extend(Ember._Metamorph, {
+ init: function() {
+ 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 Ember.Binding('content', '_eachView.dataSource').oneWay();
+ binding.connect(controller);
+ });
+
+ set(this, '_arrayController', controller);
+ } else {
+ this.disableContentObservers(function() {
+ binding = new Ember.Binding('content', 'dataSource').oneWay();
+ binding.connect(this);
+ });
+ }
+
+ return this._super();
+ },
+
+ _assertArrayLike: function(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]),
+ !Ember.ControllerMixin.detect(content) ||
+ (content && content.isGenerated) ||
+ content instanceof Ember.ArrayController);
+ Ember.assert(fmt("The value that #each loops over must be an Array. You passed %@", [(Ember.ControllerMixin.detect(content) && content.get('model') !== undefined) ? fmt("'%@' (wrapped in %@)", [content.get('model'), content]) : content]), Ember.Array.detect(content));
+ },
+
+ disableContentObservers: function(callback) {
+ Ember.removeBeforeObserver(this, 'content', null, '_contentWillChange');
+ Ember.removeObserver(this, 'content', null, '_contentDidChange');
+
+ callback.call(this);
+
+ Ember.addBeforeObserver(this, 'content', null, '_contentWillChange');
+ Ember.addObserver(this, 'content', null, '_contentDidChange');
+ },
+
+ itemViewClass: Ember._MetamorphView,
+ emptyViewClass: Ember._MetamorphView,
+
+ createChildView: function(view, attrs) {
+ view = this._super(view, attrs);
+
+ // At the moment, if a container view subclass wants
+ // to insert keywords, it is responsible for cloning
+ // the keywords hash. This will be fixed momentarily.
+ var keyword = get(this, 'keyword');
+ var content = get(view, 'content');
+
+ if (keyword) {
+ var data = get(view, 'templateData');
+
+ data = Ember.copy(data);
+ data.keywords = view.cloneKeywords();
+ set(view, 'templateData', data);
+
+ // In this case, we do not bind, because the `content` of
+ // a #each item cannot change.
+ data.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: function() {
+ if (!this._super()) { return; }
+
+ var arrayController = get(this, '_arrayController');
+
+ if (arrayController) {
+ arrayController.destroy();
+ }
+
+ return this;
+ }
+});
+
+// Defeatureify doesn't seem to like nested functions that need to be removed
+function _addMetamorphCheck() {
+ Ember.Handlebars.EachView.reopen({
+ _checkMetamorph: Ember.on('didInsertElement', function() {
+ Ember.assert("The metamorph tags, " +
+ this.morph.start + " and " + this.morph.end +
+ ", have different parents.\nThe browser has fixed your template to output valid HTML (for example, check that you have properly closed all tags and have used a TBODY tag when creating a table with '{{#each}}')",
+ document.getElementById( this.morph.start ).parentNode ===
+ document.getElementById( this.morph.end ).parentNode
+ );
+ })
+ });
+}
+
+Ember.runInDebug( function() {
+ _addMetamorphCheck();
+});
+
+var GroupedEach = Ember.Handlebars.GroupedEach = function(context, path, options) {
+ var self = this,
+ normalized = Ember.Handlebars.normalizePath(context, path, options.data);
+
+ this.context = context;
+ this.path = path;
+ this.options = options;
+ this.template = options.fn;
+ this.containingView = options.data.view;
+ this.normalizedRoot = normalized.root;
+ this.normalizedPath = normalized.path;
+ this.content = this.lookupContent();
+
+ this.addContentObservers();
+ this.addArrayObservers();
+
+ this.containingView.on('willClearRender', function() {
+ self.destroy();
+ });
+};
+
+GroupedEach.prototype = {
+ contentWillChange: function() {
+ this.removeArrayObservers();
+ },
+
+ contentDidChange: function() {
+ this.content = this.lookupContent();
+ this.addArrayObservers();
+ this.rerenderContainingView();
+ },
+
+ contentArrayWillChange: Ember.K,
+
+ contentArrayDidChange: function() {
+ this.rerenderContainingView();
+ },
+
+ lookupContent: function() {
+ return Ember.Handlebars.get(this.normalizedRoot, this.normalizedPath, this.options);
+ },
+
+ addArrayObservers: function() {
+ if (!this.content) { return; }
+
+ this.content.addArrayObserver(this, {
+ willChange: 'contentArrayWillChange',
+ didChange: 'contentArrayDidChange'
+ });
+ },
+
+ removeArrayObservers: function() {
+ if (!this.content) { return; }
+
+ this.content.removeArrayObserver(this, {
+ willChange: 'contentArrayWillChange',
+ didChange: 'contentArrayDidChange'
+ });
+ },
+
+ addContentObservers: function() {
+ Ember.addBeforeObserver(this.normalizedRoot, this.normalizedPath, this, this.contentWillChange);
+ Ember.addObserver(this.normalizedRoot, this.normalizedPath, this, this.contentDidChange);
+ },
+
+ removeContentObservers: function() {
+ Ember.removeBeforeObserver(this.normalizedRoot, this.normalizedPath, this.contentWillChange);
+ Ember.removeObserver(this.normalizedRoot, this.normalizedPath, this.contentDidChange);
+ },
+
+ render: function() {
+ if (!this.content) { return; }
+
+ var content = this.content,
+ contentLength = get(content, 'length'),
+ data = this.options.data,
+ template = this.template;
+
+ data.insideEach = true;
+ for (var i = 0; i < contentLength; i++) {
+ template(content.objectAt(i), { data: data });
+ }
+ },
+
+ rerenderContainingView: function() {
+ var self = this;
+ Ember.run.scheduleOnce('render', this, function() {
+ // It's possible it's been destroyed after we enqueued a re-render call.
+ if (!self.destroyed) {
+ self.containingView.rerender();
+ }
+ });
+ },
+
+ destroy: function() {
+ this.removeContentObservers();
+ if (this.content) {
+ this.removeArrayObservers();
+ }
+ this.destroyed = true;
+ }
+};
+
+/**
+ The `{{#each}}` helper loops over elements in a collection, rendering its
+ block once for each item. It is an extension of the base Handlebars `{{#each}}`
+ helper:
+
+ ```javascript
+ Developers = [{name: 'Yehuda'},{name: 'Tom'}, {name: 'Paul'}];
+ ```
+
+ ```handlebars
+ {{#each Developers}}
+ {{name}}
+ {{/each}}
+ ```
+
+ `{{each}}` supports an alternative syntax with element naming:
+
+ ```handlebars
+ {{#each person in Developers}}
+ {{person.name}}
+ {{/each}}
+ ```
+
+ When looping over objects that do not have properties, `{{this}}` can be used
+ to render the object:
+
+ ```javascript
+ DeveloperNames = ['Yehuda', 'Tom', 'Paul']
+ ```
+
+ ```handlebars
+ {{#each DeveloperNames}}
+ {{this}}
+ {{/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}}
+
+
+ ```
+
+ Removing a view
+
+ ```javascript
+ aContainer.toArray(); // [aContainer.aView, aContainer.bView]
+ aContainer.removeObject(aContainer.get('bView'));
+ aContainer.toArray(); // [aContainer.aView]
+ ```
+
+ Will result in the following HTML
+
+ ```html
+ A
+ B
+
+
+ ```
+
+ Similarly, adding a child view is accomplished by adding `Ember.View` instances to the
+ container view.
+
+ Given an empty `` the following code
+
+ ```javascript
+ aContainer = Ember.ContainerView.create({
+ classNames: ['the-container'],
+ childViews: ['aView', 'bView'],
+ aView: Ember.View.create({
+ template: Ember.Handlebars.compile("A")
+ }),
+ bView: Ember.View.create({
+ template: Ember.Handlebars.compile("B")
+ })
+ });
+
+ aContainer.appendTo('body');
+ ```
+
+ Results in the HTML
+
+ ```html
+ A
+
+
+ ```
+
+ Adding a view
+
+ ```javascript
+ AnotherViewClass = Ember.View.extend({
+ template: Ember.Handlebars.compile("Another view")
+ });
+
+ aContainer.toArray(); // [aContainer.aView, aContainer.bView]
+ aContainer.pushObject(AnotherViewClass.create());
+ aContainer.toArray(); // [aContainer.aView, aContainer.bView, A
+ B
+
+
+ ```
+
+ ## Templates and Layout
+
+ A `template`, `templateName`, `defaultTemplate`, `layout`, `layoutName` or
+ `defaultLayout` property on a container view will not result in the template
+ or layout being rendered. The HTML contents of a `Ember.ContainerView`'s DOM
+ representation will only be the rendered HTML of its child views.
+
+ @class ContainerView
+ @namespace Ember
+ @extends Ember.View
+*/
+Ember.ContainerView = Ember.View.extend(Ember.MutableArray, {
+ states: states,
+
+ init: function() {
+ this._super();
+
+ var childViews = get(this, 'childViews');
+
+ // redefine view's childViews property that was obliterated
+ Ember.defineProperty(this, 'childViews', Ember.View.childViewsProperty);
+
+ var _childViews = this._childViews;
+
+ forEach(childViews, function(viewName, idx) {
+ var view;
+
+ if ('string' === typeof viewName) {
+ view = get(this, viewName);
+ view = this.createChildView(view);
+ set(this, viewName, view);
+ } else {
+ view = this.createChildView(viewName);
+ }
+
+ _childViews[idx] = view;
+ }, this);
+
+ var currentView = get(this, 'currentView');
+ if (currentView) {
+ if (!_childViews.length) { _childViews = this._childViews = this._childViews.slice(); }
+ _childViews.push(this.createChildView(currentView));
+ }
+ },
+
+ replace: function(idx, removedCount, addedViews) {
+ var addedCount = addedViews ? get(addedViews, 'length') : 0;
+ var self = this;
+ Ember.assert("You can't add a child to a container that is already a child of another view", Ember.A(addedViews).every(function(item) { return !get(item, '_parentView') || get(item, '_parentView') === self; }));
+
+ this.arrayContentWillChange(idx, removedCount, addedCount);
+ this.childViewsWillChange(this._childViews, idx, removedCount);
+
+ if (addedCount === 0) {
+ this._childViews.splice(idx, removedCount) ;
+ } else {
+ var args = [idx, removedCount].concat(addedViews);
+ if (addedViews.length && !this._childViews.length) { this._childViews = this._childViews.slice(); }
+ this._childViews.splice.apply(this._childViews, args);
+ }
+
+ this.arrayContentDidChange(idx, removedCount, addedCount);
+ this.childViewsDidChange(this._childViews, idx, removedCount, addedCount);
+
+ return this;
+ },
+
+ objectAt: function(idx) {
+ return this._childViews[idx];
+ },
+
+ length: Ember.computed(function () {
+ return this._childViews.length;
+ }).volatile(),
+
+ /**
+ Instructs each child view to render to the passed render buffer.
+
+ @private
+ @method render
+ @param {Ember.RenderBuffer} buffer the buffer to render to
+ */
+ render: function(buffer) {
+ this.forEachChildView(function(view) {
+ view.renderToBuffer(buffer);
+ });
+ },
+
+ instrumentName: 'container',
+
+ /**
+ When a child view is removed, destroy its element so that
+ it is removed from the DOM.
+
+ The array observer that triggers this action is set up in the
+ `renderToBuffer` method.
+
+ @private
+ @method childViewsWillChange
+ @param {Ember.Array} views the child views array before mutation
+ @param {Number} start the start position of the mutation
+ @param {Number} removed the number of child views removed
+ **/
+ childViewsWillChange: function(views, start, removed) {
+ this.propertyWillChange('childViews');
+
+ if (removed > 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: function(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 afte the mutation has occurred
+ @param {Number} start the start position of the mutation
+ @param {Number} removed the number of child views removed
+ @param {Number} the number of child views added
+ */
+ childViewsDidChange: function(views, start, removed, added) {
+ if (added > 0) {
+ var changedViews = views.slice(start, start+added);
+ this.initializeViews(changedViews, this, get(this, 'templateData'));
+ this.currentState.childViewsDidChange(this, views, start, added);
+ }
+ this.propertyDidChange('childViews');
+ },
+
+ initializeViews: function(views, parentView, templateData) {
+ forEach(views, function(view) {
+ set(view, '_parentView', parentView);
+
+ if (!view.container && parentView) {
+ set(view, 'container', parentView.container);
+ }
+
+ if (!get(view, 'templateData')) {
+ set(view, 'templateData', templateData);
+ }
+ });
+ },
+
+ currentView: null,
+
+ _currentViewWillChange: Ember.beforeObserver('currentView', function() {
+ var currentView = get(this, 'currentView');
+ if (currentView) {
+ currentView.destroy();
+ }
+ }),
+
+ _currentViewDidChange: Ember.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.", !get(currentView, '_parentView'));
+ this.pushObject(currentView);
+ }
+ }),
+
+ _ensureChildrenAreInDOM: function () {
+ this.currentState.ensureChildrenAreInDOM(this);
+ }
+});
+
+Ember.merge(states._default, {
+ childViewsWillChange: Ember.K,
+ childViewsDidChange: Ember.K,
+ ensureChildrenAreInDOM: Ember.K
+});
+
+Ember.merge(states.inBuffer, {
+ childViewsDidChange: function(parentView, views, start, added) {
+ throw new Ember.Error('You cannot modify child views while in the inBuffer state');
+ }
+});
+
+Ember.merge(states.hasElement, {
+ childViewsWillChange: function(view, views, start, removed) {
+ for (var i=start; iA
+ B
+ Another view
+
+
+ ```
+
+ ## Automatic matching of parent/child tagNames
+
+ Setting the `tagName` property of a `CollectionView` to any of
+ "ul", "ol", "table", "thead", "tbody", "tfoot", "tr", or "select" will result
+ in the item views receiving an appropriately matched `tagName` property.
+
+ Given an empty `` and the following code:
+
+ ```javascript
+ anUnorderedListView = Ember.CollectionView.create({
+ tagName: 'ul',
+ content: ['A','B','C'],
+ itemViewClass: Ember.View.extend({
+ template: Ember.Handlebars.compile("the letter: {{view.content}}")
+ })
+ });
+
+ anUnorderedListView.appendTo('body');
+ ```
+
+ Will result in the following HTML structure
+
+ ```html
+ the letter: A
+ the letter: B
+ the letter: C
+ -
+
- the letter: A +
- the letter: B +
- the letter: C +
+
+ ```
+
+ ## Adding and Removing items
+
+ The `childViews` property of a `CollectionView` should not be directly
+ manipulated. Instead, add, remove, replace items from its `content` property.
+ This will trigger appropriate changes to its rendered HTML.
+
+
+ @class CollectionView
+ @namespace Ember
+ @extends Ember.ContainerView
+ @since Ember 0.9
+*/
+Ember.CollectionView = Ember.ContainerView.extend({
+
+ /**
+ A list of items to be displayed by the `Ember.CollectionView`.
+
+ @property content
+ @type Ember.Array
+ @default null
+ */
+ content: null,
+
+ /**
+ This provides metadata about what kind of empty view class this
+ collection would like if it is being instantiated from another
+ system (like Handlebars)
+
+ @private
+ @property emptyViewClass
+ */
+ emptyViewClass: Ember.View,
+
+ /**
+ An optional view to display if content is set to an empty array.
+
+ @property emptyView
+ @type Ember.View
+ @default null
+ */
+ emptyView: null,
+
+ /**
+ @property itemViewClass
+ @type Ember.View
+ @default Ember.View
+ */
+ itemViewClass: Ember.View,
+
+ /**
+ Setup a CollectionView
+
+ @method init
+ */
+ init: function() {
+ var ret = this._super();
+ this._contentDidChange();
+ return ret;
+ },
+
+ /**
+ Invoked when the content property is about to change. Notifies observers that the
+ entire array content will change.
+
+ @private
+ @method _contentWillChange
+ */
+ _contentWillChange: Ember.beforeObserver('content', function() {
+ var content = this.get('content');
+
+ if (content) { content.removeArrayObserver(this); }
+ var len = content ? get(content, 'length') : 0;
+ this.arrayWillChange(content, 0, len);
+ }),
+
+ /**
+ Check to make sure that the content has changed, and if so,
+ update the children directly. This is always scheduled
+ asynchronously, to allow the element to be created before
+ bindings have synchronized and vice versa.
+
+ @private
+ @method _contentDidChange
+ */
+ _contentDidChange: Ember.observer('content', function() {
+ var content = get(this, 'content');
+
+ if (content) {
+ this._assertArrayLike(content);
+ content.addArrayObserver(this);
+ }
+
+ var len = content ? get(content, 'length') : 0;
+ this.arrayDidChange(content, 0, null, len);
+ }),
+
+ /**
+ Ensure that the content implements Ember.Array
+
+ @private
+ @method _assertArrayLike
+ */
+ _assertArrayLike: function(content) {
+ Ember.assert(fmt("an Ember.CollectionView's content must implement Ember.Array. You passed %@", [content]), Ember.Array.detect(content));
+ },
+
+ /**
+ Removes the content and content observers.
+
+ @method destroy
+ */
+ destroy: function() {
+ if (!this._super()) { return; }
+
+ var content = get(this, 'content');
+ if (content) { content.removeArrayObserver(this); }
+
+ if (this._createdEmptyView) {
+ this._createdEmptyView.destroy();
+ }
+
+ return this;
+ },
+
+ /**
+ Called when a mutation to the underlying content array will occur.
+
+ This method will remove any views that are no longer in the underlying
+ content array.
+
+ Invokes whenever the content array itself will change.
+
+ @method arrayWillChange
+ @param {Array} content the managed collection of objects
+ @param {Number} start the index at which the changes will occurr
+ @param {Number} removed number of object to be removed from content
+ */
+ arrayWillChange: function(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 Ember.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, childView, idx, len;
+
+ len = this._childViews.length;
+
+ var removingAll = removedCount === len;
+
+ if (removingAll) {
+ this.currentState.empty(this);
+ this.invokeRecursively(function(view) {
+ view.removedFromDOM = true;
+ }, false);
+ }
+
+ for (idx = start + removedCount - 1; idx >= start; idx--) {
+ childView = childViews[idx];
+ childView.destroy();
+ }
+ },
+
+ /**
+ Called when a mutation to the underlying content array occurs.
+
+ This method will replay that mutation against the views that compose the
+ `Ember.CollectionView`, ensuring that the view reflects the model.
+
+ This array observer is added in `contentDidChange`.
+
+ @method arrayDidChange
+ @param {Array} content the managed collection of objects
+ @param {Number} start the index at which the changes occurred
+ @param {Number} removed number of object removed from content
+ @param {Number} added number of object added to content
+ */
+ arrayDidChange: function(content, start, removed, added) {
+ var addedViews = [], view, item, idx, len, itemViewClass,
+ emptyView;
+
+ len = content ? get(content, 'length') : 0;
+
+ if (len) {
+ itemViewClass = get(this, 'itemViewClass');
+
+ if ('string' === typeof itemViewClass) {
+ itemViewClass = get(itemViewClass) || itemViewClass;
+ }
+
+ Ember.assert(fmt("itemViewClass must be a subclass of Ember.View, not %@",
+ [itemViewClass]),
+ 'string' === typeof itemViewClass || Ember.View.detect(itemViewClass));
+
+ for (idx = start; idx < start+added; idx++) {
+ item = content.objectAt(idx);
+
+ view = this.createChildView(itemViewClass, {
+ content: item,
+ contentIndex: idx
+ });
+
+ addedViews.push(view);
+ }
+ } else {
+ emptyView = get(this, 'emptyView');
+
+ if (!emptyView) { return; }
+
+ if ('string' === typeof emptyView) {
+ emptyView = get(emptyView) || emptyView;
+ }
+
+ emptyView = this.createChildView(emptyView);
+ addedViews.push(emptyView);
+ set(this, 'emptyView', emptyView);
+
+ if (Ember.CoreView.detect(emptyView)) {
+ this._createdEmptyView = emptyView;
+ }
+ }
+
+ this.replace(start, 0, addedViews);
+ },
+
+ /**
+ Instantiates a view to be added to the childViews array during view
+ initialization. You generally will not call this method directly unless
+ you are overriding `createChildViews()`. Note that this method will
+ automatically configure the correct settings on the new view instance to
+ act as a child of the parent.
+
+ The tag name for the view will be set to the tagName of the viewClass
+ passed in.
+
+ @method createChildView
+ @param {Class} viewClass
+ @param {Hash} [attrs] Attributes to add
+ @return {Ember.View} new instance
+ */
+ createChildView: function(view, attrs) {
+ view = this._super(view, attrs);
+
+ var itemTagName = get(view, 'tagName');
+
+ if (itemTagName === null || itemTagName === undefined) {
+ itemTagName = Ember.CollectionView.CONTAINER_MAP[get(this, 'tagName')];
+ set(view, 'tagName', itemTagName);
+ }
+
+ return view;
+ }
+});
+
+/**
+ A map of parent tags to their default child tags. You can add
+ additional parent tags if you want collection views that use
+ a particular parent tag to default to a child tag.
+
+ @property CONTAINER_MAP
+ @type Hash
+ @static
+ @final
+*/
+Ember.CollectionView.CONTAINER_MAP = {
+ ul: 'li',
+ ol: 'li',
+ table: 'tr',
+ thead: 'tr',
+ tbody: 'tr',
+ tfoot: 'tr',
+ tr: 'td',
+ select: 'option'
+};
+
+})();
+
+
+
+(function() {
+var get = Ember.get;
+
+/**
+ The ComponentTemplateDeprecation mixin is used to provide a useful
+ deprecation warning when using either `template` or `templateName` with
+ a component. The `template` and `templateName` properties specified at
+ extend time are moved to `layout` and `layoutName` respectively.
+
+ `Ember.ComponentTemplateDeprecation` is used internally by Ember in
+ `Ember.Component`.
+
+ @class ComponentTemplateDeprecation
+ @namespace Ember
+*/
+Ember.ComponentTemplateDeprecation = Ember.Mixin.create({
+ /**
+ @private
+
+ Moves `templateName` to `layoutName` and `template` to `layout` at extend
+ time if a layout is not also specified.
+
+ Note that this currently modifies the mixin themselves, which is technically
+ dubious but is practically of little consequence. This may change in the
+ future.
+
+ @method willMergeMixin
+ */
+ willMergeMixin: function(props) {
+ // must call _super here to ensure that the ActionHandler
+ // mixin is setup properly (moves actions -> _actions)
+ //
+ // Calling super is only OK here since we KNOW that
+ // there is another Mixin loaded first.
+ this._super.apply(this, arguments);
+
+ var deprecatedProperty, replacementProperty,
+ layoutSpecified = (props.layoutName || props.layout || get(this, 'layoutName'));
+
+ if (props.templateName && !layoutSpecified) {
+ deprecatedProperty = 'templateName';
+ replacementProperty = 'layoutName';
+
+ props.layoutName = props.templateName;
+ delete props['templateName'];
+ }
+
+ if (props.template && !layoutSpecified) {
+ deprecatedProperty = 'template';
+ replacementProperty = 'layout';
+
+ props.layout = props.template;
+ delete props['template'];
+ }
+
+ if (deprecatedProperty) {
+ Ember.deprecate('Do not specify ' + deprecatedProperty + ' on a Component, use ' + replacementProperty + ' instead.', false);
+ }
+ }
+});
+
+
+})();
+
+
+
+(function() {
+var get = Ember.get, set = Ember.set, isNone = Ember.isNone,
+ a_slice = Array.prototype.slice;
+
+
+/**
+@module ember
+@submodule ember-views
+*/
+
+/**
+ An `Ember.Component` is a view that is completely
+ isolated. Property access in its templates go
+ to the view object and actions are targeted at
+ the view object. There is no access to the
+ surrounding context or outer controller; all
+ contextual information must be passed in.
+
+ The easiest way to create an `Ember.Component` is via
+ a template. If you name a template
+ `components/my-foo`, you will be able to use
+ `{{my-foo}}` in other templates, which will make
+ an instance of the isolated component.
+
+ ```handlebars
+ {{app-profile person=currentUser}}
+ ```
+
+ ```handlebars
+
+
+ The collection is empty
+
+ {{person.title}}
+{{person.signature}}
+ ``` + + You can use `yield` inside a template to + include the **contents** of any block attached to + the component. The block will be executed in the + context of the surrounding context or outer controller: + + ```handlebars + {{#app-profile person=currentUser}} +Admin mode
+ {{! Executed in the controller's context. }} + {{/app-profile}} + ``` + + ```handlebars + +{{person.title}}
+ {{! Executed in the components context. }} + {{yield}} {{! block contents }} + ``` + + If you want to customize the component, in order to + handle events or actions, you implement a subclass + of `Ember.Component` named after the name of the + component. Note that `Component` needs to be appended to the name of + your subclass like `AppProfileComponent`. + + For example, you could implement the action + `hello` for the `app-profile` component: + + ```javascript + App.AppProfileComponent = Ember.Component.extend({ + actions: { + hello: function(name) { + console.log("Hello", name); + } + } + }); + ``` + + And then use it in the component's template: + + ```handlebars + + +{{person.title}}
+ {{yield}} + + + ``` + + Components must have a `-` in their name to avoid + conflicts with built-in controls that wrap HTML + elements. This is consistent with the same + requirement in web components. + + @class Component + @namespace Ember + @extends Ember.View +*/ +Ember.Component = Ember.View.extend(Ember.TargetActionSupport, Ember.ComponentTemplateDeprecation, { + init: function() { + this._super(); + set(this, 'context', this); + set(this, 'controller', this); + }, + + defaultLayout: function(context, options){ + Ember.Handlebars.helpers['yield'].call(context, options); + }, + + /** + A components template property is set by passing a block + during its invocation. It is executed within the parent context. + + Example: + + ```handlebars + {{#my-component}} + // something that is run in the context + // of the parent context + {{/my-component}} + ``` + + Specifying a template directly to a component is deprecated without + also specifying the layout property. + + @deprecated + @property template + */ + template: Ember.computed(function(key, value) { + if (value !== undefined) { return value; } + + var templateName = get(this, 'templateName'), + template = this.templateForName(templateName, 'template'); + + Ember.assert("You specified the templateName " + templateName + " for " + this + ", but it did not exist.", !templateName || template); + + return template || get(this, 'defaultTemplate'); + }).property('templateName'), + + /** + Specifying a components `templateName` is deprecated without also + providing the `layout` or `layoutName` properties. + + @deprecated + @property templateName + */ + templateName: null, + + // during render, isolate keywords + cloneKeywords: function() { + return { + view: this, + controller: this + }; + }, + + _yield: function(context, options) { + var view = options.data.view, + parentView = this._parentView, + template = get(this, 'template'); + + if (template) { + Ember.assert("A Component must have a parent view in order to yield.", parentView); + + view.appendChild(Ember.View, { + isVirtual: true, + tagName: '', + _contextView: parentView, + template: template, + context: get(parentView, 'context'), + controller: get(parentView, 'controller'), + templateData: { keywords: parentView.cloneKeywords() } + }); + } + }, + + /** + If the component is currently inserted into the DOM of a parent view, this + property will point to the controller of the parent view. + + @property targetObject + @type Ember.Controller + @default null + */ + targetObject: Ember.computed(function(key) { + var parentView = get(this, '_parentView'); + return parentView ? get(parentView, 'controller') : null; + }).property('_parentView'), + + /** + Triggers a named action on the controller context where the component is used if + this controller has registered for notifications of the action. + + For example a component for playing or pausing music may translate click events + into action notifications of "play" or "stop" depending on some internal state + of the component: + + + ```javascript + App.PlayButtonComponent = Ember.Component.extend({ + click: function(){ + if (this.get('isPlaying')) { + this.sendAction('play'); + } else { + this.sendAction('stop'); + } + } + }); + ``` + + When used inside a template these component actions are configured to + trigger actions in the outer application context: + + ```handlebars + {{! application.hbs }} + {{play-button play="musicStarted" stop="musicStopped"}} + ``` + + When the component receives a browser `click` event it translate this + interaction into application-specific semantics ("play" or "stop") and + triggers the specified action name on the controller for the template + where the component is used: + + + ```javascript + App.ApplicationController = Ember.Controller.extend({ + actions: { + musicStarted: function(){ + // called when the play button is clicked + // and the music started playing + }, + musicStopped: function(){ + // called when the play button is clicked + // and the music stopped playing + } + } + }); + ``` + + If no action name is passed to `sendAction` a default name of "action" + is assumed. + + ```javascript + App.NextButtonComponent = Ember.Component.extend({ + click: function(){ + this.sendAction(); + } + }); + ``` + + ```handlebars + {{! application.hbs }} + {{next-button action="playNextSongInAlbum"}} + ``` + + ```javascript + App.ApplicationController = Ember.Controller.extend({ + actions: { + playNextSongInAlbum: function(){ + ... + } + } + }); + ``` + + @method sendAction + @param [action] {String} the action to trigger + @param [context] {*} a context to send with the action + */ + sendAction: function(action) { + var actionName, + contexts = a_slice.call(arguments, 1); + + // Send the default action + if (action === undefined) { + actionName = get(this, 'action'); + Ember.assert("The default action was triggered on the component " + this.toString() + + ", but the action name (" + actionName + ") was not a string.", + isNone(actionName) || typeof actionName === 'string'); + } else { + actionName = get(this, action); + Ember.assert("The " + action + " action was triggered on the component " + + this.toString() + ", but the action name (" + actionName + + ") was not a string.", + isNone(actionName) || typeof actionName === 'string'); + } + + // If no action name for that action could be found, just abort. + if (actionName === undefined) { return; } + + this.triggerAction({ + action: actionName, + actionContext: contexts + }); + } +}); + +})(); + + + +(function() { + +})(); + + + +(function() { +/** +`Ember.ViewTargetActionSupport` is a mixin that can be included in a +view class to add a `triggerAction` method with semantics similar to +the Handlebars `{{action}}` helper. It provides intelligent defaults +for the action's target: the view's controller; and the context that is +sent with the action: the view's context. + +Note: In normal Ember usage, the `{{action}}` helper is usually the best +choice. This mixin is most often useful when you are doing more complex +event handling in custom View subclasses. + +For example: + +```javascript +App.SaveButtonView = Ember.View.extend(Ember.ViewTargetActionSupport, { + action: 'save', + click: function() { + this.triggerAction(); // Sends the `save` action, along with the current context + // to the current controller + } +}); +``` + +The `action` can be provided as properties of an optional object argument +to `triggerAction` as well. + +```javascript +App.SaveButtonView = Ember.View.extend(Ember.ViewTargetActionSupport, { + click: function() { + this.triggerAction({ + action: 'save' + }); // Sends the `save` action, along with the current context + // to the current controller + } +}); +``` + +@class ViewTargetActionSupport +@namespace Ember +@extends Ember.TargetActionSupport +*/ +Ember.ViewTargetActionSupport = Ember.Mixin.create(Ember.TargetActionSupport, { + /** + @property target + */ + target: Ember.computed.alias('controller'), + /** + @property actionContext + */ + actionContext: Ember.computed.alias('context') +}); + +})(); + + + +(function() { + +})(); + + + +(function() { +/** +Ember Views + +@module ember +@submodule ember-views +@requires ember-runtime +@main ember-views +*/ + +})(); + +(function() { +define("metamorph", + [], + function() { + "use strict"; + // ========================================================================== + // Project: metamorph + // Copyright: ©2014 Tilde, Inc. All rights reserved. + // ========================================================================== + + var K = function() {}, + guid = 0, + disableRange = (function(){ + if ('undefined' !== typeof MetamorphENV) { + return MetamorphENV.DISABLE_RANGE_API; + } else if ('undefined' !== ENV) { + return ENV.DISABLE_RANGE_API; + } else { + return false; + } + })(), + + // Feature-detect the W3C range API, the extended check is for IE9 which only partially supports ranges + supportsRange = (!disableRange) && typeof document !== 'undefined' && ('createRange' in document) && (typeof Range !== 'undefined') && Range.prototype.createContextualFragment, + + // Internet Explorer prior to 9 does not allow setting innerHTML if the first element + // is a "zero-scope" element. This problem can be worked around by making + // the first node an invisible text node. We, like Modernizr, use + needsShy = typeof document !== 'undefined' && (function() { + var testEl = document.createElement('div'); + testEl.innerHTML = ""; + testEl.firstChild.innerHTML = ""; + return testEl.firstChild.innerHTML === ''; + })(), + + + // IE 8 (and likely earlier) likes to move whitespace preceeding + // a script tag to appear after it. This means that we can + // accidentally remove whitespace when updating a morph. + movesWhitespace = document && (function() { + var testEl = document.createElement('div'); + testEl.innerHTML = "Test: Value"; + return testEl.childNodes[0].nodeValue === 'Test:' && + testEl.childNodes[2].nodeValue === ' Value'; + })(); + + // Constructor that supports either Metamorph('foo') or new + // Metamorph('foo'); + // + // Takes a string of HTML as the argument. + + var Metamorph = function(html) { + var self; + + if (this instanceof Metamorph) { + self = this; + } else { + self = new K(); + } + + self.innerHTML = html; + var myGuid = 'metamorph-'+(guid++); + self.start = myGuid + '-start'; + self.end = myGuid + '-end'; + + return self; + }; + + K.prototype = Metamorph.prototype; + + var rangeFor, htmlFunc, removeFunc, outerHTMLFunc, appendToFunc, afterFunc, prependFunc, startTagFunc, endTagFunc; + + outerHTMLFunc = function() { + return this.startTag() + this.innerHTML + this.endTag(); + }; + + startTagFunc = function() { + /* + * We replace chevron by its hex code in order to prevent escaping problems. + * Check this thread for more explaination: + * http://stackoverflow.com/questions/8231048/why-use-x3c-instead-of-when-generating-html-from-javascript + */ + return "| hi |
someString
'.htmlSafe()
+ ```
+
+ See [Ember.String.htmlSafe](/api/classes/Ember.String.html#method_htmlSafe).
+
+ @method htmlSafe
+ @for String
+ @return {Handlebars.SafeString} a string that will not be html escaped by Handlebars
+ */
+ String.prototype.htmlSafe = function() {
+ return htmlSafe(this);
+ };
+}
+
+})();
+
+
+
+(function() {
+Ember.Handlebars.resolvePaths = function(options) {
+ var ret = [],
+ contexts = options.contexts,
+ roots = options.roots,
+ data = options.data;
+
+ for (var i=0, l=contexts.length; i
+
+ ```
+
+ `{{with}}` can be our best friend in these cases,
+ instead of writing `user.role.*` over and over, we use `{{#with user.role}}`.
+ Now the context within the `{{#with}} .. {{/with}}` block is `user.role` so you can do the following:
+
+ ```handlebars
+ {{user.role.label}}
+ {{user.role.id}} + +{{user.role.description}}
+{{user.name}}
+ +
+ {{#with user.role}}
+
+ ```
+
+ ### `as` operator
+
+ This operator aliases the scope 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}}
+ {{label}}
+ {{id}} + +{{description}}
+ {{/with}} +
+ There are {{blogPosts.length}} blog posts written by {{user.name}}.
+
+
+ {{#each post in blogPosts}}
+
+ ```
+
+ ### `bind-attr` and the `class` attribute
+
+ `bind-attr` supports a special syntax for handling a number of cases unique
+ to the `class` DOM element attribute. The `class` attribute combines
+ multiple discrete values into a single attribute as a space-delimited
+ list of strings. Each string can be:
+
+ * a string return value of an object's property.
+ * a boolean return value of an object's property
+ * a hard-coded value
+
+ A string return value works identically to other uses of `bind-attr`. The
+ return value of the property will become the value of the attribute. For
+ example, the following view and template:
+
+ ```javascript
+ AView = Ember.View.extend({
+ someProperty: function() {
+ return "aValue";
+ }.property()
+ })
+ ```
+
+ ```handlebars
+
+ 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 "MyApp.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.
+
+ ```handlebars
+ {{view "MyApp.ViewWithATemplateDefined"}}
+ ```
+
+ ### `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
+ @param {String} path
+ @param {Hash} options
+ @return {String} HTML string
+*/
+EmberHandlebars.registerHelper('view', function viewHelper(path, options) {
+ Ember.assert("The view helper only takes a single argument", arguments.length <= 2);
+
+ // If no path is provided, treat path param as options.
+ if (path && path.data && path.data.isRenderData) {
+ options = path;
+ path = "Ember.View";
+ }
+
+ return EmberHandlebars.ViewHelper.helper(this, path, options);
+});
+
+
+})();
+
+
+
+(function() {
+// TODO: Don't require all of this module
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, handlebarsGet = Ember.Handlebars.get, fmt = Ember.String.fmt;
+
+/**
+ `{{collection}}` is a `Ember.Handlebars` helper for adding instances of
+ `Ember.CollectionView` to a template. See [Ember.CollectionView](/api/classes/Ember.CollectionView.html)
+ for additional information on how a `CollectionView` functions.
+
+ `{{collection}}`'s primary use is as a block helper with a `contentBinding`
+ option pointing towards an `Ember.Array`-compatible object. An `Ember.View`
+ instance will be created for each item in its `content` property. Each view
+ will have its own `content` property set to the appropriate item in the
+ collection.
+
+ The provided block will be applied as the template for each item's view.
+
+ Given an empty `` the following template:
+
+ ```handlebars
+ {{#collection contentBinding="App.items"}}
+ Hi {{view.content.name}}
+ {{/collection}}
+ ```
+
+ And the following application code
+
+ ```javascript
+ App = Ember.Application.create()
+ App.items = [
+ Ember.Object.create({name: 'Dave'}),
+ Ember.Object.create({name: 'Mary'}),
+ Ember.Object.create({name: 'Sara'})
+ ]
+ ```
+
+ Will result in the HTML structure below
+
+ ```html
+
+ hi
+
+
+
+ ```
+
+ ### Blockless use in a collection
+
+ If you provide an `itemViewClass` option that has its own `template` you can
+ omit the block.
+
+ The following template:
+
+ ```handlebars
+ {{collection contentBinding="App.items" itemViewClass="App.AnItemView"}}
+ ```
+
+ And application code
+
+ ```javascript
+ App = Ember.Application.create();
+ App.items = [
+ Ember.Object.create({name: 'Dave'}),
+ Ember.Object.create({name: 'Mary'}),
+ Ember.Object.create({name: 'Sara'})
+ ];
+
+ App.AnItemView = Ember.View.extend({
+ template: Ember.Handlebars.compile("Greetings {{view.content.name}}")
+ });
+ ```
+
+ Will result in the HTML structure below
+
+ ```html
+ Hi Dave
+ Hi Mary
+ Hi Sara
+
+
+ ```
+
+ ### 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 App.MyCustomCollectionClass contentBinding="App.items"}}
+ Hi {{view.content.name}}
+ {{/collection}}
+ ```
+
+ ### 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 contentBinding="App.items"
+ itemTagName="p"
+ itemClassNames="greeting"}}
+ Howdy {{view.content.name}}
+ {{/collection}}
+ ```
+
+ Will result in the following HTML structure:
+
+ ```html
+ Greetings Dave
+ Greetings Mary
+ Greetings Sara
+
+
+ ```
+
+ @method collection
+ @for Ember.Handlebars.helpers
+ @param {String} path
+ @param {Hash} options
+ @return {String} HTML string
+ @deprecated Use `{{each}}` helper instead.
+*/
+Ember.Handlebars.registerHelper('collection', function collectionHelper(path, options) {
+ Ember.deprecate("Using the {{collection}} helper without specifying a class has been deprecated as the {{each}} helper now supports the same functionality.", path !== 'collection');
+
+ // If no path is provided, treat path param as options.
+ if (path && path.data && path.data.isRenderData) {
+ options = path;
+ path = undefined;
+ Ember.assert("You cannot pass more than one argument to the collection helper", arguments.length === 1);
+ } else {
+ Ember.assert("You cannot pass more than one argument to the collection helper", arguments.length === 2);
+ }
+
+ var fn = options.fn;
+ var data = options.data;
+ var inverse = options.inverse;
+ var view = options.data.view;
+
+
+ var controller, container;
+ // If passed a path string, convert that into an object.
+ // Otherwise, just default to the standard class.
+ var collectionClass;
+ if (path) {
+ controller = data.keywords.controller;
+ container = controller && controller.container;
+ collectionClass = handlebarsGet(this, path, options) || container.lookupFactory('view:' + path);
+ Ember.assert(fmt("%@ #collection: Could not find collection class %@", [data.view, path]), !!collectionClass);
+ }
+ else {
+ collectionClass = Ember.CollectionView;
+ }
+
+ var hash = options.hash, itemHash = {}, match;
+
+ // Extract item view class if provided else default to the standard class
+ var collectionPrototype = collectionClass.proto(),
+ itemViewClass;
+
+ if (hash.itemView) {
+ controller = data.keywords.controller;
+ Ember.assert('You specified an itemView, but the current context has no ' +
+ 'container to look the itemView up in. This probably means ' +
+ 'that you created a view manually, instead of through the ' +
+ 'container. Instead, use container.lookup("view:viewName"), ' +
+ 'which will properly instantiate your view.',
+ controller && controller.container);
+ container = controller.container;
+ itemViewClass = container.lookupFactory('view:' + hash.itemView);
+ Ember.assert('You specified the itemView ' + hash.itemView + ", but it was " +
+ "not found at " + container.describe("view:" + hash.itemView) +
+ " (and it was not registered in the container)", !!itemViewClass);
+ } else if (hash.itemViewClass) {
+ itemViewClass = handlebarsGet(collectionPrototype, hash.itemViewClass, options);
+ } else {
+ itemViewClass = collectionPrototype.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 (hash.hasOwnProperty(prop)) {
+ match = prop.match(/^item(.)(.*)$/);
+
+ if (match && prop !== 'itemController') {
+ // Convert itemShouldFoo -> shouldFoo
+ itemHash[match[1].toLowerCase() + match[2]] = hash[prop];
+ // Delete from hash as this will end up getting passed to the
+ // {{view}} helper method.
+ delete hash[prop];
+ }
+ }
+ }
+
+ if (fn) {
+ itemHash.template = fn;
+ delete options.fn;
+ }
+
+ var emptyViewClass;
+ if (inverse && inverse !== Ember.Handlebars.VM.noop) {
+ emptyViewClass = get(collectionPrototype, 'emptyViewClass');
+ emptyViewClass = emptyViewClass.extend({
+ template: inverse,
+ tagName: itemHash.tagName
+ });
+ } else if (hash.emptyViewClass) {
+ emptyViewClass = handlebarsGet(this, hash.emptyViewClass, options);
+ }
+ if (emptyViewClass) { hash.emptyView = emptyViewClass; }
+
+ if (!hash.keyword) {
+ itemHash._context = Ember.computed.alias('content');
+ }
+
+ var viewOptions = Ember.Handlebars.ViewHelper.propertiesFromHTMLOptions({ data: data, hash: itemHash }, this);
+ hash.itemViewClass = itemViewClass.extend(viewOptions);
+
+ return Ember.Handlebars.helpers.view.call(this, collectionClass, options);
+});
+
+
+})();
+
+
+
+(function() {
+/*globals Handlebars */
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var handlebarsGet = Ember.Handlebars.get;
+
+/**
+ `unbound` allows you to output a property without binding. *Important:* The
+ output will not be updated if the property changes. Use with caution.
+
+ ```handlebars
+ Howdy Dave
+Howdy Mary
+Howdy Sara
+{{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
+*/
+Ember.Handlebars.registerHelper('unbound', function unboundHelper(property, fn) {
+ var options = arguments[arguments.length - 1], helper, context, out;
+
+ if (arguments.length > 2) {
+ // Unbound helper call.
+ options.data.isUnbound = true;
+ helper = Ember.Handlebars.helpers[arguments[0]] || Ember.Handlebars.helpers.helperMissing;
+ out = helper.apply(this, Array.prototype.slice.call(arguments, 1));
+ delete options.data.isUnbound;
+ return out;
+ }
+
+ context = (fn.contexts && fn.contexts.length) ? fn.contexts[0] : this;
+ return handlebarsGet(context, property, fn);
+});
+
+})();
+
+
+
+(function() {
+/*jshint debug:true*/
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get;
+var handlebarsGet = Ember.Handlebars.get, normalizePath = Ember.Handlebars.normalizePath;
+var a_slice = [].slice;
+
+/**
+ `log` allows you to output the value of variables in the current rendering
+ context. `log` also accepts primitive types such as strings or numbers.
+
+ ```handlebars
+ {{log "myVariable:" myVariable }}
+ ```
+
+ @method log
+ @for Ember.Handlebars.helpers
+ @param {String} property
+*/
+Ember.Handlebars.registerHelper('log', function logHelper() {
+ var params = a_slice.call(arguments, 0, -1),
+ options = arguments[arguments.length - 1],
+ logger = Ember.Logger.log,
+ values = [],
+ allowPrimitives = false;
+
+
+ allowPrimitives = true;
+
+
+ for (var i = 0; i < params.length; i++) {
+ var type = options.types[i];
+
+ if (type === 'ID' || !allowPrimitives) {
+ var context = (options.contexts && options.contexts[i]) || this,
+ normalized = normalizePath(context, params[i], options.data);
+
+ if (normalized.path === 'this') {
+ values.push(normalized.root);
+ } else {
+ values.push(handlebarsGet(normalized.root, normalized.path, options));
+ }
+ } else {
+ values.push(params[i]);
+ }
+ }
+
+ logger.apply(logger, values);
+});
+
+/**
+ Execute the `debugger` statement in the current context.
+
+ ```handlebars
+ {{debugger}}
+ ```
+
+ Before invoking the `debugger` statement, there
+ are a few helpful variables defined in the
+ body of this helper that you can inspect while
+ debugging that describe how and where this
+ helper was invoked:
+
+ - templateContext: this is most likely a controller
+ from which this template looks up / displays properties
+ - typeOfTemplateContext: a string description of
+ what the templateContext is
+
+ For example, if you're wondering why a value `{{foo}}`
+ isn't rendering as expected within a template, you
+ could place a `{{debugger}}` statement, and when
+ the `debugger;` breakpoint is hit, you can inspect
+ `templateContext`, determine if it's the object you
+ expect, and/or evaluate expressions in the console
+ to perform property lookups on the `templateContext`:
+
+ ```
+ > templateContext.get('foo') // -> "Sorry, nobody is available for this task.
+ {{/each}} + ``` + ### Specifying a View class for items + If you provide an `itemViewClass` option that references a view class + with its own `template` you can omit the block. + + The following template: + + ```handlebars + {{#view App.MyView }} + {{each view.items itemViewClass="App.AnItemView"}} + {{/view}} + ``` + + And application code + + ```javascript + App = Ember.Application.create({ + MyView: Ember.View.extend({ + items: [ + Ember.Object.create({name: 'Dave'}), + Ember.Object.create({name: 'Mary'}), + Ember.Object.create({name: 'Sara'}) + ] + }) + }); + + App.AnItemView = Ember.View.extend({ + template: Ember.Handlebars.compile("Greetings {{name}}") + }); + ``` + + Will result in the HTML structure below + + ```html +
+
+ ```
+
+ If an `itemViewClass` is defined on the helper, and therefore the helper is not
+ being used as a block, an `emptyViewClass` can also be provided optionally.
+ The `emptyViewClass` will match the behavior of the `{{else}}` condition
+ described above. That is, the `emptyViewClass` will render if the collection
+ is empty.
+
+ ### Representing each item with a Controller.
+ By default the controller lookup within an `{{#each}}` block will be
+ the controller of the template where the `{{#each}}` was used. If each
+ item needs to be presented by a custom controller you can provide a
+ `itemController` option which references a controller by lookup name.
+ Each item in the loop will be wrapped in an instance of this controller
+ and the item itself will be set to the `content` property of that controller.
+
+ This is useful in cases where properties of model objects need transformation
+ or synthesis for display:
+
+ ```javascript
+ App.DeveloperController = Ember.ObjectController.extend({
+ isAvailableForHire: function() {
+ return !this.get('content.isEmployed') && this.get('content.isSeekingWork');
+ }.property('isEmployed', 'isSeekingWork')
+ })
+ ```
+
+ ```handlebars
+ {{#each person in developers itemController="developer"}}
+ {{person.name}} {{#if person.isAvailableForHire}}Hire me!{{/if}}
+ {{/each}}
+ ```
+
+ Each itemController will receive a reference to the current controller as
+ a `parentController` property.
+
+ ### (Experimental) Grouped Each
+
+ When used in conjunction with the experimental [group helper](https://github.com/emberjs/group-helper),
+ you can inform Handlebars to re-render an entire group of items instead of
+ re-rendering them one at a time (in the event that they are changed en masse
+ or an item is added/removed).
+
+ ```handlebars
+ {{#group}}
+ {{#each people}}
+ {{firstName}} {{lastName}}
+ {{/each}}
+ {{/group}}
+ ```
+
+ This can be faster than the normal way that Handlebars re-renders items
+ in some cases.
+
+ If for some reason you have a group with more than one `#each`, you can make
+ one of the collections be updated in normal (non-grouped) fashion by setting
+ the option `groupedRows=true` (counter-intuitive, I know).
+
+ For example,
+
+ ```handlebars
+ {{dealershipName}}
+
+ {{#group}}
+ {{#each dealers}}
+ {{firstName}} {{lastName}}
+ {{/each}}
+
+ {{#each car in cars groupedRows=true}}
+ {{car.make}} {{car.model}} {{car.color}}
+ {{/each}}
+ {{/group}}
+ ```
+ Any change to `dealershipName` or the `dealers` collection will cause the
+ entire group to be re-rendered. However, changes to the `cars` collection
+ will be re-rendered individually (as normal).
+
+ Note that `group` behavior is also disabled by specifying an `itemViewClass`.
+
+ @method each
+ @for Ember.Handlebars.helpers
+ @param [name] {String} name for item (used with `in`)
+ @param [path] {String} path
+ @param [options] {Object} Handlebars key/value pairs of options
+ @param [options.itemViewClass] {String} a path to a view class used for each item
+ @param [options.itemController] {String} name of a controller to be created for each item
+ @param [options.groupedRows] {boolean} enable normal item-by-item rendering when inside a `#group` helper
+*/
+Ember.Handlebars.registerHelper('each', function eachHelper(path, options) {
+ if (arguments.length === 4) {
+ Ember.assert("If you pass more than one argument to the each helper, it must be in the form #each foo in bar", arguments[1] === "in");
+
+ var keywordName = arguments[0];
+
+ options = arguments[3];
+ path = arguments[2];
+ if (path === '') { path = "this"; }
+
+ options.hash.keyword = keywordName;
+ }
+
+ if (arguments.length === 1) {
+ options = path;
+ path = 'this';
+ }
+
+ options.hash.dataSourceBinding = path;
+ // Set up emptyView as a metamorph with no tag
+ //options.hash.emptyViewClass = Ember._MetamorphView;
+
+ if (options.data.insideGroup && !options.hash.groupedRows && !options.hash.itemViewClass) {
+ new Ember.Handlebars.GroupedEach(this, path, options).render();
+ } else {
+ return Ember.Handlebars.helpers.collection.call(this, 'Ember.Handlebars.EachView', options);
+ }
+});
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+/**
+ `template` allows you to render a template from inside another template.
+ This allows you to re-use the same template in multiple places. For example:
+
+ ```html
+
+ ```
+
+ ```html
+
+ ```
+
+ ```handlebars
+ {{#if isUser}}
+ {{template "user_info"}}
+ {{else}}
+ {{template "unlogged_user_info"}}
+ {{/if}}
+ ```
+
+ This helper looks for templates in the global `Ember.TEMPLATES` hash. If you
+ add `
+ ```
+
+ Take note that `"welcome"` is a string and not an object
+ reference.
+
+ @method loc
+ @for Ember.Handlebars.helpers
+ @param {String} str The string to format
+*/
+
+Ember.Handlebars.registerHelper('loc', function locHelper(str) {
+ return Ember.String.loc(str);
+});
+
+})();
+
+
+
+(function() {
+
+})();
+
+
+
+(function() {
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var set = Ember.set, get = Ember.get;
+
+/**
+ The internal class used to create text inputs when the `{{input}}`
+ helper is used with `type` of `checkbox`.
+
+ See [handlebars.helpers.input](/api/classes/Ember.Handlebars.helpers.html#method_input) for usage details.
+
+ ## Direct manipulation of `checked`
+
+ The `checked` attribute of an `Ember.Checkbox` object should always be set
+ through the Ember object or by interacting with its rendered element
+ representation via the mouse, keyboard, or touch. Updating the value of the
+ checkbox via jQuery will result in the checked value of the object and its
+ element losing synchronization.
+
+ ## Layout and LayoutName properties
+
+ Because HTML `input` elements are self closing `layout` and `layoutName`
+ properties will not be applied. See [Ember.View](/api/classes/Ember.View.html)'s
+ layout section for more information.
+
+ @class Checkbox
+ @namespace Ember
+ @extends Ember.View
+*/
+Ember.Checkbox = Ember.View.extend({
+ classNames: ['ember-checkbox'],
+
+ tagName: 'input',
+
+ attributeBindings: ['type', 'checked', 'indeterminate', 'disabled', 'tabindex', 'name',
+ 'autofocus', 'form'],
+
+ type: "checkbox",
+ checked: false,
+ disabled: false,
+ indeterminate: false,
+
+ init: function() {
+ this._super();
+ this.on("change", this, this._updateElementValue);
+ },
+
+ didInsertElement: function() {
+ this._super();
+ this.get('element').indeterminate = !!this.get('indeterminate');
+ },
+
+ _updateElementValue: function() {
+ set(this, 'checked', this.$().prop('checked'));
+ }
+});
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, set = Ember.set;
+
+/**
+ Shared mixin used by `Ember.TextField` and `Ember.TextArea`.
+
+ @class TextSupport
+ @namespace Ember
+ @uses Ember.TargetActionSupport
+ @extends Ember.Mixin
+ @private
+*/
+Ember.TextSupport = Ember.Mixin.create(Ember.TargetActionSupport, {
+ value: "",
+
+ attributeBindings: ['placeholder', 'disabled', 'maxlength', 'tabindex', 'readonly',
+ 'autofocus', 'form', 'selectionDirection', 'spellcheck', 'required'],
+ placeholder: null,
+ disabled: false,
+ maxlength: null,
+
+ init: function() {
+ this._super();
+ this.on("focusOut", this, this._elementValueDidChange);
+ this.on("change", this, this._elementValueDidChange);
+ this.on("paste", this, this._elementValueDidChange);
+ this.on("cut", this, this._elementValueDidChange);
+ this.on("input", this, this._elementValueDidChange);
+ this.on("keyUp", this, this.interpretKeyEvents);
+ },
+
+ /**
+ The action to be sent when the user presses the return key.
+
+ This is similar to the `{{action}}` helper, but is fired when
+ the user presses the return key when editing a text field, and sends
+ the value of the field as the context.
+
+ @property action
+ @type String
+ @default null
+ */
+ action: null,
+
+ /**
+ The event that should send the action.
+
+ Options are:
+
+ * `enter`: the user pressed enter
+ * `keyPress`: the user pressed a key
+
+ @property onEvent
+ @type String
+ @default enter
+ */
+ onEvent: 'enter',
+
+ /**
+ Whether they `keyUp` event that triggers an `action` to be sent continues
+ propagating to other views.
+
+ By default, when the user presses the return key on their keyboard and
+ the text field has an `action` set, the action will be sent to the view's
+ controller and the key event will stop propagating.
+
+ If you would like parent views to receive the `keyUp` event even after an
+ action has been dispatched, set `bubbles` to true.
+
+ @property bubbles
+ @type Boolean
+ @default false
+ */
+ bubbles: false,
+
+ interpretKeyEvents: function(event) {
+ var map = Ember.TextSupport.KEY_EVENTS;
+ var method = map[event.keyCode];
+
+ this._elementValueDidChange();
+ if (method) { return this[method](event); }
+ },
+
+ _elementValueDidChange: function() {
+ set(this, 'value', this.$().val());
+ },
+
+ /**
+ The action to be sent when the user inserts a new line.
+
+ Called by the `Ember.TextSupport` mixin on keyUp if keycode matches 13.
+ Uses sendAction to send the `enter` action to the controller.
+
+ @method insertNewline
+ @param {Event} event
+ */
+ insertNewline: function(event) {
+ sendAction('enter', this, event);
+ sendAction('insert-newline', this, event);
+ },
+
+ /**
+ Called when the user hits escape.
+
+ Called by the `Ember.TextSupport` mixin on keyUp if keycode matches 27.
+ Uses sendAction to send the `escape-press` action to the controller.
+
+ @method cancel
+ @param {Event} event
+ */
+ cancel: function(event) {
+ sendAction('escape-press', this, event);
+ },
+
+ /**
+ Called when the text area is focused.
+
+ @method focusIn
+ @param {Event} event
+ */
+ focusIn: function(event) {
+ sendAction('focus-in', this, event);
+ },
+
+ /**
+ Called when the text area is blurred.
+
+ @method focusOut
+ @param {Event} event
+ */
+ focusOut: function(event) {
+ sendAction('focus-out', this, event);
+ },
+
+ /**
+ The action to be sent when the user presses a key. Enabled by setting
+ the `onEvent` property to `keyPress`.
+
+ Uses sendAction to send the `keyPress` action to the controller.
+
+ @method keyPress
+ @param {Event} event
+ */
+ keyPress: function(event) {
+ sendAction('key-press', this, event);
+ }
+
+});
+
+Ember.TextSupport.KEY_EVENTS = {
+ 13: 'insertNewline',
+ 27: 'cancel'
+};
+
+// In principle, this shouldn't be necessary, but the legacy
+// sectionAction semantics for TextField are different from
+// the component semantics so this method normalizes them.
+function sendAction(eventName, view, event) {
+ var action = get(view, eventName),
+ on = get(view, 'onEvent'),
+ value = get(view, 'value');
+
+ // back-compat support for keyPress as an event name even though
+ // it's also a method name that consumes the event (and therefore
+ // incompatible with sendAction semantics).
+ if (on === eventName || (on === 'keyPress' && eventName === 'key-press')) {
+ view.sendAction('action', value);
+ }
+
+ view.sendAction(eventName, value);
+
+ if (action || on === eventName) {
+ if(!get(view, 'bubbles')) {
+ event.stopPropagation();
+ }
+ }
+}
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, set = Ember.set;
+
+/**
+
+ The internal class used to create text inputs when the `{{input}}`
+ helper is used with `type` of `text`.
+
+ See [Handlebars.helpers.input](/api/classes/Ember.Handlebars.helpers.html#method_input) for usage details.
+
+ ## Layout and LayoutName properties
+
+ Because HTML `input` elements are self closing `layout` and `layoutName`
+ properties will not be applied. See [Ember.View](/api/classes/Ember.View.html)'s
+ layout section for more information.
+
+ @class TextField
+ @namespace Ember
+ @extends Ember.Component
+ @uses Ember.TextSupport
+*/
+Ember.TextField = Ember.Component.extend(Ember.TextSupport, {
+
+ classNames: ['ember-text-field'],
+ tagName: "input",
+ attributeBindings: ['type', 'value', 'size', 'pattern', 'name', 'min', 'max',
+ 'accept', 'autocomplete', 'autosave', 'formaction',
+ 'formenctype', 'formmethod', 'formnovalidate', 'formtarget',
+ 'height', 'inputmode', 'list', 'multiple', 'pattern', 'step',
+ 'width'],
+
+ /**
+ The `value` attribute of the input element. As the user inputs text, this
+ property is updated live.
+
+ @property value
+ @type String
+ @default ""
+ */
+ value: "",
+
+ /**
+ The `type` attribute of the input element.
+
+ @property type
+ @type String
+ @default "text"
+ */
+ type: "text",
+
+ /**
+ The `size` of the text field in characters.
+
+ @property size
+ @type String
+ @default null
+ */
+ size: null,
+
+ /**
+ The `pattern` attribute of input element.
+
+ @property pattern
+ @type String
+ @default null
+ */
+ pattern: null,
+
+ /**
+ The `min` attribute of input element used with `type="number"` or `type="range"`.
+
+ @property min
+ @type String
+ @default null
+ */
+ min: null,
+
+ /**
+ The `max` attribute of input element used with `type="number"` or `type="range"`.
+
+ @property max
+ @type String
+ @default null
+ */
+ max: null
+});
+
+})();
+
+
+
+(function() {
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var get = Ember.get, set = Ember.set;
+
+/**
+ The internal class used to create textarea element when the `{{textarea}}`
+ helper is used.
+
+ See [handlebars.helpers.textarea](/api/classes/Ember.Handlebars.helpers.html#method_textarea) for usage details.
+
+ ## Layout and LayoutName properties
+
+ Because HTML `textarea` elements do not contain inner HTML the `layout` and
+ `layoutName` properties will not be applied. See [Ember.View](/api/classes/Ember.View.html)'s
+ layout section for more information.
+
+ @class TextArea
+ @namespace Ember
+ @extends Ember.Component
+ @uses Ember.TextSupport
+*/
+Ember.TextArea = Ember.Component.extend(Ember.TextSupport, {
+ classNames: ['ember-text-area'],
+
+ tagName: "textarea",
+ attributeBindings: ['rows', 'cols', 'name', 'selectionEnd', 'selectionStart', 'wrap'],
+ rows: null,
+ cols: null,
+
+ _updateElementValue: Ember.observer('value', function() {
+ // We do this check so cursor position doesn't get affected in IE
+ var value = get(this, 'value'),
+ $el = this.$();
+ if ($el && value !== $el.val()) {
+ $el.val(value);
+ }
+ }),
+
+ init: function() {
+ this._super();
+ this.on("didInsertElement", this, this._updateElementValue);
+ }
+
+});
+
+})();
+
+
+
+(function() {
+/*jshint eqeqeq:false */
+
+/**
+@module ember
+@submodule ember-handlebars
+*/
+
+var set = Ember.set,
+ get = Ember.get,
+ indexOf = Ember.EnumerableUtils.indexOf,
+ indexesOf = Ember.EnumerableUtils.indexesOf,
+ forEach = Ember.EnumerableUtils.forEach,
+ replace = Ember.EnumerableUtils.replace,
+ isArray = Ember.isArray,
+ precompileTemplate = Ember.Handlebars.compile;
+
+Ember.SelectOption = Ember.View.extend({
+ tagName: 'option',
+ attributeBindings: ['value', 'selected'],
+
+ defaultTemplate: function(context, options) {
+ options = { data: options.data, hash: {} };
+ Ember.Handlebars.helpers.bind.call(context, "view.label", options);
+ },
+
+ init: function() {
+ this.labelPathDidChange();
+ this.valuePathDidChange();
+
+ this._super();
+ },
+
+ selected: Ember.computed(function() {
+ var content = get(this, 'content'),
+ selection = get(this, 'parentView.selection');
+ if (get(this, 'parentView.multiple')) {
+ return selection && indexOf(selection, content.valueOf()) > -1;
+ } else {
+ // Primitives get passed through bindings as objects... since
+ // `new Number(4) !== 4`, we use `==` below
+ return content == selection;
+ }
+ }).property('content', 'parentView.selection'),
+
+ labelPathDidChange: Ember.observer('parentView.optionLabelPath', function() {
+ var labelPath = get(this, 'parentView.optionLabelPath');
+
+ if (!labelPath) { return; }
+
+ Ember.defineProperty(this, 'label', Ember.computed(function() {
+ return get(this, labelPath);
+ }).property(labelPath));
+ }),
+
+ valuePathDidChange: Ember.observer('parentView.optionValuePath', function() {
+ var valuePath = get(this, 'parentView.optionValuePath');
+
+ if (!valuePath) { return; }
+
+ Ember.defineProperty(this, 'value', Ember.computed(function() {
+ return get(this, valuePath);
+ }).property(valuePath));
+ })
+});
+
+Ember.SelectOptgroup = Ember.CollectionView.extend({
+ tagName: 'optgroup',
+ attributeBindings: ['label'],
+
+ selectionBinding: 'parentView.selection',
+ multipleBinding: 'parentView.multiple',
+ optionLabelPathBinding: 'parentView.optionLabelPath',
+ optionValuePathBinding: 'parentView.optionValuePath',
+
+ itemViewClassBinding: 'parentView.optionView'
+});
+
+/**
+ The `Ember.Select` view class renders a
+ [select](https://developer.mozilla.org/en/HTML/Element/select) HTML element,
+ allowing the user to choose from a list of options.
+
+ The text and `value` property of each `Greetings Dave
+ Greetings Mary
+ Greetings Sara
+