Question

我正在尝试添加一个事件监听器，以根据Vaadin ComboBox中选择的模式显示图像。要做到这一点，我想有一个事件监听器...... 更改ComboBox值后，在JSON文件中查找图像路径，并在div占位符上显示所选图像。

我还没有将解决方案构建到该级别，因为我我的查询选择器出现了问题。据我所知，它无法创建变量＆＃39; combobox＆＃39;因此，事件处理程序不会被添加到组合框中。因为它不存在。

加载页面时输出的错误是：

<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>

该项目的代码是：

var jobAssignments = new List<JobAssignment>
            {
                new JobAssignment { JobID = jobs.Single (j => j.Status == Status.New, j => j.Priority == Priority.High).JobID,
                    TechnicianID = technicians.Single(c => c.LastName == "Dion").TechnicianID,
                    AssignmentDate = DateTime.Parse("2005-09-01")}

Answer 1

由于组合框嵌套在template标记中：

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

此模板的内容在被激活后无法访问，因此被添加到DOM中，请查看此tutorial。

Vaadin / Polymer将在加载时查看这些模板并激活它们，因此当您运行代码时，它看起来好像此操作尚未完成 - 导致document.querySelector('#cb1')返回null。

粗略的解决方法是将侦听器代码包装在超时中，一切正常：

$( 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);
        });

    });
};

这个问题的危险在于，在回调注册之前，组件就已准备就绪。从本质上讲，这两种方法都可以确保在执行代码时模板的DOM可用。

Vaadin ComboBox无法读取属性＆＃39; addEventListener＆＃39;为null

1 个答案: