Question

我刚刚开始使用聚合物＆amp; amp;一切似乎对我来说都很好，除了我无法访问或设置自定义元素下的输入字段的值。请指导我如何访问/设置它的值。代码如下..

<link rel="import" href="../bower_components/polymer/polymer.html">
    <script src="js/snap.svg.js"></script>
    <script src="js/jquery-1.9.0.min.js"></script>
    <polymer-element name="proto-element">
      <template>
        <div class="div2">
       Source:<input type="text" id="textsrc" value="SOURCE"><br>
        Destination: <input type="text" id="textdest"><br>
        Flight:<input type="text" id="textplane"><br>
       </div>
      </template>
      <script>
        Polymer('proto-element',{ 
          ready: function() {
                var s = Snap(900,700);
                var rec1 = s.rect(50,200,150,80);
                var rec2 = s.rect(350,200,150,80);
                    rec1.attr({
                      fill: 'lightblue',
                      stroke: 'lightblue',
                      strokeOpacity: .3,
                      strokeWidth: 10,
                      id : 'id111' 
                    });


                    rec2.attr({
                      fill: 'lightblue',
                      stroke: 'lightblue',
                      strokeOpacity: .3,
                      strokeWidth: 10,
                      id : 'id112' 
                    });

    document.querySelector('#id111').addEventListener('click', function(e) {
    var txtboxval = document.querySelector("proto-element > #textsrc");
    alert(txtboxval.value);

      })
    });
     </script>
    </polymer-element>

Answer 1

Polymer有一个很好的功能叫做自动节点查找，因为任何元素的id只在阴影子树下有意义Polymer将它保存在instance.$下，其中instance是{{1}的任何实例你创造。

在proto-element之类的任何方法中，您都可以使用ready访问任何具有ID的元素，因此而不是：

instance.$

您可以使用：

document.querySelector('#id111').addEventListener('click', function(e) {
var txtboxval = document.querySelector("proto-element > #textsrc");
   alert(txtboxval.value);
})

有关此功能的更多信息here

加分：也可以使用querySelector使用以下查询访问var me = this; document.querySelector('#id111').addEventListener('click', function (e) { var source = me.$.textsrc; alert(source.value) }输入：

textsrc

但这不是一个坏主意，如果你有var textSrcEl = document.querySelector('html /deep/ #textSrc');的多个实例，那么proto-element只会得到第一个，你可以获得关于影子dom {{3}中的选择器的更多信息}

Answer 2

我向您展示了一个快速解决方案，但我认为这不是正确的方法：您应该使用数据绑定[1]来进行此类交互。

https://gist.github.com/alessandro-aglietti/116395f873402488217b

[1] https://www.polymer-project.org/docs/polymer/databinding.html

Polymer - 在自定义元素中访问DOM输入元素

2 个答案: