2

在 Polymer 2 中，我试图更改urls影子 DOM 中的一个属性。我尝试访问它var loader。我努力了：

var loader = document.querySelector( '#urls' );
var loader = this.shadowRoot.querySelector('#urls');
var loader = Polymer.dom(this).querySelector('#urls');
var loader = this.$.urls;
var loader = this.$$.urls;
var loader = Polymer.dom(this.root).querySelector('#urls')

但没有一个有效。我做错了什么？

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="ami-loader2.html">

<dom-module id="my-view2">
  <template is="dom-bind" id="urls">
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <ami-loader2 urls="[[urls]]"></ami-loader2>
  </template>

  <script>
    class MyView2 extends Polymer.Element {
      static get is() { return 'my-view2'; }
    }

    window.customElements.define(MyView2.is, MyView2);

    var t2 = ['36444280', '36444294', '36444308', '36444322', '36444336'];
    var urlsstring = t2.map( function( v ) {

      return 'https://cdn.rawgit.com/FNNDSC/data/master/dicom/adi_brain/' + v;

    } );

    //var loader = document.querySelector( '#urls' );
    //var loader = this.shadowRoot.querySelector('#urls')
    //var loader = Polymer.dom(this).querySelector('#urls')
    var loader = this.$.urls

    loader.urls = urlsstring;

  </script>
</dom-module>

我可以<ami-loader2>在此处的文档中看到： ami-loader2 在文档中

4

1 回答 1

3

如果你想通过一个 ID 访问一个元素，你实际上必须提供一个 id :p

<ami-loader2 id="loader" urls="[[urls]]"></ami-loader2>

那么您可以使用this.$.loader或者如果您希望可以访问该元素this.shadowRoot.querySelector('#loader')

这将给您返回 ELEMENT。因此，您可以使用此元素提供的函数/api。

但是当您使用数据绑定来实际为这些元素提供一些数据时，实际选择这个值作为“原始”数据要容易得多。这将是公正this.url的。

你实际上可以这样做this.urls = 'http://my-url.com'，它将为这个元素设置。

确保将您希望绑定的数据也正确定义为属性，并且所有代码都在您的类中。

<script>
class MyView2 extends Polymer.Element {

    static get is() { return 'my-view2'; }

    static get properties() {
        return {
            urls: {
                type: String,
                reflectToAttribute: true
            }
        };
    }

    connectedCallback() {
        super.connectedCallback();
        // your code 
    }

}

customElements.define(MyView2.is, MyView2);
</script>

只是作为参考。您将使用这样的元素 <my-view2 urls="http://my-path.com">...</my-view2>

以下内容非常具体到您的代码以及我对我认为您想要做的事情的解释。

如果您只想在元素内动态设置变量并且不想在 ami-loader2 中实际更改它。您可以删除 ，reflectToAttribute: true但保留其余部分并使用this.urls = 'http://my-path.com'.

于 2017-05-13T09:35:06.480 回答