CODEWITHSUNDEEP
javascriptpolymercustom-component
OlivierPT
OlivierPT

Reputation: 33

Polymer give me "Uncaught SyntaxError: Unexpected token ("

In the following Polymer custom component, when the function 'deleteState' is called (so when I click on the "delete" paper-item) I get invariably "Uncaught SyntaxError: Unexpected token (" from Chrome. On Firefox, I get "SyntaxError: function statement requires a name" error in the console.

<polymer-element name="tw-state" attributes="stateId">
<template>
    <style>
       ...
    </style>

    <paper-shadow z="1">
        <div layout vertical>
            <div class="state-header" layout horizontal center-justified>
                <div flex style="margin: 10px">
                    <content select="h3"></content>
                </div>                    
                <paper-menu-button>
                    <paper-icon-button icon="menu" noink></paper-icon-button>
                    <paper-dropdown class="dropdown">
                        <core-menu class="menu">
                            <paper-item>Settings</paper-item>
                            <paper-item onclick="{{deleteState}}">Delete</paper-item>
                        </core-menu>
                    </paper-dropdown>
                </paper-menu-button>
            </div>
            <div class="state-body" layout vertical start>
                <content></content>
            </div>
            <div class="state-footer"  layout horizontal center-justified>
                <paper-input-decorator label="New task" flex>
                    <input is="core-input">
                </paper-input-decorator>
                <paper-button noink="" role="button" tabindex="0">
                    <core-icon icon="add" aria-label="add" role="img"></core-icon>
                </paper-button>
            </div>
        </div>
    </paper-shadow>

</template>
<script>
    Polymer({

        deleteState: function() {
            console.log("Fire event delete-state");
            this.fire('delete-state', {id: 'this.stateId'});
        }

    });
</script>

After looking in the documentation and a lot of examples, I still don't see where I'm doing something wrong...

Upvotes: 3

Views: 2432

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

In your paper-item you want the polymer event handler 

on-click="{{deleteState}}"

instead of the normal onclick DOM handler. If you use onclick the string "{{deleteState}}" is evaluated as JavaScript code, resulting in the mentioned error.

If you use on-click, Polymer evaluates this string and binds the deleteState() function as a click handler.

Upvotes: 5

Related Questions