如何解析包含queryselector的函数参数

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

Answer 1

您需要更改

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

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