CODEWITHSUNDEEP
templatesember.jslaravel-4handlebars.js
samuraiseoul
samuraiseoul

Reputation: 2967

EmberJs Getting an img src to bind multiple model attributes correctly

I am trying to learn EmberJs, in conjuction with Laravel 4, to create a blog. Things have been going great, stuff hasn't been too difficult yet. But I got into a snag when trying to have a <img/> tag in one of my handlebar templates.

From my understanding to use info from a model in a template you use {{attribute_name}} and like magic, it's there! And so for my tag I was trying something like:

<img src="{{URL::asset('images/posts/')}}@{{id}}.@{{image_extension}}" }}" alt=""/>

Adding the url to images with Laravel and Blade, then on the template, just adding in those last little pieces to make the it all work. But I get this instead:

<img src="http://localhost/blog/images/posts&lt;script id='metamorph-11-start' type='text/x-placeholder'&gt;&lt;/script&gt;26&lt;script id='metamorph-11-end' type='text/x-placeholder'&gt;&lt;/script&gt;.&lt;script id='metamorph-12-start' type='text/x-placeholder'&gt;&lt;/script&gt;jpg&lt;script id='metamorph-12-end' type='text/x-placeholder'&gt;&lt;/script&gt;" alt="">

Obviously theres script tags in my src tag and this is causing some issues.

Now then, upon much research I discovered {{unbound attribute_name}} and came up with:

<img src="{{URL::asset('images/posts')}}/@{{unbound id}}.@{{unbound image_extension}}" alt=""/>

and while this works on the first blog post I click, it doesn't switch images when I switch posts.

<img src="{{URL::asset('images/posts')}}/@{{bind-attr src=id}}.@{{bind-attr src=image_extension}}" alt="Post image"/>

and it feels like it's on the right path, but not quite there. Any more advice?

So is there a way to make this guy work? I'm running out of ideas! Any information you could shed on this would be great! I really like ember so far and want to get even better! IF there's any more info you need, let em know and I will edit this question! Thanks so much!

Upvotes: 1

Views: 271

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

In your case I'd recommend making the Laravel portion part of a global property.

Then you'd be better off adding a computed property to the controller and use bind-attr

<img {{bind-attr src=imageProperty}} />

Then in the scoped controller

imageProperty: function(){
   return App.postsImages + this.get('color') + ".jpg";
}.property('color')

http://emberjs.jsbin.com/foper/2/edit

Upvotes: 1

Related Questions