CODEWITHSUNDEEP
javascriptember.js
gearsdigital
gearsdigital

Reputation: 14225

How to access array like object/values in ember.js

I need some help to display my data correctly. If i try to access the thumbnail path, the application throws the following error:

Assertion failed: Attributes must be numbers, strings or booleans, not [http://example.com/imgage/example_thumb.jpg]

How do i get rid of this error and show the image(s) correctly?

DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0
DEBUG: Handlebars.VERSION : 1.0.0
DEBUG: jQuery.VERSION : 2.0.3
DEBUG: ------------------------------- 

// models/collection_model.js
App.Collection = DS.Model.extend({
    title: DS.attr('string'),
    assets: DS.attr('object')
});


// datastore.js
App.Collection.FIXTURES = [
    {
        "id": 1,
        "title": "Lorem ipsum",
        "assets": {
            "thumb": ['http://example.com/imgage/example_thumb.jpg'],
            "thumb_large": ['http://example.com/imgage/example.jpg']
        }
    },
    {
        "id": 2,
        "title": "Losabim",
        "assets": {
            "thumb": ['http://example.com/imgage/example_thumb.jpg'],
            "thumb_large": ['http://example.com/imgage/example.jpg']
        }
    }
];

// templates/collection.handlebar
<script type="text/x-handlebars" data-template-name="collections">
    <h2>Collections</h2>
    <ul>
        {{#each collection in controller}}
            <li>
                {{collection.title}}
                <img {{bind-attr src=collection.assets.thumb }}/>
            </li>
        {{/each}}
    </ul>
</script>

Upvotes: 0

Views: 274

Answers (1)

alexspeller
alexspeller

Reputation: 788

Ember has firstObject and lastObject:

<img {{bind-attr src=collection.assets.thumb.firstObject }}/>

Upvotes: 1

Related Questions