高分子简易输入开关

Question

我一直在玩弄 Polymer，并试图制作一个脚本，根据输入给出不同的消息，我尝试了很多可能性，但还没有足够幸运让它工作。我想我可能需要使用PHP，我只希望有人能指出哪里做错了

<!doctype html>
<html>
  <head>
    <title>Paper Elements Test</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="stylesheet" href="styling.css">
  </head>

  <body>
    <div id="Container">
      <paper-input label="Your name here"></paper-input>
      <paper-button raised>Start conversation</paper-button>
      <div id="greeting"></div>
    </div>

    <script>
      document.addEventListener('WebComponentsReady', function() {
      var message;
      var input = document.querySelector('paper-input');
      var button = document.querySelector('paper-button');
      var greeting = document.getElementById("greeting");     

      switch(input.value){
      case "Me":
      message = "Hello ";
      break;
      default:
      message = "Hey ";
      }

      //Click event
      button.addEventListener('click', function() {
          greeting.textContent = message + input.value + ' ?';
        });
      });
    </script>
  </body>
</html>

我想做的是，如果输入包含 "Me"，我想要一条不同的消息。无论我尝试什么，我都会收到默认消息。

Answer 1

这对你有用吗？

已编辑：

<!-- my-switch.html -->
<link href="bower_components/polymer/polymer.html" rel="import">
<link href="bower_components/paper-button/paper-button.html" rel="import">
<link href="bower_components/paper-input/paper-input.html" rel="import">

<dom-module id="my-switch">
  <template>
    <div id="container">
      <paper-input label="Your name here" value="{{name::input}}"></paper-input>
      <paper-button raised on-click="buttonClick">Start conversation</paper-button>
      <div>
        <span>{{greeting}}</span>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'my-switch',
      properties: {
        name: {
          type: String,
          notify: true
        },
        greeting: {
          type: String
        }
      },
      buttonClick: function () {
        var message;
        switch(this.name) {
          case 'Me':
            message = 'Hello ';
            break;

          default:
            message = 'Hey ';
            break;
        }

        this.greeting = message + this.name;
      }
    });
  </script>
</dom-module>

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="my-switch.html">
  </head>
  <body>
    <my-switch></my-switch>
  </body>
</html>

我们对按钮使用 two way data binding to capture the input value. We attach a listener 来捕获点击。发生点击时，我们会根据名称属性更新问候语属性，这会导致使用正确的文本内容更新问候语范围。

高分子简易输入开关

Polymer simple input switch

javascript

polymer