Как мне разобрать этот параметр функции, который включает в себя queryselector? - PullRequest
Новая
       4

Как мне разобрать этот параметр функции, который включает в себя queryselector?

0 голосов
/ 14 апреля 2020

Кодовый контекст

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

Задача

Я пытаюсь сделать конструкцию функции более удобной для пользователя. В настоящее время, чтобы вызвать его, он выглядит следующим образом: 

var obj = new MyBind(document.querySelectorAll('[data-bind="total"]'), 1234);

Ошибка: Связанные элементы не обновляются.

В идеале я хочу иметь возможность пройти единственный параметр. Но для этого первого раунда рефакторинга я хочу просто передать имя элемента. Вот так: 

var obj = new MyBind("total", 1234);

Неудачные попытки

Я безуспешно пробовал следующее: 

// inside my function
this.elements = document.querySelectorAll(`[data-bind="${elements}"]`);

Live Demo

https://jsbin.com/qakutudole/edit?html, js, вывод

Кто-нибудь знает, почему это не работает?

Исходный код

Вот вся функция : 

function MyBind(elements, data) {

    this.data = data;
    this.elements = elements;
    //this.elements = document.querySelectorAll(`[data-bind="${elements}"]`);

    for( var i = 0; i < elements.length; i++ ) {

        if(elements[i].tagName == 'INPUT' || elements[i].tagName == 'SELECT' || elements[i].tagName == 'TEXTAREA' ) {
            elements[i].value = data;
        } else if( elements[i].tagName == 'DIV' || elements[i].tagName == 'SPAN' || elements[i].tagName == 'B' ) {
            elements[i].innerHTML = data;
        }

        elements[i].addEventListener("change", this, false);
    }

}

MyBind.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "change": this.change(event.target.value);


    }
};



MyBind.prototype.change = function(value, updateAmounts) {

    updateAmounts = typeof updateAmounts !== 'undefined' ? updateAmounts : true;

    this.data = value;

    for( var i = 0; i < this.elements.length; i++ ) {

        if(this.elements[i].tagName == 'INPUT' || this.elements[i].tagName == 'SELECT' || this.elements[i].tagName == 'TEXTAREA' ) {
            this.elements[i].value = value;
        } else if( this.elements[i].tagName == 'DIV' || this.elements[i].tagName == 'SPAN' || this.elements[i].tagName == 'B' ) {
            this.elements[i].innerHTML = value;
        }        

    }


    if( updateAmounts === true ) {
        alert("Updating amounts!");
    }

};

var obj = new MyBind(document.querySelectorAll('[data-bind="invoice_total"]'), 1234);
//var obj = new MyBind("invoice_total", 1234);

1 Ответ

1 голос
/ 15 апреля 2020

Вы захотите изменить 

function MyBind(selector, data) {
//              ^^^^^^^^
    const elements = document.querySelectorAll(`[data-bind="${selector}"]`);
//  ^^^^^^^^^^^^^^                                            ^^^^^^^^
    this.data = data;
    this.elements = elements;

так, чтобы переменная elements, которую вы будете использовать впоследствии в коде, фактически содержала элементы, а не была строкой.

...