Hmm still not getting an image.
<img {{bindAttr src="images.[0].['imageUrlsBySize'].['360']"}} />
When you use quotes, you’re telling Handlebars that you want to use that string and not value from that object. "images.[0].['imageUrlsBySize'].['360']" what happens without quotes? Also, do we have JSBin of this somewhere? I’d like to give it a try myself.
Still not working even without the string, that’s a good tip though. Here is a JSBin although I don’t know if it will work because it’s calling an external API, also I haven’t quite figured out how to wire up the recipes to their respective routes so I’m still working through that. I’ve FTP’d it real quick to my server so you can take a look.
http://thedesignbros.com/recipeapp
You can click on the submit button to be taken to a pre populated listing of recipes and for the time being you can’t click on one to view it because it’s not cooperating with me on that, but if you for instance went to…
http://thedesignbros.com/recipeapp/#/recipes/Meat-_-potatoes-307385
You’ll see (with a nice bit of animation, don’t mind the CSS flickering) what will eventually be the recipe. However, right at the top is supposed to be the image and as you can see, it’s not.
I updated the JSbin that we were working with check http://emberjs.jsbin.com/AguxEVA/7/edit
In HTML you will see this
<li><img src="{{unbound imageUrlsBySize.[90]}}"/></li>
You can use unbound when your helper is not going to change during the lifetime of the page
Its using value directly from imageUrlsBySize.[90] I don’t see 360 in the example that I’m looking at. Are you using different request parameters?
There isn’t one because that was for something different. I’m now working with the full recipe listing with all the instructions and what not and it gives a larger image.
When I make my call to the full recipe API I get something like this where the images are…
"images": [{
"imageUrlsBySize": {
"90": "http://lh6.ggpht.com/BGZKPO1f6GyBFlSQd2HUYC7fXogjhDSADrISJVO4AuPKDlGkT0Do2mxZroRgQV4L8RHQ_7W0eWCQPBzcmTu64g=s90-c",
"360": "http://lh6.ggpht.com/BGZKPO1f6GyBFlSQd2HUYC7fXogjhDSADrISJVO4AuPKDlGkT0Do2mxZroRgQV4L8RHQ_7W0eWCQPBzcmTu64g=s360-c"
},
"hostedLargeUrl": "http://i.yummly.com/Spinach-artichoke-scalloped-potatoes-recipe-307879-271887.l.jpg",
"hostedSmallUrl": "http://i.yummly.com/Spinach-artichoke-scalloped-potatoes-recipe-307879-271887.s.jpg"
}],
That is what I’m now trying to do. This needs to be done inside of recipes/recipe route.
The second link in my most recent post before this one is an example where I hard coded in the id and am having ember retrieve this for me. You can see the title working but the image is where I’m getting hung up on.
try
<img {{bindAttr src=images.['imageUrlsBySize'].[360]}} />
Wow, no still nothing. Here is what I just did and now I think I’m getting somewhere. I tried to console log the exact value I wanted using this one the recipesreciperoute…
console.log(response.images[0].imageUrlsBySize['360']);
However my attempts to use this have failed in handlebars. So I tried sticking it back into the recipe object as a static attribute (or whatever you called it) just like we did with the last one and reference that in the handlebars template. However both give me this error in the console…
Uncaught Error: Parse error on line 6:
...e"> <img {{bindAttr=fullImage}} /> <h2
----------------------^
Expecting 'CLOSE', 'CLOSE_UNESCAPED', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'DATA', 'SEP', got 'EQUALS'
handlebars-1.0.0.js:306
Here is what this section of the app looks like right now…
That error was caused by incorrect handlebars syntax, it should have been {{bind-attr src=fullImage}}
I cloned your JSBin because we were overwriting our bins. Here is the new one JS Bin - Collaborative JavaScript Debugging
I did a lot of clean up, there are a bunch of things that you might want to know about.
Problem with images was caused by confusion with routes. I think you were under the impression that your data was loading from second endpoint which had large image information, but in reality it wasn’t. You were using nested routes, that looked like this:
App.Router.map(function(){
this.resource('recipes', function() {
this.route('recipe', {path: :recipe_id});
});
});
In your RecipesRecipeRoute, you were making an ajax request and you thought it was going to be used to load the data. Ember only runs nested route’s model when you access it directly. So, RecipesRecipeRoute#model would only be called if you typed the url in your browser.
To make sure that the #model hook got called every time, your route has to be a resource, so I changed the structure to have same urls but as 2 resources.
App.Router.map(function() {
this.resource('recipes');
this.resource('recipe', {
path: 'recipes/:recipe_id'
});
});
Once I got this setup, the model hook was still not loading. The problem is that when you pass a model via link-to 'recipe' this}}, model hook is not called because the model is provided. So, I needed to make the request manually. To do this, I changed from {{link-to 'recipe' this}} to {{action 'goToRecipe' this}}. This causes an action to be triggered instead of transition. I added the following code to RecipesRoute to handle the action.
actions: {
goToRecipe: function(model) {
var that = this;
App.Recipe.find({recipe_id: model.get('id')})
.then(function(response) {
model.reopen(response);
that.transitionTo('recipe', model);
});
}
}
model.reopen(response) takes data that was provided in the request and populates it into the model.
1 Like
This is gold! Thanks so much, that bit about the model only being called upon the user putting in the url is good info.
This is all working but now since the recipe route is not a nested route now I’m having some trouble getting it to lay back overtop of the recipes list.
I tried doing what is talked about here…
But can’t seem to get it working, it tries to go to that route but it doesn’t show anything.
I think that with the technique that I ended up using at the end of the last JSBin(ie, one about load content in beforeModel hook), you could use the nested routes. You give that a try, but make sure that your route names are all correct.
Not sure I follow. Are you talking about the one where you were talking about bound?
No, sorry, it was late, I didn’t look at the JSBin. If you switch back to using rented routes and you use {{action 'goToRecipe' this}}} then it should work.