Same component in same route with same data, but need something different

1

I am creating a multiselect component, there are two sections, on left “Available Links” on Right “Selected Link”

So basically, I have department and each department will have its top and right navigation links. So I need to display all the links in both components. Also when a link is selected from Available section, I need to add a class to hide it or show it as selected

I have created a gist on twiddle Ember Twiddle

A) Directly use the provided data objects If I use the object directly, when setting the class for that object, it is also replicated to other component on same route. So it hides the link from that too

B) Create a new array of objects For some reason, when creating a new array of the objects, first component array get filled again if I have another component, so suppose there are 4 links it will display 8 links in both components. Which is the current state of the gist.

To test, A and B both. change line 5 from {{#each items key="id" as |link|}} to {{#each _items key="id" as |link|}} in multiselect-div/template.hbs file

2

You should not share the array on the component prototype. If you put a mutable object in the prototype it will be shared amongst all instances. That is not what you want in this case.

Instead of:

_items: []

Do:

_items: null,
init() {
  this._super(...arguments);
  this._items = [];
},
3

@rwjblue Thank you for your tip, this was a very small thing which had me blocked from last two days. I have updated the twiddle Ember Twiddle and it is working fine. And I didnt altered the model objects.

I still feel that I can improve the code as now the side which is showing selected items is still bound to the actual object provided to component. It should also be some copied format

4

@rwjblue I have updated the code now the selected items are also a temp list which is displayed, and model get updated as required.

But when I remove the item, sometimes (not always) it give me error that object dosnt exists.

I have updated the twiddle and I dont see any error there

1207×730 131 KB

I am using

DEBUG: -------------------------------
Ember             : 1.13.10
Ember Data        : 1.13.13
jQuery            : 2.1.4
Ember Simple Auth : 0.8.0
DEBUG: -------------------------------
Ember Inspector Active