Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[0.5.5] Function calling is not working in custom element #1484

Closed
ghost opened this issue May 5, 2015 · 7 comments
Closed

[0.5.5] Function calling is not working in custom element #1484

ghost opened this issue May 5, 2015 · 7 comments

Comments

@ghost
Copy link

ghost commented May 5, 2015

Hi,
my problem is this, I have made a custom element, a really simple one:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-collapse/core-collapse.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<!--COURSES PAGE -->
<polymer-element name="page-five">
    <template>
        <paper-button on-tap"{{toggleContent}}">Toggle >: /</paper-button>
        <core-collapse id="collapse1">
            <div class="content">
                Lorem ipsum
            </div>
        </core-collapse>
    </template>
    <script>
        Polymer({
            toggleContent : function() {
            this.$.collapse1.toggle();
            }
        });
    </script>
</polymer-element>

Once inserted in my index, I click on the button but it never toggles and I cannot even guess why because I have done a couple of similar ones and they work perfectly.
Other uses of data binding work well such as inputs... I have no clue of what is going on
Can be maybe a missing import? Or maybe I should update polymer files?
Thank you for the help! :)

@ghost ghost changed the title [0.5] Function calling is not working on custom element [0.5] Function calling is not working in custom element May 5, 2015
@ghost ghost changed the title [0.5] Function calling is not working in custom element [0.5.5] Function calling is not working in custom element May 5, 2015
@miztroh-zz
Copy link

Looks like you're not importing Polymer. You need something like this at the top.

<link rel="import" href="/bower_components/polymer/polymer.html">

@ghost
Copy link
Author

ghost commented May 5, 2015

It is imported in the index and afterwards I tried to import it in the custom element because I suspected it was an import issue but it did not work either.
I don't know if this might help but the custom element is called inside a core-animated-page like this:

<core-animated-pages valueattr="hash" selected="{{route}}" transitions="slide-from-right">
  <!-- pages  -->
  <section hash="five" layout vertical center-center>
    <page-five></page-five>
  </section>
</core-animated-pages>

@miztroh-zz
Copy link

Your index page should be importing webcomponentjs:

<script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script>

If that doesn't fix the issue for you, perhaps you can create a full test case on codepen or something like that.

@arthurevans
Copy link

You're missing the = when assigning the on-tap handler:

    <paper-button on-tap"{{toggleContent}}">Toggle >: /</paper-button>

Should be:

    <paper-button on-tap="{{toggleContent}}">Toggle >: /</paper-button>

http://jsbin.com/nunera/1/edit?html,output

@miztroh-zz
Copy link

@arthurevans Good catch.

@ghost
Copy link
Author

ghost commented May 6, 2015

I don't know if I should laugh or cry... I've been looking for this error about 8 hours. Thank you so much for the help! 😄

@arthurevans
Copy link

No problem! Glad you got it sorted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants