bnavetta / aurelia-polymer

Aurelia plugin to support Polymer
MIT License
18 stars 5 forks source link

repeat.for withing paper-menu #12

Open dpinart opened 8 years ago

dpinart commented 8 years ago

Hi, I'm trying to create a paper-meny dynamically using the following code

<paper-menu vertical layout>
    <paper-item repeat.for="item of items>
      ${item.text}
  </paper-item>
</paper-menu>

It's not working, I can't see any paper-item element and I'm getting following error in console "Cannot read property 'insertBefore' of null. If I wrap paper items withing a div it works

<paper-menu vertical layout>
    <div>
    <paper-item repeat.for="item of items>
      ${item.text}
    </paper-item>
 </div>
</paper-menu>

with the above code the repeat for works as expected though I'd like to build a real polymer paper-menu

bnavetta commented 8 years ago

I haven't been able to reproduce this. Could you post a stack trace and maybe the value of items? Also, what browser were you using? I've had some odd compatibility issues before.

dpinart commented 8 years ago

Hi

sorry for the delay. It seems I was doing something wrong cause above scenario is working fine. Anyway I still have a minor issue. Following code is not working:

<paper-menu vertical layout>
   <paper-item>Home</paper-item>
    <paper-item repeat.for="item of items>
      ${item.text}
  </paper-item>
</paper-menu>

Noitice that I'm adding an "static" item to the paper-menu and after that I have the repeat.for. The error that appears in console is still the same "Cannot read property 'insertBefore' of null". Anyway, this is a minor issue for me right now as I can successfully do the following:

<paper-menu vertical layout>
 <paper-item>Home</paper-item>
</paper-menu>
<paper-menu vertical layout>
       <paper-item repeat.for="item of items>
      ${item.text}
  </paper-item>
</paper-menu>
bnavetta commented 8 years ago

Hmm. I tried it and it's showing up, but the dynamically-added items disappear when I click the static one. It looks like the problem is Aurelia wrapping the paper-items it adds in a template element, which Polymer's IronSelectableBehavior ignores. Oddly enough, looking at the paper-menu's children through Firefox's developer tools doesn't show the template element, but Polymer's DOM APIs do...

pfurini commented 8 years ago

@dpinart Hi, I have the same problem you had, with a simple test project with latest polymer components. I cannot get paper-items to work, and I get two errors in the console: Cannot read property 'insertBefore' of null, and Cannot read property 'firstChild' of undefined.. How did you resolve this issue in your setup, if I may ask?

Thank you very much!

dpinart commented 8 years ago

Hi @nexbit

sorry for the delay, didn't notice your post. I finally added to paper-menu as explained in my previous post. Not most elegant solution but it's good enough for my scenario

bnavetta commented 8 years ago

Sorry about the delay. Using the <div> trick you found before to wrap the dynamic items seems to let you put everything in one menu, and it might be necessary for now to work around the <template> problem. @nexbit do you think aurelia/templating#259 fixes it as well?