Emberjs bindAttr inside of #each

Question

Code for view is

Ember.View.extend({
        template: Ember.Handlebars.compile(html), // html is in string
        content: function() {
            return [
            { Title: "Dashboard", ID: "dashboard" },
            { Title: "Invoices", ID: "invoices" },
            { Title: "Expenses", ID: "expenses" },
            { Title: "People", ID: "people" },
            { Title: "Reports", ID: "reports" },
            { Title: "Settings", ID: "settings" }
        ]},
        iconClass: function(link){
          return "icon icon-" + link.ID
        }
    });

Template (show above as "html") looks like this:

<ul>
    {{#each link in view.content}}
    <li>
        <a>
            <span class="icon" {{bindAttr class="view.iconClass(link)"}}></span>
            <span class="title">{{link.Title}}</span>
        </a>
    </li>
    {{/each}}
</ul>

This renders

<span class="icon" data-bindattr-2="2"></span>

So additional class attribute is not rendered. Am I doing something wrong with scope or?

NOTE:

I changed my code to show what I want to do.

Answer 1

EDIT

According to the new question, you'll have to use an Ember.CollectionView:

App.FooCollectionView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        iconClass: function() {
             return "icon-dashboard icon " + this.get('content.ID');
        }.property('content.ID')
    })
});

As you can see, each itemViewClass has a property iconClass which depends on its content.id.

Now you'll have to add the collection view in the template of the view FooView:

<ul>
    {{#collection App.FooCollectionView contentBinding="view.content"}}
    <li>
        <a>
            <span {{bindAttr class="view.iconClass"}}>foo</span>
            <span class="title">{{view.content.Title}}</span>
        </a>
    </li>
    {{/collection}}
</ul>

Here we are using the {{collection}} Handlebars helper, and we bind the content of the FooView to the FooCollectionView.

It will automatically create an itemViewClass instance for each object in the CollectionView.content, set the its to the associated object, and add it to the view.

I suggest you to read the Ember.CollectionView documentation.

And you could try this solution in this JSFiddle.

Answer 2

For others who are having the problem with bindAttr resulting in something like:

data-bindattr-1="1"

make sure you are using

{{bindAttr src="myvariable"}} instead of {{bindAttr src="{{myvariable}}"}}

Might save you some time searching for the answer, this was what caused my code not to work.