Array with images

1

Hi! I have an array with pictures. Here is my template:

{{#each App.tweetsController}}
<img class="thumbnail" width="30%" {{{ bindAttr src="attachment_post" }}}/>
{{/each}}

where attachment_post is a picture. How can I print more than one picture? p.s sorry for my english

2

I’m having a hard time understanding your question. Can you say it another way?

3

i edited my post, sorry

4

Assuming that your code is correct, it should iterate over the items in the controller and show the images.

Although, {{#each App.tweetsController}} might need to be {{#each App.tweesController.content}}

5

it did not help:

  {{#each App.tweetsController.content}}
                                <div class="social-feed-element">
                                    <a class="pull-left author-picture" {{ bindAttr href="{{author_link}}" }} target="_blank">
                                        <img {{bindAttr src="author_picture"}} />
                                    </a>
                                    <div class="media-body">
                                        <p><img class="social-network-icon" title="posted by {{social_network}}" src="{{social_icon}}" /><span class="author-title">{{author_name}}</span>
                                            
                                            <a {{ bindAttr href="link_post" }} target="_blank" class="read-button">
                                                <span class="label">open </span>
                                            </a>
                                        </p>
                                        <div>
                                            <p class="social-feed-text">{{{message_post}}}</p>
                                            {{#if attachment_post}}                                                                       
                                            <a {{ bindAttr href="link_post" }} target="_blank">                                     
                                                <img class="thumbnail" width="30%" {{{ bindAttr src="attachment_post" }}}/>
                                            </a>                                                                                 
                                            {{/if}}
                                        </div>
                                    </div>
                                </div>
                            {{/each}}
6

Its difficult to troubleshoot like this. Is it possible to see the code? or could you create a JSBin that replicates the problem?

7

http://jsbin.com/oLIZuTa/1/ should be 2 pictures, and shows one

8

That’s much better. Thanks.

You only have 1 item loaded in the controller. Take a look…

Also, let me know if you would like to make your code more Ember idiomatic because what you have right now is not :smile:

9

but look http://i.imgur.com/D2I1M94.png and http://i.imgur.com/rUv8Mu6.png - out 2 pictures

I know my code is horrible, but I’m learning, if you could help me to improve it, I would be pleased

10

Learning is ok, I just wanted to check if you were open to suggestions.

I’ll look at why this not working and then we can look at how to refactor your code to be better.

11

You have a logic error somewhere. It’s not an Ember error.

Can you edit JSBin with the alert and give me updated link?

12

http://jsbin.com/oLIZuTa/3/

13

I’ll try to help out here:

Your #each loops over the content of App.tweetsController (it is not the nicest way to address the controller this way, but that’s not the point of the question).

Within your getJSON callback, you loop over data.items, but you only receive 1 item because you set the limit to 1. Thus, you only call the line me.pushObject(...) (which itself is perfectly fine) only once, so you only have one item in the controller.

Let’s look at the extraction of the thumbnails:

$.each(this.thumbnails, function(){
    result = this.image.url;
});

This only stores the last url found in result, if there is more then 1 thumbnail, the old one will be overwritten. I think you have to rethink the data structure you want to extract, use an Array to store the thumbnail urls and then another #each loop inside the article to loop over a post’s thumbnails.