+ ```
+
+ ### `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 = View.extend({
+ someProperty: function() {
+ return "aValue";
+ }.property()
+ })
+ ```
+
+ ```handlebars
+
+
+ ```
+
+ ### Non-block version of collection
+
+ If you provide an `itemViewClass` option that has its own `template` you may
+ omit the block.
+
+ The following template:
+
+ ```handlebars
+ {{! application.hbs }}
+ {{collection content=model itemViewClass="an-item"}}
+ ```
+
+ And application code
+
+ ```javascript
+ App = Ember.Application.create();
+ App.ApplicationRoute = Ember.Route.extend({
+ model: function(){
+ return [{name: 'Yehuda'},{name: 'Tom'},{name: 'Peter'}];
+ }
+ });
+
+ App.AnItemView = Ember.View.extend({
+ template: Ember.Handlebars.compile("Greetings {{view.content.name}}")
+ });
+ ```
+
+ Will result in the HTML structure below
+
+ ```html
+ Hi Yehuda
+ Hi Tom
+ Hi Peter
+
+
+ ```
+
+ ### Specifying a CollectionView subclass
+
+ By default the `{{collection}}` helper will create an instance of
+ `Ember.CollectionView`. You can supply a `Ember.CollectionView` subclass to
+ the helper by passing it as the first argument:
+
+ ```handlebars
+ {{#collection "my-custom-collection" content=model}}
+ Hi {{view.content.name}}
+ {{/collection}}
+ ```
+
+ This example would look for the class `App.MyCustomCollection`.
+
+ ### Forwarded `item.*`-named Options
+
+ As with the `{{view}}`, helper options passed to the `{{collection}}` will be
+ set on the resulting `Ember.CollectionView` as properties. Additionally,
+ options prefixed with `item` will be applied to the views rendered for each
+ item (note the camelcasing):
+
+ ```handlebars
+ {{#collection content=model
+ itemTagName="p"
+ itemClassNames="greeting"}}
+ Howdy {{view.content.name}}
+ {{/collection}}
+ ```
+
+ Will result in the following HTML structure:
+
+ ```html
+ Greetings Yehuda
+ Greetings Tom
+ Greetings Peter
+
+
+ ```
+
+ @method collection
+ @for Ember.Handlebars.helpers
+ @param {String} path
+ @param {Hash} options
+ @return {String} HTML string
+ @deprecated Use `{{each}}` helper instead.
+ */
+ function collectionHelper(params, hash, options, env) {
+ var path = params[0];
+
+ Ember.deprecate("Using the {{collection}} helper without specifying a class has been" +
+ " deprecated as the {{each}} helper now supports the same functionality.", path !== 'collection');
+
+ Ember.assert("You cannot pass more than one argument to the collection helper", params.length <= 1);
+
+ var data = env.data;
+ var template = options.template;
+ var inverse = options.inverse;
+ var view = data.view;
+
+ // This should be deterministic, and should probably come from a
+ // parent view and not the controller.
+ var controller = get(view, 'controller');
+ var container = (controller && controller.container ? controller.container : view.container);
+
+ // If passed a path string, convert that into an object.
+ // Otherwise, just default to the standard class.
+ var collectionClass;
+ if (path) {
+ collectionClass = readViewFactory(path, container);
+ Ember.assert(fmt("%@ #collection: Could not find collection class %@", [data.view, path]), !!collectionClass);
+ }
+ else {
+ collectionClass = CollectionView;
+ }
+
+ var itemHash = {};
+ var match;
+
+ // Extract item view class if provided else default to the standard class
+ var collectionPrototype = collectionClass.proto();
+ var itemViewClass;
+
+ if (hash.itemView) {
+ itemViewClass = readViewFactory(hash.itemView, container);
+ } else if (hash.itemViewClass) {
+ itemViewClass = readViewFactory(hash.itemViewClass, container);
+ } else {
+ itemViewClass = collectionPrototype.itemViewClass;
+ }
+
+ if (typeof itemViewClass === 'string') {
+ itemViewClass = container.lookupFactory('view:'+itemViewClass);
+ }
+
+ Ember.assert(fmt("%@ #collection: Could not find itemViewClass %@", [data.view, itemViewClass]), !!itemViewClass);
+
+ delete hash.itemViewClass;
+ delete hash.itemView;
+
+ // Go through options passed to the {{collection}} helper and extract options
+ // that configure item views instead of the collection itself.
+ for (var prop in hash) {
+ if (prop === 'itemController' || prop === 'itemClassBinding') {
+ continue;
+ }
+ if (hash.hasOwnProperty(prop)) {
+ match = prop.match(/^item(.)(.*)$/);
+ if (match) {
+ var childProp = match[1].toLowerCase() + match[2];
+
+ if (IS_BINDING.test(prop)) {
+ itemHash[childProp] = view._getBindingForStream(hash[prop]);
+ } else {
+ itemHash[childProp] = hash[prop];
+ }
+ delete hash[prop];
+ }
+ }
+ }
+
+ if (template) {
+ itemHash.template = template;
+ delete options.template;
+ }
+
+ var emptyViewClass;
+ if (inverse) {
+ emptyViewClass = get(collectionPrototype, 'emptyViewClass');
+ emptyViewClass = emptyViewClass.extend({
+ template: inverse,
+ tagName: itemHash.tagName
+ });
+ } else if (hash.emptyViewClass) {
+ emptyViewClass = readViewFactory(hash.emptyViewClass, container);
+ }
+ if (emptyViewClass) { hash.emptyView = emptyViewClass; }
+
+ if (hash.keyword) {
+ itemHash._contextBinding = Binding.oneWay('_parentView.context');
+ } else {
+ itemHash._contextBinding = Binding.oneWay('content');
+ }
+
+ var viewOptions = ViewHelper.propertiesFromHTMLOptions(itemHash, {}, { data: data });
+
+ if (hash.itemClassBinding) {
+ var itemClassBindings = hash.itemClassBinding.split(' ');
+ viewOptions.classNameBindings = map(itemClassBindings, function(classBinding){
+ return streamifyClassNameBinding(view, classBinding);
+ });
+ }
+
+ hash.itemViewClass = itemViewClass;
+ hash._itemViewProps = viewOptions;
+
+ options.helperName = options.helperName || 'collection';
+
+ return env.helpers.view.helperFunction.call(this, [collectionClass], hash, options, env);
+ }
+
+ __exports__.collectionHelper = collectionHelper;
+ });
+enifed("ember-htmlbars/helpers/debugger",
+ ["ember-metal/logger","exports"],
function(__dependency1__, __exports__) {
"use strict";
- var EmberObject = __dependency1__["default"];
+ /*jshint debug:true*/
- __exports__["default"] = EmberObject.extend({
- lookupFactory: function(name, container) {
+ /**
+ @module ember
+ @submodule ember-htmlbars
+ */
+ var Logger = __dependency1__["default"];
- container = container || this.container;
+ /**
+ Execute the `debugger` statement in the current context.
- var fullName = 'component:' + name;
- var templateFullName = 'template:components/' + name;
- var templateRegistered = container && container.has(templateFullName);
+ ```handlebars
+ {{debugger}}
+ ```
- if (templateRegistered) {
- container.injection(fullName, 'layout', templateFullName);
- }
+ 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:
- var Component = container.lookupFactory(fullName);
+ - templateContext: this is most likely a controller
+ from which this template looks up / displays properties
+ - typeOfTemplateContext: a string description of
+ what the templateContext is
- // Only treat as a component if either the component
- // or a template has been registered.
- if (templateRegistered || Component) {
- if (!Component) {
- container.register(fullName, Ember.Component);
- Component = container.lookupFactory(fullName);
- }
- return Component;
- }
- }
- });
+ 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') // -> "Howdy Yehuda
+Howdy Tom
+Howdy Peter
+Sorry, nobody is available for this task.
+ {{/each}} + ``` + + ### Specifying an alternative view for each item + + `itemViewClass` can control which view will be used during the render of each + item's template. + + The following template: + + ```handlebars +-
+ {{#each developer in developers itemViewClass="person"}}
+ {{developer.name}}
+ {{/each}}
+
-
+
- Yehuda +
- Tom +
- Paul +
-
+ {{each developer in developers itemViewClass="person"}}
+
-
+ {{#each developer in developers emptyViewClass="no-people"}}
+
- {{developer.name}} + {{/each}} +