在 Polymer 中获取文本字段的值答案

【问题标题】：Getting the value of a textfield in Polymer在 Polymer 中获取文本字段的值
【发布时间】：2015-03-06 00:52:25
【问题描述】：

我有一个简单的纸张输入，我试图从中获取价值，但由于某种原因我没有任何运气。这是我设置按钮和 onclick 事件的 HTML 的简化版本：

  <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
        <core-header-panel flex id="annotation-box">
            <core-toolbar class="graph-sets-header">
              <span flex>TEST</span>
            </core-toolbar>
            <br>
            <paper-input-decorator label="Add your annotation">
                <paper-autogrow-textarea>
                    <textarea id="annotationSource"></textarea>
                </paper-autogrow-textarea>
            </paper-input-decorator>
            <paper-button dismissive hover >Cancel</paper-button>
            <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
        </core-header-panel>
    </paper-action-dialog>

这是我的 JS 函数：

function getAnnotation(){

    var toolText = document.getElementById('annotationSource').value;
        console.log(toolText);

}

这是一个大部分都在运行的 plunker（除了我无法在控制台中显示纸张输入的值：http://plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview

我确定可以将其作为聚合物模板，但我需要将值传递给主 HTML 中的一堆其他函数，并且在将数据移入和移出模板时一直遇到问题，所以我想要如果可以的话，尽量避免这种情况。

添加更多流以使其更清晰* 要打开注释框，您需要单击 plunker 图形上的任何点 - 这样做会打开纸张输入框，我想用它来创建注释......最终将注释文本添加到将鼠标悬停在我生成的点上会出现的工具提示

【问题讨论】：

尝试 Plunker：如果我在纸张输入中输入“foo”并点击提交，它会在我的控制台中登录。
奇怪的是一个旧的 plunker，我不知何故没有正确分叉 - 这是正确的 (plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview) 也将在主体中更新
plunker bin 似乎还是一团糟
抱歉，我发现有关如何打开纸质对话框的说明不是很清楚 - 添加了更详细的说明

标签： javascript polymer material-design

【解决方案1】：

使用“自动绑定”的模板可以更轻松地访问 annotationSource 元素

var chart = c3.generate({
    bindto: '#graph',
    padding: {
      top: 30
    },
    data: {
      xs: {
        'data1': 'x1',
        'data2': 'x2',
      },
      columns: [
        ['x1', 1, 3, 4, 5, 7, 10],
        ['x2', 3, 5, 7, 10, 12],
        ['data1', 2, 3, 6, 7.5, 8, 9.5],
        ['data2', 2, 4, 4.5, 10, 11]
      ],

      onclick: function(d, i) {
        console.log("onclick", d, i);
        console.log(i.getAttribute('cx'));
        var setCX = Number(i.getAttribute('cx'));

        document.getElementById("someTemplate").$.addAnnotation.toggle()

        var svg = d3.select("svg");

        var circle = svg.append("circle")
          .attr("cy", 10)
          .attr("cx", (setCX + 40))
          .attr("r", 5);

      }
    }
  });

  function getAnnotation() {

    var annotationSource = document.getElementById("someTemplate").$.annotationSource;
    var toolText = annotationSource.value;

    console.log(toolText);

  }

<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>

<template id="someTemplate" is="auto-binding">

  <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
    <core-header-panel flex id="annotation-box">
      <core-toolbar class="graph-sets-header">
        <span flex>TEST</span>
      </core-toolbar>
      <br>
      <paper-input-decorator label="Add your annotation">
        <paper-autogrow-textarea>
          <textarea id="annotationSource"></textarea>
        </paper-autogrow-textarea>
      </paper-input-decorator>
      <paper-button dismissive hover>Cancel</paper-button>
      <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
    </core-header-panel>
  </paper-action-dialog>

</template>

<div id="graph">
</div>

【讨论】：

所以这是一个愚蠢的问题（因为我仍在学习 Polymer 的技巧）——将模板放在原本“正常”的 html 页面中间会导致任何问题吗？

【解决方案2】：

好的，不使用模板我已经使用 window.event 来获取被点击的纸质按钮元素，然后从那里抓取 annotation-box 元素，然后使用 querySelector 来获取 annotationSource 元素。也许有更好的方法，但它有效

var chart = c3.generate({
   bindto: '#graph',
   padding: {
     top: 30
   },
   data: {
     xs: {
       'data1': 'x1',
       'data2': 'x2',
     },
     columns: [
       ['x1', 1, 3, 4, 5, 7, 10],
       ['x2', 3, 5, 7, 10, 12],
       ['data1', 2, 3, 6, 7.5, 8, 9.5],
       ['data2', 2, 4, 4.5, 10, 11]
     ],

     onclick: function(d, i) {
       console.log("onclick", d, i);
       console.log(i.getAttribute('cx'));
       var setCX = Number(i.getAttribute('cx'));
       document.querySelector('#addAnnotation').toggle()

       var svg = d3.select("svg");

       var circle = svg.append("circle")
         .attr("cy", 10)
         .attr("cx", (setCX + 40))
         .attr("r", 5);

     }
   }
 });

 function getAnnotation() {

   var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target;
   var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value;
   console.log(toolText);

 }

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">

<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>

<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
  <core-header-panel flex id="annotation-box">
    <core-toolbar class="graph-sets-header">
      <span flex>TEST</span>
    </core-toolbar>
    <br>
    <paper-input-decorator label="Add your annotation">
      <paper-autogrow-textarea>
        <textarea id="annotationSource"></textarea>
      </paper-autogrow-textarea>
    </paper-input-decorator>
    <paper-button dismissive hover>Cancel</paper-button>
    <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
  </core-header-panel>
</paper-action-dialog>

<div id="graph">
</div>

【讨论】：