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

HTML для ComboBox

<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", значение: 0 } }

РАБОТА К ПУТИ РЕШЕНИЯ:

___________(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. Этот графический сбой может сбить с толку пользователя, так как он будет думать, что не выбрал шаблон, когда знает, что у него есть. Ищите решение, чтобы убедиться, что метка установлена ​​при выборе первого элемента.

Answer 1

Вы устанавливаете строку в patternObj в то время как вы должны установить объект.

Попробуйте использовать любой var patternObj = JSON.parse('{ pattern: { label: "' + patternLbl + '", value: ' + ind + ' } }'; или даже проще: var patternObj = { pattern: { label: patternLbl, value: ind } };

Кроме того, я бы рекомендовал инициализировать patterns = [] внутри done обратный вызов, чтобы убедиться, что вы не оставляете старые предметы в patterns когда данные меняются.