Polymer

Question

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

<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

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

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

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

Answer 2

Polymer 有一个很好的功能，称为自动节点查找，因为任何元素的 id 仅在阴影子树下才有意义 Polymer 将其保存在 instance.$ 下，其中 instance 是 [= 的任何实例15=] 你创造了。

在像 ready 这样的任何方法中，您可以使用 instance.$ 访问具有 id 的任何元素，因此而不是：

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

您可以使用：

var me = this;
document.querySelector('#id111').addEventListener('click', function (e) {
   var source = me.$.textsrc;
   alert(source.value)
}

有关此功能的更多信息here

奖励： textsrc 输入也可以使用以下查询通过 querySelector 访问：

var textSrcEl = document.querySelector('html /deep/ #textSrc');

不过这是个坏主意，如果你有多个 proto-element 的实例，那么 querySelector 只会得到第一个，你会得到更多关于阴影选择器的信息 dom here

Polymer - 访问自定义元素内的 DOM 输入元素

Polymer - Accessing DOM input element inside a custom element

javascript

jquery