javascript - Vaadin Combo-Box: value プロパティを使用して選択した項目のインデックスを渡す

Question

コンボボックスで選択したパターンのインデックス番号を識別しようとしています。別の関数が正しい場所にあるファイルから読み取るために、このインデックス値を渡す必要があります。基本的に、コンボボックスでパターンを選択すると、インデックスに基づいて、選択したパターンに関連付けられた仕様を検索できます。私の知る限りでは、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 が指定されていたため、理論的にはこれは発生しないはずでした。 出力のスクリーンショット

{ pattern : { label: "A-3 Piece Random", value: 0 } }

ソリューションセクションに向けた取り組み:

____________(4月27日午後7時)___________

使用する推奨ソリューション、

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


        });
    });
};

「値が変更された」トリガーを使用するように提案された変更を行いました。2つのわずかな問題で非常にうまく機能します。まず、各コンソールログ呼び出しを 2 回返します (理由は不明です)。次に、最初のコンボボックス項目を選択すると、値が返されますが、ラベルが選択済みとして設定されません。これは他のコンボボックス項目の問題ではありませんが、ラベルを設定するには最初の項目を 2 回選択する必要があります。デモンストレーションについては、次の短いビデオをご覧ください: https://youtu.be/yIFc9SiSOUM . このグラフィカルなグリッチは、ユーザーがパターンを選択したことを知っていても、パターンを選択しなかったと考えるため、ユーザーを混乱させる可能性があります。最初のアイテムが選択されたときにラベルが設定されていることを確認するソリューションを探しています。

javascript - Vaadin Combo-Box: value プロパティを使用して選択した項目のインデックスを渡す

1 に答える 1

Related

Reference