typo in docs about paper-toast HOT 8 CLOSED

Hi @zoechi, it is not a typo since the element is a <button>, and we execute the document.querySelector('#toast0').open() on the event onclick

from paper-toast.

@valdrinkoshi I see. Sorry for the noise.
I'm using Polymer from Dart and here it's not very common to use dom-bind.
I ported all element demos to Dart recently and there I replaced all dom-bind with an app-element. I found it weird that all examples assume the elements will be used on the body tag, not within the template of another component and such JS is used instead of Polymer binding.
Just saying, not action required/expected ;-)

from paper-toast.

We do it mainly to be concise in our examples, without requiring too much Polymer notation or other elements' knowledge. In a real application that code would be more verbose, something like this:

<!-- app-element.html -->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../paper-button/paper-button.html">

<dom-module id="app-element">
    <template>
       <paper-toast id="toast0" text="Welcome back!"></paper-toast>
       <paper-button on-click="openToast">Login</paper-button>
    </template>
</dom-module>

<script>
    Polymer({
      is: 'app-element',
      openToast: function() {
        this.$.toast0.open();
      }
    });
</script>

from paper-toast.

That's how I translated it :)
Just my opinion - this way the demo source is better from an educational POV.

from paper-toast.

you're right, also looking at other docs (e.g. iron-collapse https://github.com/PolymerElements/iron-collapse) we do use Polymer notation. Will re-open and update the docs!

from paper-toast.

For something as simple as this, I don't think it makes sense to create a full element. We also want folks to know how to use elements/DOM outside of Polymer features. A 2-line example is much easier to grok than a list of imports, element, and polymer features. My $0.02.

from paper-toast.

@ebidel, would something like

<paper-button on-click="openToast">Open toast</paper-button>
<paper-toast id="toast" text="Welcome back!"></paper-toast>
...
openToast: function() {
  this.$.toast.open();
}

be better than just

<button onclick="document.querySelector('#toast').open()">Open toast</button>
<paper-toast id="toast" text="Welcome back!"></paper-toast>

The drawback of the first though is that it won't work out-of-the-box if you copy-paste it, while the second would just work

from paper-toast.

The first seems fine. I don't think the docs example code needs to be copy-and pasteable. We have the fuller demo examples and doc site for that :)

from paper-toast.