Using "em-tab-panel" inside an each block

[lperichon]

Hi!!! I'm trying to use ember-idx-tabs on my app.
My associations are as follow:
Practice ->* PracticePart -> Part
On the Practice show template I would like to show a tab for each PracticePart.
I came up with

{{#em-tabs selected-idx=tab_idx}}
    {{#em-tab-list}}
        {{#each practicePart in practiceParts}}
      {{#em-tab}}{{practicePart.part.symbol}}{{/em-tab}}
    {{/each}}
    {{/em-tab-list}}

    {{#each practicePart in practiceParts}}
      {{#em-tab-panel}}
        {{practicePart.part.symbol}}
      {{/em-tab-panel}}
    {{/each}}
{{/em-tabs}}

The problem is I'm getting only the tabs, the panels are all hidden (display: none).
If I dont iterate, but instead some em-tab-panels manually they are shown correctly and behave as expected.

I'm guessing its something I'm not doing well, cause I'm just learning ember.js, I'd appreciate any help!!!

[lolmaus]

My guess is the following.

ember-idx-tabs rely upon the view.parentView and view.parentView.parentView properties. When you create an intermediate view between tabs and tab list, the property chain breaks.

[lperichon]

Hi lolmaus!! Thx for the answer!!! I dont understand very much how it works on the inside, but what I could find out is that in line https://github.com/indexiatech/ember-idx-tabs/blob/master/addon/tab-panel.js#L56, this.get('selected') is returning undefined.
Maybe it has to do with what you say, do you have any recomendation on how to work around or fix this? It looks like a pretty common usecase in my opinion.

[Doomas]

Hi,
i think the source of the problem is the same as i had with adding and removing panels dynamically. I don't know exactly why this happens but with the each block the the panels and tabs are added then removed and readded again. And the panel removal doesen't work properly.

See pull request #10

[xamoom-pali]

@lolmaus is right, it has something to do with calling parentView and parentView.parentView.
I am having similar problem, using {{em-tab}} inside {{each}} helper. Adding new instance causes no problem, however, deleting an item from the array passed to the {{each}} helper causes:
return this.get('tabList.tab_instances').indexOf(this); // Cannot read property 'indexOf' of null