web-dev-qa-db-ja.com

getElementById in Polymer element

Polymerカスタム要素でgetElementByIdを使用するにはどうすればよいですか？

これが私の要素です：

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

<dom-module id="bb-calendar">

  <template>

    <style is="custom-style" include="shared-styles"></style>

    <div class="card">
            <paper-toolbar>
                <div title>Calendar</div>
            </paper-toolbar>
            <div id="hideme">
                <div>this should be hidden</div>
            </div>
    </div>

  </template>

  <script>

    Polymer({

      is: 'bb-calendar',

      ready: function() {
        document.getElementById("hideme").style.display = 'none';
      }

    });

  </script>

</dom-module>

コードを実行すると、次のエラーメッセージが表示されます。Uncaught TypeError: Cannot read property 'style' of null

明らかに私は何か間違ったことをしているのですが、何が起こっているのかわかりません。

javascripthtmlpolymerpolymer-1.0
11
Zvi Karp

私は使用します

ready: function() {
  this.$.hideme.style.display = 'none';
}

要素が<template dom-if...>または<template dom-repeat...>内にある場合

ready: function() {
  this.$$('#hideme').style.display = 'none';
}

最後に、クラスバインディングを使用してクラスを要素にバインドし、プロパティを更新してその変更を反映し、CSSを使用してstyle.displayを設定します。

<template>
  <style>
    .hidden { display:none; }    
  </style>
   ...
  <div class$="{{hiddenClass}}">
    <div>this should be hidden</div>
  </div>

Polymer({

  is: 'bb-calendar',

  properties: {
      hiddenClass: String,
  },

  ready: function() {
    this.hiddenClass = 'hidden';
  }

});
11
Günter Zöchbauer

問題は、readyコールバックが起動されたときに、要素がドキュメントDOMにアタッチされていないことです。要素を単に表示/非表示にするには、次のように非表示の属性を使用できます。<div hidden$="{{!shouldShow}}">

0
Kjell