javascript - 如何解析这个包含查询选择器的函数参数？

Question

代码上下文

我们正在尝试使我们自己的自定义数据绑定功能工作。到目前为止，一切都很好，因为我们让它工作了，但现在我们正在重构。

问题

我正在尝试使函数的构造更加用户友好。目前要调用它，它看起来像这样：

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}"]`);

现场演示

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);

标签： javascriptjavascript-objects

Answer 1

你会想要改变

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

以便elements您随后在代码中使用的变量实际上包含元素，而不是字符串。