Vaadin Combo-Box：使用value属性传递所选项的索引

时间：2016-04-25 21:09:15

标签： javascript vaadin vaadin-elements

我试图辨别在组合框中选择的模式的索引＃。我需要传递这个索引值，以便另一个函数从正确位置的文件中读取。基本上，选择组合框中的模式将允许我根据索引查找与所选模式相关的规范。据我所知，Vaadin Combobox没有与组合框项目相关联的索引，但您可以传递与显示的标签不同的值：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() { }};

ComboBox的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。 输出屏幕截图 Broken Labels

它说： {pattern：{label：“A-3 Piece Random”，值：0}}

致力于解决方案部分：

___________（4月27日，下午7:00）___________

建议使用的解决方案，

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

在显示标签时效果很好： Working labels

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

// 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。这种图形故障会让用户感到困惑，因为他们认为用户在知道模式时没有选择模式。寻找解决方案以确保在选择第一个项目时设置标签。

1 个答案:

答案 0 :(得分：0)

当您设置对象时，您正在将当前字符串设置为console.log(myIterator.throw(new Error('Bullocks!'))); 。

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

此外，我建议初始化var patternObj = { pattern: { label: patternLbl, value: ind } };回调中的patterns = []，以确保在数据发生变化时您不会在done中留下任何旧项目。

相关问题
最新问题