I'm currently in the process of updating my Ember App to use 1.13 and am having an issue translating a particular Ember.View and its associated Ember.ArrayController into an Ember.Component, as per the Deprecation Guide.
After repurposing some code, I now have the following:
app/templates/page.hbs
{{example-component content=posts}} // "posts" being an array of objects
app/templates/components/post-list.hbs
{{#each content key="#index" as |post|}}
{{post.title}}
{{/each}}
In some cases, the order of the items in the posts array will need to change (via the Ember.SortableMixin), and these changes need to be reflected on screen. When I do this, however, it seems as though content isn't being binded correctly and doesn't update visually (though the order of the posts data is correct in the PageController).
I hope this makes sense. Any help is greatly appreciated!
With the help of #locks in Freenode IRC, I have an answer. The issue had to do with the key that was being iterated on in the {{#each}} loop. By changing it to key="#identity" (Ember 1.13.2) it now works as desired.
Related
I am embedding my Ember App into another environment. Prototype.js is in use there. Due to this, ember breaks.
I have read http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/
I followed that but unfortunately issue is not resolved.
JS Bin: http://jsbin.com/raqab/2/edit
I am not sure what i am doing wrong here, Can anyone please assist me?
In the same guide, where the effect of disabling prototype extensions is explained for arrays, it is said that
Native arrays will no longer implement the functionality needed to observe them. If you disable prototype extension and attempt to use native arrays with things like a template's {{#each}} helper, Ember.js will have no way to detect changes to the array and the template will not update as the underlying array changes.
Additionally, if you try to set the model of an Ember.ArrayController to a plain native array, it will raise an exception since it no longer implements the Ember.Array interface.
You can manually coerce a native array into an array that implements the required interfaces using the convenience method Ember.A:
Therefore change your model hook as
App.ApplicationRoute=Ember.Route.extend({
model:function(){
return Ember.A(["one","two","three"]);
}
});
and in your template,
<ul>
{{#each model}}
<li>{{this}}</li>
{{/each}}
</ul>
Updated jsbin: http://jsbin.com/hayata/1/edit
Now no error is thrown by ember, but some error is thrown from your other scripts.
Once you fix that it'll be all ok.
Can someone tell me why "Action" does not work here? Has it got to do with my route?
{{#linkTo "content.friend" this}}
http://jsbin.com/EtOjuTe/17
http://jsbin.com/EtOjuTe/19 (Here is the version with it uncommented and thus no output)
Thank you.
The first argument to linkTo is the name of the route that you want to link to. You don't have a route called content.friend, so Ember fails when trying to build the link.
I would expect that you would want to use contact.friend, but that's not working either. I think this is due to the jsbin being set up with an old version of Ember. I can get it to at least build the link by using just friend. Since the friend route is nested under contact that means Ember needs two models to be involved in the link.
Since the contact is attached to the friend model as who, you can do this:
{{#linkTo "friend" who this}}
That gets the link to build, but the id for contact is undefined. Again I suspect that an old version of Ember is at fault.
Here's the Ember docs about linking to routes with multiple dynamic segments. http://emberjs.com/guides/templates/links/#toc_example-for-multiple-segments
Here's a semi working jsbin : http://jsbin.com/OdoHaGi/1/edit
I have an ArrayController and was using {{#each item in controller}} to iterate over the items in the controller. This was working fine while using the same controller however after switching to another route I ran into some weird behavior which stopped the items from being rerendered. Switching to {{#each item in controller.content}} solved this problem. However I am not sure how this even happened.
What's the difference between controller and controller.content in an each expression (or any where else).
What's the difference between controller and controller.content in an each expression (or any where else).
Basically there is no difference, for example when using an ArrayController which extends from ArrayProxy, then inside the controller this.pushObject(obj) will behave the same as doing this.get('content').pushObject(obj). See here for reference.
But IMO you are better of using model everywhere e.g. {{#each item in model}}.
Check also this answer which I guess will be useful: Ember iterations: when to use #each User, #each user in controller, #each user in model, etc
Hope it helps.
I am trying to upgrade a partially built UI to the latest Ember.js rc1 and it has turned into a very big rewrite job thanks to the dramatically changed API. Most info out there (and here) has been rendered useless. I've had to go through the documentation again several times to get things partially working but there are a lot of loose ends. Here is a biggie. The views do not update like they did under the previous version. I'm missing something that must have to do with rerender, {{outlet}} or something else that I'm not aware of. The ember guides seem to need updates.
The template is very simple:
<script type="text/x-handlebars" data-template-name="index">
<button {{action "addOne"}}>add one</button>
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>
</script>
When clicked, the button adds a new element to the backed array. The console logs show that the array is growing, but the template does not change. Here is a jsfiddle to illustrate how far I've gotten. Can anyone figure out what needs to be added?
I modified your example to highlight the fact when we use arrays in Ember, that we are using Ember arrays (Ember.A() or Em.A() if you want to make explicit this fact). From my understanding, you can use the methods Em.A().addObject and Em.A().removeObject to achieve the basic functionality using the Ember.Object getter and setter methods, (i.e. .get() & .set()) .
In order be properly observed by the Ember application, it is important to use the Ember getters and setters.
A modified version of your fiddle.
Why is the Ember Snippet i have linked not working? I am setting up a simple ArrayController and fill it with contents upon initialization. Then i want to display the contents of this controller with the help of {{#each}}, but this is not working.
In tutorials i have read through, the following structure is always used:
{{#each AppNamespace.myModelController}}
...
{{each}}
But to make my example work i had to use:
{{#each AppNamespace.myModelController.content}}
...
{{/each}}
Could you have a look at the provided fiddle and tell me what is wrong with it? I assume that i must have done something wrong since i have seen this pattern so often in tutorials.
Note: I am a Javascript beginner coming from Java Server Development. So it maybe easy JS basics that i am struggling with.
I would have posted the complete code here, but the formatting was not working properly.
Link to my JS Fiddle showing my problem
Add a call to this._super() inside your init method.
https://github.com/emberjs/ember.js/pull/1251
Also, not directly related to your question, but it looks like you would benefit from reading #6 here: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/
Tried your fiddle with http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js instead of 1.0 pre it is working fine in both the cases.
I'm starting to look at Ember myself and I'm concerned about the process you're using.
As far as I'm aware you shouldn't really be retrieving data directly from the controller like that. The pattern you use should be based upon models, controllers, views and the router.
http://trek.github.com/ is a resource which I have found useful while learning about Ember.
Based upon that example, this would be my take on a small ember test application:
http://jsfiddle.net/zDfBv/
Hopefully that will be of some use to you as a starting point.
If you pass 1 argument to the #each helper it needs to be a Ember.Array compatible object-- in your first example you pass the controller when your data is in the content property.. your second example works because you pass the content property.. and there is nothing wrong with doing it that way if you feel like it.
There is however an alternate syntax for the #each helper which you may see more often, it uses element naming {{#each model in myModelController}} ... {{/each}}. When you do it this way Ember takes care of looking for the content property for you because it's the default rendering context for the view.
Assuming you're using the latest version from Github you'll find it takes care of looking for content in both cases so the point becomes moot once that is released as stable.