Using attributesBinding *and* bindAttr

Can we use bindAttr and attributeBindings in the same View?

by pjmorse

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1>Ember Data Related Items</h1>
    </header>
    {{outlet}}
    <footer></footer>
</script>

<script type="text/x-handlebars" data-template-name="home">
    {{#each controller}}
        <div>
            <h2>{{title}}<h2>
                <ul>
        {{#each images}}
                    {{view Sylvius.ImageView}}
        {{/each}}
                </ul>
                </div>
    {{/each}}
</script>
                
<script type="text/x-handlebars" data-template-name="image">
    <li {{bindAttr id="text"}}>{{text}}</li>
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}
ul {
    list-style: disc;
}
li {
    margin-left: 2em;
    list-style: disc;
}

JavaScript

Sylvius = Ember.Application.create();

Sylvius.Filter = DS.Model.extend({
    title: DS.attr('string'),
    // Has images
    images: DS.hasMany('Sylvius.Image'),
    // ... more
});

Sylvius.Image = DS.Model.extend({
    // Description if any
    text: DS.attr('string')
    // ... more
});

Sylvius.Filter.FIXTURES = [{
    "id": 1,
    "title": "First Filter",
    "images": [1, 2, 3, 4]},
{
    "id": 2,
    "title": "Second Filter",
    "images": [2, 3, 4]},
{
    "id": 3,
    "title": "Third Filter",
    "images": [3, 4]},
{
    "id": 4,
    "title": "Fourth Filter",
    "images": [4]}];

Sylvius.Image.FIXTURES = [{
    "id": 1,
    "text": "First Image"},
{
    "id": 2,
    "text": "Second Image"},
{
    "id": 3,
    "text": "Third Image"},
{
    "id": 4,
    "text": "Fourth Image"}];

Sylvius.store = DS.Store.create({
    revision: 4,
    adapter: DS.fixtureAdapter
});


Sylvius.ApplicationController = Em.Controller.extend();
Sylvius.ApplicationView = Em.View.extend({
    templateName: 'application'
});

// For the "atlas launcher" box on the home page and the panel
Sylvius.HomeController = Em.ArrayController.extend({
    content: Sylvius.store.findAll(Sylvius.Filter)
});

Sylvius.HomeView = Em.View.extend({
    templateName: 'home'
});

Sylvius.ImageView = Em.View.extend({
    templateName: 'image',
    style: 'color: #f00;',
    attributeBindings: 'style'.w()
});

Sylvius.Router = Em.Router.extend({
    enableLogging: true,
    //  location: 'hash',
    root: Em.Route.extend({

        // STATES
        index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet({
                    name: 'home'
                });
            }
        })
    })
});
Sylvius.initialize();