Vaadin ComboBox nullの 'addEventListener'プロパティを読み取れません

Question

Vaadin ComboBoxでどのパターンが選択されているかに基づいて画像を表示するイベントリスナーを追加しようとしています。これを行うには、イベントリスナーを持っていたいと思います... ComboBoxの値が変更されたら、画像へのパスをJSONファイルで検索し、選択した画像をdivプレースホルダに表示します。

私の質問セレクタに問題がありますので、私はですので、まだそのレベルのソリューションを構築していません。私が理解したところでは、変数 'c​​ombobox'を作成することができず、イベントハンドラは存在しないため 'combobox'に追加されません。

ページのロードからのエラー出力がある：

Uncaught TypeError: Cannot read property 'addEventListener' of null 

プロジェクトのコードは次のとおり

<div id="patternSelect"> 
      <template is="dom-bind" id="paver"> 
       <div class="fieldset"> 
       <vaadin-combo-box id="cb1" label="Pattern" class="patterns" items="[[patterns]]"></vaadin-combo-box> 
       <br> 
       <vaadin-combo-box id="cb2" label="Color" class="colors" items="[[colors]]"></vaadin-combo-box> 
       </div> 
      </template> 
     </div> 


<script type="text/javascript"> 
    $(document).ready(function() { 
      var combobox = document.querySelector('#cb1'); 
      combobox.addEventListener('value-changed', function(event) { 
       console.log(event.detail.value); 
      }); 

      combobox.addEventListener('selected-item-changed', function(event) { 
       console.log(event.detail.value); 
     }); 
    }); 
</script> 

Answer 1

コンボボックスがtemplateタグ内にネストされているとおり

<template is="dom-bind" id="paver"> 

このテンプレートの内容は、アクティベートされてDOMに追加されるまではアクセスできません。このtutorialをご覧ください。

このアクションが完了していないかのようにあなたのコードにそのルックスを実行するとVaadin /ポリマーは、したがって、負荷にこれらのテンプレートに目を通すと、それらを活性化します - あなたのdocument.querySelector('#cb1')はnullを返すことが原因。周り

粗製の仕事は、タイムアウトであなたのリスナーのコードをラップすることで、すべてがOKに動作します

$(document).ready(function() { 
     addListenersDelayed() 
    }); 
}); 

function addListenersDelayed(){ 
    setTimeout(function(){ 
     addListeners(); 
    }, 1000)  
}; 

function addListeners(){ 

    combobox.addEventListener('value-changed', function(event) { 
     console.log(event.detail.value); 
    }); 

    combobox.addEventListener('selected-item-changed', function(event) { 
     console.log(event.detail.value); 
    }); 
} 

もう一つの方法は、Polymer lifestyle callbacksを使用することです：

// select your template 
var paver = document.querySelector('#paver'); 

// define the ready function callback 
paver.ready = function() { 
    // use the async method to make sure you can access parent/siblings 
    this.async(function() { 
    // access sibling or parent elements here 
     var combobox = document.querySelector('#cb1') 

     combobox.addEventListener('value-changed', function(event) { 
      console.log(event.detail.value); 
     }); 

     combobox.addEventListener('selected-item-changed', function(event) { 
      console.log(event.detail.value); 
     }); 

    }); 
}; 

この1との危険があることですコンポーネントはコールバックが登録される前に準備が整います。基本的に、両方のメソッドは、コードの実行時にテンプレートのDOMが使用可能であることを確認します。