window.App = Ember.Application.create();{{person.title}}
+{{person.signature}}
+ ``` + + You can also use `yield` inside a template to + include the **contents** of the custom tag: + + ```html + {{#app-profile person=currentUser}} +Admin mode
+ {{/app-profile}} + ``` + + ```html + +{{person.title}}
+ {{yield}} + ``` + + 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({ + hello: function(name) { + console.log("Hello", name); + } + }); + ``` + + And then use it in the component's template: + + ```html + + +{{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, { + init: function() { + this._super(); + set(this, 'context', this); + set(this, 'controller', this); + }, + + // 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: get(this, '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'), + + /** + Sends an action to component's controller. A component inherits its + controller from the context in which it is used. + + By default, calling `sendAction()` will send an action with the name + of the component's `action` property. + + For example, if the component had a property `action` with the value + `"addItem"`, calling `sendAction()` would send the `addItem` action + to the component's controller. + + If you provide the `action` argument to `sendAction()`, that key will + be used to look up the action name. + + For example, if the component had a property `playing` with the value + `didStartPlaying`, calling `sendAction('playing')` would send the + `didStartPlaying` action to the component's controller. + + Whether or not you are using the default action or a named action, if + the action name is not defined on the component, calling `sendAction()` + does not have any effect. + + For example, if you call `sendAction()` on a component that does not have + an `action` property defined, no action will be sent to the controller, + nor will an exception be raised. + + You can send a context object with the action by supplying the `context` + argument. The context will be supplied as the first argument in the + target's action method. Example: + + ```javascript + App.MyTreeComponent = Ember.Component.extend({ + click: function() { + this.sendAction('didClickTreeNode', this.get('node')); + } + }); - This method will replay that mutation against the views that compose the - `Ember.CollectionView`, ensuring that the view reflects the model. + App.CategoriesController = Ember.Controller.extend({ + didClickCategory: function(category) { + //Do something with the node/category that was clicked + } + }); + ``` - This array observer is added in `contentDidChange`. + ```handlebars + {{! categories.hbs}} + {{my-tree didClickTreeNode='didClickCategory'}} + ``` - @method arrayDidChange - @param {Array} addedObjects the objects that were added to the content - @param {Array} removedObjects the objects that were removed from the content - @param {Number} changeIndex the index at which the changes occurred + @method sendAction + @param [action] {String} the action to trigger + @param [context] {*} a context to send with the action */ - arrayDidChange: function(content, start, removed, added) { - var itemViewClass = get(this, 'itemViewClass'), - addedViews = [], view, item, idx, len; + sendAction: function(action, context) { + var actionName; - if ('string' === typeof itemViewClass) { - itemViewClass = get(itemViewClass); + // 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'); } - Ember.assert(fmt("itemViewClass must be a subclass of Ember.View, not %@", [itemViewClass]), Ember.View.detect(itemViewClass)); + // If no action name for that action could be found, just abort. + if (actionName === undefined) { return; } - len = content ? get(content, 'length') : 0; - if (len) { - for (idx = start; idx < start+added; idx++) { - item = content.objectAt(idx); + this.triggerAction({ + action: actionName, + actionContext: context + }); + } +}); - view = this.createChildView(itemViewClass, { - content: item, - contentIndex: idx - }); +})(); - addedViews.push(view); - } - } else { - var emptyView = get(this, 'emptyView'); - if (!emptyView) { return; } - var isClass = Ember.CoreView.detect(emptyView); - emptyView = this.createChildView(emptyView); - addedViews.push(emptyView); - set(this, 'emptyView', emptyView); +(function() { - if (isClass) { this._createdEmptyView = emptyView; } - } - this.replace(start, 0, addedViews); - }, +})(); - createChildView: function(view, attrs) { - view = this._super(view, attrs); - var itemTagName = get(view, 'tagName'); - var tagName = (itemTagName === null || itemTagName === undefined) ? Ember.CollectionView.CONTAINER_MAP[get(this, 'tagName')] : itemTagName; - set(view, 'tagName', tagName); +(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. - return view; +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 } }); +``` -/** - 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. +The `action` can be provided as properties of an optional object argument +to `triggerAction` as well. - @property CONTAINER_MAP - @type Hash - @static - @final +```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.CollectionView.CONTAINER_MAP = { - ul: 'li', - ol: 'li', - table: 'tr', - thead: 'tr', - tbody: 'tr', - tfoot: 'tr', - tr: 'td', - select: 'option' -}; +Ember.ViewTargetActionSupport = Ember.Mixin.create(Ember.TargetActionSupport, { + /** + @property target + */ + target: Ember.computed.alias('controller'), + /** + @property actionContext + */ + actionContext: Ember.computed.alias('context') +}); })(); @@ -17520,7 +23122,6 @@ Ember.CollectionView.CONTAINER_MAP = { (function() { -/*globals jQuery*/ /** Ember Views @@ -17542,17 +23143,18 @@ define("metamorph", // Copyright: ©2011 My Company Inc. All rights reserved. // ========================================================================== - var K = function(){}, + var K = function() {}, guid = 0, document = this.document, + disableRange = ('undefined' === typeof ENV ? {} : ENV).DISABLE_RANGE_API, // Feature-detect the W3C range API, the extended check is for IE9 which only partially supports ranges - supportsRange = document && ('createRange' in document) && (typeof Range !== 'undefined') && Range.prototype.createContextualFragment, + supportsRange = (!disableRange) && document && ('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 = document && (function(){ + needsShy = document && (function() { var testEl = document.createElement('div'); testEl.innerHTML = ""; testEl.firstChild.innerHTML = ""; @@ -18008,11 +23610,12 @@ var objectCreate = Object.create || function(parent) { }; var Handlebars = this.Handlebars || (Ember.imports && Ember.imports.Handlebars); -if(!Handlebars && typeof require === 'function') { +if (!Handlebars && typeof require === 'function') { Handlebars = require('handlebars'); } -Ember.assert("Ember Handlebars requires Handlebars 1.0.0-rc.3 or greater. Include a SCRIPT tag in the HTML HEAD linking to the Handlebars file before you link to Ember.", Handlebars && Handlebars.COMPILER_REVISION === 2); +Ember.assert("Ember Handlebars requires Handlebars version 1.0.0. 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.0, 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 @@ -18030,6 +23633,87 @@ Ember.assert("Ember Handlebars requires Handlebars 1.0.0-rc.3 or greater. Includ */ Ember.Handlebars = objectCreate(Handlebars); +function makeBindings(options) { + var hash = options.hash, + hashType = options.hashTypes; + + for (var prop in hash) { + if (hashType[prop] === 'ID') { + hash[prop + 'Binding'] = hash[prop]; + hashType[prop + 'Binding'] = 'STRING'; + delete hash[prop]; + delete hashType[prop]; + } + } +} + +/** + 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, function(options) { + Ember.assert("You can only pass attributes (such as name=value) not bare values to a helper for a View", arguments.length < 2); + makeBindings(options); + return Ember.Handlebars.helpers.view.call(this, value, options); + }); + } else { + Ember.Handlebars.registerBoundHelper.apply(null, arguments); + } +}; + /** @class helpers @namespace Ember.Handlebars @@ -18109,12 +23793,12 @@ Ember.Handlebars.Compiler.prototype.mustache = function(mustache) { } else if (mustache.params.length || mustache.hash) { // no changes required } else { - var id = new Handlebars.AST.IdNode(['_triageMustache']); + 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) { + if (!mustache.escaped) { mustache.hash = mustache.hash || new Handlebars.AST.HashNode([]); mustache.hash.pairs.push(["unescaped", new Handlebars.AST.StringNode("true")]); } @@ -18172,7 +23856,10 @@ if (Handlebars.compile) { var environment = new Ember.Handlebars.Compiler().compile(ast, options); var templateSpec = new Ember.Handlebars.JavaScriptCompiler().compile(environment, options, undefined, true); - return Ember.Handlebars.template(templateSpec); + var template = Ember.Handlebars.template(templateSpec); + template.isMethod = false; //Make sure we don't wrap templates with ._super + + return template; }; } @@ -18312,7 +23999,7 @@ Ember.Handlebars.registerHelper('helperMissing', function(path, options) { var error, view = ""; error = "%@ Handlebars error: Could not find property '%@' on object %@."; - if (options.data){ + if (options.data) { view = options.data.view; } throw new Ember.Error(Ember.String.fmt(error, [view, path, this])); @@ -18349,7 +24036,7 @@ Ember.Handlebars.registerHelper('helperMissing', function(path, options) { Ember.Handlebars.registerBoundHelper('repeat', function(value, options) { var count = options.hash.count; var a = []; - while(a.length < count){ + while(a.length < count) { a.push(value); } return a.join(''); @@ -18393,20 +24080,20 @@ Ember.Handlebars.registerHelper('helperMissing', function(path, options) { ```javascript Ember.Handlebars.registerBoundHelper('concatenate', function() { - var values = arguments[arguments.length - 1]; + var values = Array.prototype.slice.call(arguments, 0, -1); return values.join('||'); }); ``` - Which allows for template syntax such as {{concatenate prop1 prop2}} or - {{concatenate prop1 prop2 prop3}}. If any of the properties change, + Which allows for template syntax such as `{{concatenate prop1 prop2}}` or + `{{concatenate prop1 prop2 prop3}}`. If any of the properties change, the helpr will re-render. Note that dependency keys cannot be using in conjunction with multi-property helpers, since it is ambiguous which property the dependent keys would belong to. ## Use with unbound helper - The {{unbound}} helper can be used with bound helper invocations + The `{{unbound}}` helper can be used with bound helper invocations to render them in their unbound form, e.g. ```handlebars @@ -18416,6 +24103,10 @@ Ember.Handlebars.registerHelper('helperMissing', function(path, options) { In this example, if the name property changes, the helper will not re-render. + ## Use with blocks not supported + + Bound helpers do not support use with Handlebars blocks or + the addition of child views of any kind. @method registerBoundHelper @for Ember.Handlebars @@ -18431,135 +24122,120 @@ Ember.Handlebars.registerBoundHelper = function(name, fn) { numProperties = properties.length, options = arguments[arguments.length - 1], normalizedProperties = [], + types = options.types, data = options.data, hash = options.hash, view = data.view, currentContext = (options.contexts && options.contexts[0]) || this, - normalized, - pathRoot, path, - loc, hashOption; + prefixPathForDependentKeys = '', + loc, len, hashOption, + boundOption, property, + normalizedValue = Ember._SimpleHandlebarsView.prototype.normalizedValue; + + Ember.assert("registerBoundHelper-generated helpers do not support use with Handlebars blocks.", !options.fn); // Detect bound options (e.g. countBinding="otherCount") - hash.boundOptions = {}; + var boundOptions = hash.boundOptions = {}; for (hashOption in hash) { - if (!hash.hasOwnProperty(hashOption)) { continue; } - - if (Ember.IS_BINDING.test(hashOption) && typeof hash[hashOption] === 'string') { + if (Ember.IS_BINDING.test(hashOption)) { // Lop off 'Binding' suffix. - hash.boundOptions[hashOption.slice(0, -7)] = hash[hashOption]; + boundOptions[hashOption.slice(0, -7)] = hash[hashOption]; } } // Expose property names on data.properties object. + var watchedProperties = []; data.properties = []; for (loc = 0; loc < numProperties; ++loc) { data.properties.push(properties[loc]); - normalizedProperties.push(normalizePath(currentContext, properties[loc], data)); + if (types[loc] === 'ID') { + var normalizedProp = normalizePath(currentContext, properties[loc], data); + normalizedProperties.push(normalizedProp); + watchedProperties.push(normalizedProp); + } else { + normalizedProperties.push(null); + } } + // Handle case when helper invocation is preceded by `unbound`, e.g. + // {{unbound myHelper foo}} if (data.isUnbound) { return evaluateUnboundHelper(this, fn, normalizedProperties, options); } - if (dependentKeys.length === 0) { - return evaluateMultiPropertyBoundHelper(currentContext, fn, normalizedProperties, options); - } - - Ember.assert("Dependent keys can only be used with single-property helpers.", properties.length === 1); + var bindView = new Ember._SimpleHandlebarsView(null, null, !options.hash.unescaped, options.data); - normalized = normalizedProperties[0]; - - pathRoot = normalized.root; - path = normalized.path; + // Override SimpleHandlebarsView's method for generating the view's content. + bindView.normalizedValue = function() { + var args = [], boundOption; + + // Copy over bound hash options. + for (boundOption in boundOptions) { + if (!boundOptions.hasOwnProperty(boundOption)) { continue; } + property = normalizePath(currentContext, boundOptions[boundOption], data); + bindView.path = property.path; + bindView.pathRoot = property.root; + hash[boundOption] = normalizedValue.call(bindView); + } - var bindView = new Ember._SimpleHandlebarsView( - path, pathRoot, !options.hash.unescaped, options.data - ); + for (loc = 0; loc < numProperties; ++loc) { + property = normalizedProperties[loc]; + if (property) { + bindView.path = property.path; + bindView.pathRoot = property.root; + args.push(normalizedValue.call(bindView)); + } else { + args.push(properties[loc]); + } + } + args.push(options); - bindView.normalizedValue = function() { - var value = Ember._SimpleHandlebarsView.prototype.normalizedValue.call(bindView); - return fn.call(view, value, options); + // Run the supplied helper function. + return fn.apply(currentContext, args); }; view.appendChild(bindView); - view.registerObserver(pathRoot, path, bindView, bindView.rerender); - - for (var i=0, l=dependentKeys.length; isomeString
'.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);
@@ -18698,13 +24389,18 @@ var DOMManager = {
var buffer = view.renderToBuffer();
view.invokeRecursively(function(view) {
- view.propertyDidChange('element');
+ view.propertyWillChange('element');
});
-
view.triggerRecursively('willInsertElement');
+
morph.replaceWith(buffer.string());
view.transitionTo('inDOM');
+
+ view.invokeRecursively(function(view) {
+ view.propertyDidChange('element');
+ });
view.triggerRecursively('didInsertElement');
+
notifyMutationListeners();
});
},
@@ -18721,14 +24417,13 @@ var DOMManager = {
/**
@class _Metamorph
@namespace Ember
- @extends Ember.Mixin
@private
*/
Ember._Metamorph = Ember.Mixin.create({
isVirtual: true,
tagName: '',
- instrumentName: 'render.metamorph',
+ instrumentName: 'metamorph',
init: function() {
this._super();
@@ -18767,7 +24462,7 @@ Ember._MetamorphView = Ember.View.extend(Ember._Metamorph);
/**
@class _SimpleMetamorphView
@namespace Ember
- @extends Ember.View
+ @extends Ember.CoreView
@uses Ember._Metamorph
@private
*/
@@ -18797,6 +24492,8 @@ function SimpleHandlebarsView(path, pathRoot, isEscaped, templateData) {
this.morph = Metamorph();
this.state = 'preRender';
this.updateId = null;
+ this._parentView = null;
+ this.buffer = null;
}
Ember._SimpleHandlebarsView = SimpleHandlebarsView;
@@ -18810,9 +24507,15 @@ SimpleHandlebarsView.prototype = {
Ember.run.cancel(this.updateId);
this.updateId = null;
}
+ if (this._parentView) {
+ this._parentView.removeChild(this);
+ }
this.morph = null;
+ this.state = 'destroyed';
},
+ propertyWillChange: Ember.K,
+
propertyDidChange: Ember.K,
normalizedValue: function() {
@@ -18894,7 +24597,7 @@ merge(states._default, {
merge(states.inDOM, {
rerenderIfNeeded: function(view) {
- if (get(view, 'normalizedValue') !== view._lastNormalizedValue) {
+ if (view.normalizedValue() !== view._lastNormalizedValue) {
view.rerender();
}
}
@@ -18915,7 +24618,7 @@ merge(states.inDOM, {
@private
*/
Ember._HandlebarsBoundView = Ember._MetamorphView.extend({
- instrumentName: 'render.boundHandlebars',
+ instrumentName: 'boundHandlebars',
states: states,
/**
@@ -18998,7 +24701,7 @@ Ember._HandlebarsBoundView = Ember._MetamorphView.extend({
*/
pathRoot: null,
- normalizedValue: Ember.computed(function() {
+ normalizedValue: function() {
var path = get(this, 'path'),
pathRoot = get(this, 'pathRoot'),
valueNormalizer = get(this, 'valueNormalizerFunc'),
@@ -19016,7 +24719,7 @@ Ember._HandlebarsBoundView = Ember._MetamorphView.extend({
}
return valueNormalizer ? valueNormalizer(result) : result;
- }).property('path', 'pathRoot', 'valueNormalizerFunc').volatile(),
+ },
rerenderIfNeeded: function() {
this.currentState.rerenderIfNeeded(this);
@@ -19051,7 +24754,7 @@ Ember._HandlebarsBoundView = Ember._MetamorphView.extend({
var inverseTemplate = get(this, 'inverseTemplate'),
displayTemplate = get(this, 'displayTemplate');
- var result = get(this, 'normalizedValue');
+ var result = this.normalizedValue();
this._lastNormalizedValue = result;
// First, test the conditional to see if we should
@@ -19114,6 +24817,10 @@ var forEach = Ember.ArrayPolyfills.forEach;
var EmberHandlebars = Ember.Handlebars, helpers = EmberHandlebars.helpers;
+function exists(value) {
+ return !Ember.isNone(value);
+}
+
// Binds a property into the DOM. This will create a hook in DOM that the
// KVO system will look for and update if the property changes.
function bind(property, options, preserveContext, shouldDisplay, valueNormalizer, childProperties) {
@@ -19135,7 +24842,7 @@ function bind(property, options, preserveContext, shouldDisplay, valueNormalizer
var template, context, result = handlebarsGet(currentContext, property, options);
- result = valueNormalizer(result);
+ result = valueNormalizer ? valueNormalizer(result) : result;
context = preserveContext ? currentContext : result;
if (shouldDisplay(result)) {
@@ -19292,9 +24999,7 @@ EmberHandlebars.registerHelper('bind', function(property, options) {
return simpleBind.call(context, property, options);
}
- return bind.call(context, property, options, false, function(result) {
- return !Ember.isNone(result);
- });
+ return bind.call(context, property, options, false, exists);
});
/**
@@ -19366,9 +25071,7 @@ EmberHandlebars.registerHelper('with', function(context, options) {
Ember.bind(options.data.keywords, keywordName, contextPath);
}
- return bind.call(this, path, options, true, function(result) {
- return !Ember.isNone(result);
- });
+ return bind.call(this, path, options, 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);
@@ -19378,7 +25081,7 @@ EmberHandlebars.registerHelper('with', function(context, options) {
/**
- See `boundIf`
+ See [boundIf](/api/classes/Ember.Handlebars.helpers.html#method_boundIf)
@method if
@for Ember.Handlebars.helpers
@@ -19413,11 +25116,11 @@ EmberHandlebars.registerHelper('unless', function(context, options) {
});
/**
- `bindAttr` allows you to create a binding between DOM element attributes and
+ `bind-attr` allows you to create a binding between DOM element attributes and
Ember objects. For example:
```handlebars
- 
+
```
- ### `bindAttr` and the `class` attribute
+ ### `bind-attr` and the `class` attribute
- `bindAttr` supports a special syntax for handling a number of cases unique
+ `bind-attr` supports a special syntax for handling a number of cases unique
to the `class` DOM element attribute. The `class` attribute combines
multiple discreet values into a single attribute as a space-delimited
list of strings. Each string can be:
@@ -19458,20 +25161,20 @@ EmberHandlebars.registerHelper('unless', function(context, options) {
* a boolean return value of an object's property
* a hard-coded value
- A string return value works identically to other uses of `bindAttr`. The
+ 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(){
+ someProperty: function() {
return "aValue";
}.property()
})
```
```handlebars
-