Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

uppercase signals do not work #25

Open
sjmiles opened this issue Aug 24, 2013 · 4 comments
Open

uppercase signals do not work #25

sjmiles opened this issue Aug 24, 2013 · 4 comments

Comments

@sjmiles
Copy link
Contributor

sjmiles commented Aug 24, 2013

[original issue posed by ojanvafai]

In the example below, my signal with an uppercase letter in the name doesn't work and the lowercase one gets called twice when it should only get called once.

<!DOCTYPE html>
<script src="third_party/polymer/polymer.js"></script>
<link rel="import" href="third_party/polymer-elements/polymer-signals/polymer-signals.html">

<polymer-element name="my-element">
  <template>
    Should get a "fooBar" signal and only a single "foobar" signal.
  </template>
  <script>
    Polymer('my-element', {
      created: function() {
        this.asyncFire('polymer-signal', {name: "foobar", data: "foobar"});
        this.asyncFire('polymer-signal', {name: "fooBar", data: "fooBar"});
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app">
  <template>
    <polymer-signals on-polymer-signal-foobar="foobarSignal"></polymer-signals>
    <polymer-signals on-polymer-signal-fooBar="foobarSignal"></polymer-signals>
    <content></cotnent>
  </template>
  <script>
    Polymer('my-app', {
      foobarSignal: function(e, detail, sender) {
        this.innerHTML += '<br>[my-app] got a [' + detail + '] signal<br>';
      }
    });
  </script>
</polymer-element>

<my-element></my-element>
<my-app></my-app>
@ghost ghost assigned sjmiles Aug 24, 2013
@sjmiles sjmiles mentioned this issue Aug 24, 2013
Closed
@sjmiles
Copy link
Contributor Author

sjmiles commented Aug 24, 2013

Signal names are case-insensitive (because attributes are, so on-polymer-signal-fooBar is not distinguishable in DOM from on-polymer-signal-foobar).

We need to document polymer-signals, and I will make sure to add this information.

@ojanvafai
Copy link

The bit that confused me was that just having the uppercase asyncFire line doesn't fire the signal at all. One of two things should happen instead:

  1. Using uppercase in the name throws an error with a clear error message when you call asyncFire.
  2. The name should get automatically lowercased.

I think I'd prefer 1 because it's more clear what's going on. No need to read documentation or figure it out on your own.

<!DOCTYPE html>
<script src="third_party/polymer/polymer.js"></script>
<link rel="import" href="third_party/polymer-elements/polymer-signals/polymer-signals.html">

<polymer-element name="my-element">
  <template>
    Should get a "fooBar" signal and only a single "foobar" signal.
  </template>
  <script>
    Polymer('my-element', {
      created: function() {
        this.asyncFire('polymer-signal', {name: "fooBar", data: "fooBar"});
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app">
  <template>
    <polymer-signals on-polymer-signal-foobar="foobarSignal"></polymer-signals>
    <polymer-signals on-polymer-signal-fooBar="foobarSignal"></polymer-signals>
    <content></cotnent>
  </template>
  <script>
    Polymer('my-app', {
      foobarSignal: function(e, detail, sender) {
        this.innerHTML += '<br>[my-app] got a [' + detail + '] signal<br>';
      }
    });
  </script>
</polymer-element>

<my-element></my-element>
<my-app></my-app>

@ojanvafai
Copy link

Sigh...sorry about the messy github comments. :(

@sjmiles
Copy link
Contributor Author

sjmiles commented Aug 24, 2013

Fwiw, put the syntax name after the three tickmarks.

<some-html>

Thanks for the notes!

@sjmiles sjmiles removed their assignment Mar 12, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sjmiles @ojanvafai