0

我正在尝试识别组合框中所选模式的索引 #。我需要传递此索引值，以便另一个函数从正确位置的文件中读取。本质上，在组合框中选择一个模式将让我根据索引查找与所选模式相关的规范。据我所知，Vaadin 组合框没有与组合框项关联的索引，但您可以传递与显示标签不同的值：https ://vaadin.com/docs/-/part/elements/ vaadin-combo-box/vaadin-combo-box-basic.html（请参阅：将对象用作项目）。这是我正在尝试实现的解决方案，但是它变得很棘手，因为我正在从 JSON 文件动态填充组合框项目。

动态填充项目的代码：

paver = document.querySelector('#paver');
    //alert('script executed');
    patterns = [];
    familyind=y;


    $.getJSON('menu.json').done(function(data){
        //alert('getJSON request succeeded!');

        family = (data.gui[x].family[y].display);

         for(ind = 0; ind < data.gui[x].family[y].pattern.length; ind++){

            var patternLbl = data.gui[x].family[y].pattern[ind].name;
            var patternObj = '{ pattern: { label: "' + patternLbl + '", value: ' + ind + ' } }';

            patterns[ind] = patternObj;
        }
        document.getElementById("cb1").items=patterns;

         })
        .fail(function(jqXHR, textStatus, errorThrown) 
            { 
                alert('getJSON request failed! ' + textStatus); 
            })
        .always(function() { }};

组合框的 HTML

<div id="patternSelect">
            <template is="dom-bind" id="paver">
              <div class="fieldset">
               class="patterns" items="[[patterns]]" item-label-path="pattern.label" item-value-path="pattern.value"></vaadin-combo-box>
              </div>
            </template>
        </div>

当我尝试执行此操作时得到的输出是整个构造的字符串被组装到我的选择中。理论上，这不应该发生，因为在声明组合框时指定了 item-value-path 和 item-label-path。 输出截图 破损的标签

它说： {模式：{标签：“A-3件随机”，值：0}}

致力于解决方案部分：

___________（4 月 27 日晚上 7:00）_______________

建议使用的解决方案，

var patternObj = { pattern: { label: patternLbl, value: ind } };

在显示标签方面效果很好： 工作标签

但是，我使用触发器来检测组合框中的值何时更改并返回新值。这是触发器的代码：

// select 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) {

    // FOR REFERENCE LOG ERRORS, THIS COMMENT IS ON HTML:215    
       console.log(event.detail.value);
       patval = event.detail.value;
       console.log(patval)

        // Do stuff with fetched value


        });
    });
};

我已对使用“值更改”触发器进行了建议的更改。它在处理两个小问题时效果很好。首先，它返回每个控制台日志调用两次（不确定为什么两次）。其次，当我选择第一个组合框项目时，它会返回我的值，但不会将标签设置为选中状态。这不是其他组合框项目的问题，但需要选择第一个项目两次才能设置标签。请观看此短片进行演示：https ://youtu.be/yIFc9SiSOUM 。这种图形故障会使用户感到困惑，因为当他们知道自己有模式时，他们会认为他们没有选择模式。寻找解决方案以确保在选择第一个项目时设置标签。

4

1 回答 1

0

您正在设置一个当前的字符串，patternObj而您应该设置一个对象。

尝试使用其中一个var patternObj = JSON.parse('{ pattern: { label: "' + patternLbl + '", value: ' + ind + ' } }';甚至更简单： var patternObj = { pattern: { label: patternLbl, value: ind } };

另外，我建议初始化回调patterns = []内部，done以确保在patterns数据更改时不会留下任何旧项目。

于 2016-04-26T06:58:36.977 回答