SetValue не работает с зависимым пользовательским интерфейсом Earth Engine. Выберите виджет

Я работаю над приложением Earth Engine, где у меня есть 2 виджета типа ui.Select, которые зависят друг от друга (двунаправленно зависят). То есть, когда я делаю изменение в одном из них, он меняет список в другом и наоборот.

Поведение правильное, за исключением того, что когда я хочу повторно выбрать вариант, который был до изменения, он не работает. Благодаря сценарию генератора элементов, который заполняет виджеты, всегда уверен, что предыдущий выбор находится в списке новых (измененных) элементов.

Вот две реализации виджетов

var select_date_init = ui.Select({
  items: Object.keys(dates_init),
  onChange:function(key) {
    var selected_end = select_date_end.getValue();
    var selected_init_end_date = dates_init[key][1];
    var new_list = Object.keys(get_dates_list(selected_init_end_date,''));
    select_date_end.items().reset(new_list);
    //select_date_end.items = new_list
    
    if (selected_end !== null){
      select_date_end.setValue(selected_end,false)
    }else{
      select_date_end.setValue(null,false)
    }
  },
  placeholder: 'Seleccionar semestre 1...'
});

var select_date_end = ui.Select({
  items: Object.keys(dates_end),
  onChange: function(key) {
    var selected_init = select_date_init.getValue();
    var selected_end_init_date = dates_init[key][0];
    var new_list = Object.keys(get_dates_list(system_date_init,selected_end_init_date));
    select_date_init.items().reset(new_list);
    //select_date_init.items = new_list;
    
    if (selected_init !== null){
      select_date_init.setValue(selected_init,false)
    }else{
      select_date_init.setValue(null,false)
    }
  },
  placeholder: 'Seleccionar semestre 2...'
});

Проблема, похоже, в setValue() части скрипта. Элементы двух виджетов корректно изменены, но после действия изменения всегда отображается текст по умолчанию «Выборочный семестр 1...» или «Выборочный семестр 2...».

Мне нужно следующее действие:

Первый шаг:
Выберите из 1 -> это изменит список на 2 (изначально пустой, поэтому предварительный выбор не требуется)
Второй шаг:
Выберите из 2 -> это изменит список на 1 (но сохраните выбранный вариант в 1)
Если пользователь хочет:
Изменить выбор с 1 (или 2) -> обновить другой список -> сохранить предварительно выбранные параметры

Вот ссылка на полностью рабочий скрипт https://code.earthengine.google.com/b251b24ffbc37775e4e5eede8dcbd11f

Пожалуйста, сделайте вашу коллекцию 'users/dinama/cuenca_santa_lucia' общедоступной, чтобы мы могли воспроизвести ваш код.

Luis Lizcano 21.03.2022 20:21

@LuisLizcano, готово. Коллекция доступна для всех. Я просто понимаю, что когда я использую setValue, значение действительно выбирается (если я печатаю getValue, оно показывает правильную строку), но это не отражается в представлении (виджет продолжает показывать метку «Seleccionar semestre...» )

Martin Fernandez Campos 22.03.2022 21:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Функция onChange вашей кнопки № 2 каждый раз сбрасывает вашу кнопку № 1. Вам нужно только раскомментировать строки 209-216 вашего кода, поэтому функция onChange вашей переменной var select_date_end выглядит так:

var select_date_end = ui.Select({
  items: Object.keys(dates_end),
  onChange: function(key) {
    var selected_init = select_date_init.getValue();
    var selected_end_init_date = dates_init[key][0];
    var new_list = Object.keys(get_dates_list(system_date_init,selected_end_init_date));
  },
  placeholder: 'Seleccionar semestre 2...'
});

См. код: https://code.earthengine.google.com/9e2d4f13e9bfa57e1df3673a6d82684e

Другие вопросы по теме