javascript - 将 HTML 元素绑定(bind)到 Javascript 对象并将对象存储在数组中 - 使用子元素的输入值更新对象

Question

在 vanilla JavaScript 中，我如何将一个元素绑定(bind)到一个对象，以便如果对象的子元素有一个值，我可以用它更新对象？需要兼容IE10+及所有其他浏览器。

通过按钮，我动态添加了一个包含表单输入的元素 (createElement())。创建元素时，它还会创建一个对象，该对象也应该是元素，因此我可以在更改时使用输入值更新对象。

然后我将每个新对象存储在一个数组中。

我遇到的问题是将输入值与正确的对象连接起来。我尝试遍历数组，希望用事件目标的当前输入值依次更新每个对象，但没有成功。我尝试注册元素(已弃用)和其他各种东西，但我不太清楚如何将输入链接到容器对象 (lineObject)。

我真的需要一些帮助来解决这个问题并理解如何以我需要的方式将元素绑定(bind)到对象。

//lineNumber *** // 
let lineNumber = document.querySelectorAll('.lineNumber');
let numberOfLines = lineNumber.length;
//first instance of input element
let lineText = document.querySelector('.lineText');
//first input value of element
let lineTextValue = document.querySelector('input[name="lineText"]').value;
//create initial lineObject for first line
let lastLine = lineNumber[numberOfLines - 1];
let lineContainer;

//lineNumber object constructor
function LineObject(lineText, writable) {
	//set properties
	this.lineText = lineText;
	this.writable = writable;
} 

//new object at new lineNumber element, set values
let lineObject = new LineObject(lineTextValue, true);

//create array containing initial line object
let lineArray = [lineObject];

//line functions
(function lineGeneration(){

		//add or remove lines
		document.addEventListener('click', function(e) {

			//this
			let self = e.target;

			// has class .addLine
			if (hasClass(self, 'addLine')) {
				
				//call function to get variables
				insertLineHTML();
        
				//clone new line after the last line\
				self.parentElement.parentElement.parentElement.parentElement.parentElement.appendChild(lineObject.cloneNode(true));

        //lineNumber input location
        let newlineTextInput = self.parentElement.parentElement.parentElement.parentElement.nextElementSibling.querySelector('input[name="lineText"]');
				
				//input value of new element
        let lineTextValue = newlineTextInput.value;//normally "" when created unless placeholder text
				
				//new object at new lineNumber element
       	lineObject = new LineObject(lineTextValue, true);
				
        //add new object to lineArray
        lineArray.push(lineObject);
				
				refreshLineNodeList();
  
			} 

	}); 

    //combine accordion / refresh
    function refreshLineNodeList(){

          //refresh number of elements in nodelist
          lineNumber = document.querySelectorAll('.lineNumber');

          //get new length
          numberOfLines = lineNumber.length; 

        }

    //line html and vars
    function insertLineHTML(){
        lineObject = document.createElement('div');
        lineObject.setAttribute('class', 'lineNumber');
        lineObject.innerHTML = `	
            <div class="accordion-title">
            <h3>Line 2</h3>
            </div>

            <div class="input-section">	

            <div class="input-row">

            <div class="input-container">
            <label>Line 2 :</label>
            <input type="text" name="lineText" value="" class="lineText">
            </div>

           
            <div class="input-row">

            <div class="button-container">
            <div class="warning"></div>
            <button class="addLine">Add Another Line</button>

            </div>
            </div>
            </div>`;
        
            console.log(lineNumber);
        }
	
})();

//lineText addEventListener update object value
document.addEventListener('keyup', function(e) {
  let self = e.target;//input field
	let lineTextValue = self.value;
	
	// has class .lineText
	if (hasClass(self, 'lineText')) {      

      //for each lineObject in LineArray 
       //lineArray.forEach(function(arrayObject) {
        
        //update lineObject HTMLelement.prototype
       Object.defineProperty(lineObject, 'lineText', {
   
            //update object value to event target value
         get: function() {        
               return this.lineTextValue;//how can I get the right lineObject object from the array when I update the input  
             },
          
          set: function(lineTextValue) {
            this.lineText = lineTextValue;//how can I aet the right lineObject object in the array when I update the input
          }          
       });
        //debugging
        //console.log('objectProperty = ' + arrayObject.lineText);
        console.log('this.lineText = ' + this.lineText);  
				console.log('Object.entries(lineObject) - ' + Object.entries(lineObject));
        //console.log('lineObject.lineText = '+ lineObject.lineText);
        //console.log('lineTextValue = '+ lineTextValue);
      //});
  };
});

let button = document.getElementById('test');
button.addEventListener( "click", testFunction );
function testFunction(){	

	button.addEventListener( "click", testFunction );
  //console.log('Object.keys(lineObject) - '+ Object.keys(lineObject));
  //console.log('Reflect.ownKeys(lineObject) - ' + Reflect.ownKeys(lineObject));
  //console.log('Object.values - ' + Object.values(lineObject));
  //console.log('lineObject = '+ lineObject.lineText);
  
  //console.log('Object.entries(lineObject) - ' + Object.entries(lineObject));
  //console.log('Object.entries(lineObjectClone) - ' + Object.entries(lineObjectClone));
  
  //console.log('lineObjectClone.lineText = ' + lineObject.lineText);
  //console.log('lineObjectClone[1].lineText = ' + lineObjectClone.lineText);
  //console.log('lineArray[0] = ' + lineArray[0].lineText);
  console.log('lineArray = ' + lineArray);
  console.log('numberOfLines = ' + numberOfLines);
  for(let i = 0; i < numberOfLines; ++i ){
    console.log('lineArray[i].lineText = ' + lineArray[i].lineText)
  }
};

//does the element have the class specified?
function hasClass(elem, className) {
      return elem.classList.contains(className);
};

	

<section>

  <button id="test">Test</button>
    
  <div class="lineNumber">
		<div class="accordion-title">
			<h3>Line</h3>
			
		</div>
		<div class="input-section" style="display: block;">	
			<div class="input-row">

				<div class="input-container">
					<label>Line Text :</label>
					<input type="text" name="lineText" value="" class="lineText">
				</div>
			</div>

			<div class="input-row">

				<div class="button-container">
					<div class="warning"></div>
					<button class="addLine">Add Another Line</button>			
				</div>
	</div>
		</div>
	</div>
  
</section>

Answer 1

一种方法是使用 closure .

闭包的目的是从包含函数中捕获变量，以便在包含函数退出后可以稍后使用这些变量。

一个简单的例子可能是这样的:

let data = {
    nameGenerator: 0
};

function addInput() {
    // generate a new name and property in data object
    let propertyName = String.fromCharCode("a".charCodeAt() + data.nameGenerator++);
    // initialize property value to its name
    data[propertyName] = propertyName;

    // add <div><input value="(property)"></div> to container
    let containerElement = document.getElementById("container");
    let lineElement = document.createElement("div");
    let inputElement = document.createElement("input");
    lineElement.appendChild(inputElement);
    containerElement.appendChild(lineElement);

    // initialize input value (note: this does not bind the two, just initializes)
    inputElement.value = data[propertyName];

    // create a closure that binds the property to the element
    inputElement.addEventListener("keyup", function () {
        // inside this function, propertyName and inputElement 
        // are "captured" in the closure
        data[propertyName] = inputElement.value;
    })
}

请注意，propertyName 和 inputElement 变量是在外部 addInput 函数中定义的，但它们在创建的闭包中被捕获您将匿名函数指定为事件监听器。

这是一个带有完整工作示例的 fiddle :https://jsfiddle.net/b3ta60cn/