Question

我一直在玩聚合物，并试图制作一个脚本，根据输入提供不同的消息，我已经尝试了很多可能性，但没有足够的幸运能让它工作。我想我可能需要使用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>

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

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来捕获输入值。我们attach a listener按钮可以获取点击次数。当发生单击时，我们会根据name属性更新greeting属性，这会导致使用正确的文本内容更新问候范围。

聚合物简单输入开关

1 个答案: