在 Polymer 中获取文本字段的值

Question

我有一个简单的纸质输入，我试图从中获取价值，但出于某种原因，我没有任何运气。这是我设置按钮和 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 中图表上的任何点 - 这样做会调出纸张输入框，我想用它来创建注释......最终将注释文本添加到将鼠标悬停在我生成的点上时会出现的工具提示

Answer 1

不使用模板就可以了我已经使用 window.event 获取了被单击的纸质按钮元素，然后从那里获取了注释框元素，然后使用 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>

Answer 2

使用 'auto-binding' 的模板可以更轻松地访问 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 中获取文本字段的值

Getting the value of a textfield in Polymer

javascript

polymer

material-design