Создайте список настроек с помощью кнопок Next и Previous в DOM процедурно

Question

Я хотел создать список настроек, которые пользователь может изменить в HTML процедурно через javascript.

Примерно так: Quality: - 0 +

Мой подход к этому заключался в создании класса Option со свойством value и методов prev() и next(), которые изменяют значение в пределах своего диапазона. Я расширяю этот класс, чтобы он мог быть Range, Bool и т. Д. Это работает нормально.

Моя проблема в том, что я не могу включить это в HTML. Мое текущее решение работает только для последней созданной опции, другие не запускают функции события onclick, и даже если бы они это сделали, я не чувствую, что это правильный подход. Как я могу сделать эту работу элегантным способом?

Я попробовал решение, показанное в этом вопросе , но оно не позволяет мне получить доступ к экземпляру класса с this.

class UIManager {
    constructor (wrapperID, settings) {
        this.wrapper = document.getElementById(wrapperID)
        this.settings = settings
    }
    updateUI () {
        this.wrapper.innerHTML = ``
        for (let id = 0; id < this.settings.options.length; ++id) {
            let option = this.settings.options[id]

            this.wrapper.innerHTML += `
            <li>
                <div class="label">
                    ${option.name}
                </div>
                <div class="option">
                    <input id="prev${id}" class="open" type="button" value="<">
                    ${option.value}
                    <input id="next${id}" class="close" type="button" value=">">
                </div>
            </li>
            `
            let prevButton = document.getElementById(`prev${id}`)
            let nextButton = document.getElementById(`next${id}`)

            prevButton.onclick = _ => {
                this.settings.options[id].prev()
                this.updateUI()
            }
            nextButton.onclick = _ => {
                this.settings.options[id].next()
                this.updateUI()
            }
        }
    }
}

Answer 1

Ответ на вопрос, который вы связали в качестве потенциального решения , можно использовать до тех пор, пока вы связываете член экземпляра класса this с анонимной функцией, используя Function.protoype.bind .

Код будет выглядеть примерно так (используя ранее связанный ответ в качестве отправной точки):

for ( var i = 0; i < itemLists.length; i++ ) (function(i){ 
  itemLists[i].onclick = function() {
      // do something using `this`
  }
}).bind(this)(i);

Вы упомянули в комментариях, что это не сработало, но что это было связано с перезаписью innerHTML, а не из-за привязки.

Надеюсь, это даст небольшую часть большей картины.

Answer 2

Попробуйте закрыть для сохранения значений, необходимых для функций, созданных внутри цикла.

Примерно так:

prevButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].prev();
        updateUI();
    };
})(this.settings, this.updateUI); 

nextButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].next();
        updateUI();
    }
})(this.settings, this.updateUI);