uppercase signals do not work

sjmiles commented 11 years ago

[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>

sjmiles commented 11 years ago

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 commented 11 years ago

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:

Using uppercase in the name throws an error with a clear error message when you call asyncFire.
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 commented 11 years ago

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

sjmiles commented 11 years ago

Fwiw, put the syntax name after the three tickmarks.

<some-html>

Thanks for the notes!

googlearchive / polymer-elements

uppercase signals do not work #25