jsbin
I am new to ember.js and trying to figure out the best way to accomplish an updatable list.
The list, inside a partial, is updated when a list item from another object is clicked. Is it better to save the clicked(chosen) items in a separate model? or is it better to use an array in the controller as I was trying to do in the above jsbin?
In either case, how is it accomplished? In my above attempt the totalValue seems to update fine, but the array does not which makes me think I was going about it wrong.
The chosenList is an array and ember array has it's own api methods in order to inform observes...
With this variation in your code, the property updates http://jsbin.com/eyatORO/3/edit
this.get('chosenList').addObject({
title:item.title,
value:item.value
});
Good Luck
Related
While going from one route to another, I want to pass some data (especcially arrays). How is it possible?
Why can't we use query-params with arrays?
Is it a problem storing data in a specific service during transition?
Note:
I know there are some old questions those are nearly the same with this question. But their selected answers are no more applicable for Ember 2.x. Those questions are: 1, 2.
I´m not sure if queryparams won´t work with arrays as I only used it with single ids, but it would not be a good solutions even if it worked, there´s a limit on how much you can send by parameters and you should not bother any user with your data.
Just create a model to save your data for local use, so you can simply use the ember store
Use a service you´ll have to inject in every controller you want to use your data
I would prefer the model/store variant so you´ll be able to observe and just follow the normal flow which is also good if someone else has to maintain your code.
UPDATED
After testing with "transition.data"; not updating the history seems as a problem for us. So we again use "queryParams". The constraint is: do not pass a complex object between routes
OLD ANSWER
I'm using transition object for this purpose in an action while routing as the following:
let transition = router.transitionTo(route, model);
transition.data[propName] = propValue;
Also I wrote a component to use this code as link-to.
I passed the result of this.store.findAll('something') to a component so I could create a dropdown control. Everything works great but I'd like to find the object I selected by reading this property.
Everything I read says its bad practice to inject the store into these components and since I already have the data in the property I thought it would be easy to read. However it's in an Ember model array that doesn't seem to be so easy to open because the array is deep down the stack.
I started heading down something like this.get('myprop').content... but I wondered if this was the correct way to do this. It seems I should be able to open them as the model they should be.
Any suggestions would be helpful.
it turns out the best way I could find to select my model was the 'peek' function. Not exactly what I wanted to do but it works.
Some of the comments below my initial question also work, but nobody ever actually added an answer so this is my answer. :-)
I was reading about how to observe an array and do something when elements were added or removed. See the official explanation here. The page says that if we observe with anArray.#each then it should fire in the case of adding an object to the array.
I tested that here and had two problems:
The observer I put on the component did not fire.
The dom did not update its displaying of the length of the array.
Any help appreciated, thanks.
You need to use pushObject when adding items to an array in Ember, it's how Ember is able to keep track of whether or not the array has changed. Likewise you need to always use get/set on your objects, also Ember's way of knowing that a property has changed on an object.
this.get('testArray').pushObject('foo');
http://emberjs.jsbin.com/hobarenu/2/edit
I am displaying a list of Document titles on the site's sidebar area. To achieve this I created a documents property on the App.SidebarController
Document = require '../models/document'
SidebarController = Ember.Controller.extend
documents: (->
Document.find()
).property()
module.exports = SidebarController
This works fine, when I create a new Document in my application, this sidebar property get's updated automatically and I don't know why. It works no matter what I put in the .property() function. e.g.
.property('Document')
.property('App.Document')
Can somebody explain how this works? What would be the correct thing for the property() function to observe?
So you are basically saying that is works, but you would like to know why.
Here is my guess: When your controller gets rendered, your computed property gets computed for the first time and an instance of an array is returned. When you create a new Document, i think this very same array is updated (= Document is added). So it does work despite the fact, that you do not specify a dependent key on property(). This is because the right array is already in place. As i said just a guess, but this seems like an understandable explanation.
And what would be the correct thing to do?
IMHO one should not use such Data Access methods directly in a computed property. Instead you should call this Data Access method inside a Route and then assign it to the controller. This way you make sure, that the find() method gets executed when needed.
I'm running into a performance issue when I render a list of items using the #each helper or a collection view bound to some computed properties of an Ember.ArrayController. Performance is fine with a small list of 10 - 20 items, but around 50 - 100 it starts to lag quite noticeably. Try checking off a few todos or clicking "Add Todo"
Example code is here: http://jsfiddle.net/Jonesy/ed3ZS/4/
I noticed that the childViews in the DOM get re-rendered with each change, which could very well be the intended behaviour at the moment, but I'd prefer to be able to just have a todo be removed from the DOM of unfinished todos list individually and appended to the bottom of the finished todos list, which would in theory be much less costly.
What I'm hoping to have answered is whether am I looking at a performance issue with Ember collection views, or is displaying a list populated from a computed property a bad idea, and if so, will I need to manually manage the todo model's location in the view layer as it changes from unfinished to finished and vice versa.
This is a side-effect of how {{#each}} (and CollectionView, which is what powers it) works.
Internally, CollectionView uses something called array observers. An array observer allows you to subscribe to mutations made to an array when they are done using Ember.Array's mutation methods (replace, pushObject, popObject, etc.) The API for array observers is described here.
What this means is that, if you push a new object into a collection view, it will insert render one new element in the DOM and leave the rest in place.
In the example you posted, however, the array is not being mutated--you're creating a brand new Array object every time a new item is added or removed. When the binding synchronizes, it replaces the old array with the new array. To {{#each}}, this is no different than removing all of the elements and then adding them back in.
The solution to the problem is to use a single array, instead of a computed property that returns a different array object each time it changes. You can see the Contacts app for an example of how to do this.
Obviously this is a very common pattern, and we'd like to add some kind of filtering that does the right thing by default to Ember.ArrayController down the road.