Question

也许我凝视了太久了。我正在尝试为数据集中的每个项目复制一个节点（一组HTML）。然后，对于每个节点，将node.children.children的值更改为数据集中的相应值。

这里是here。

更新：我清除了克隆的节点并创建了元素，并添加了数据并使它工作。看到这个JSfiddle，但是，我对此不满意。

更新2：我确实也必须在某些时候删除它们。我应该只为每个数据集构建这些节点吗？我每次击键（实时搜索）都会收到数据axios。

我想知道的是，是否有更好的方法。在数据集仅扩展到这三个项目的情况下，这种方法更易于读取/维护。如果它确实扩展了，则必须有人返回并更改列表和变量（prop_list）

这是有人建议的JS和HTML：

member_list = [{
      "model": "members.rider",
      "pk": 1,
      "fields": {
        "firstName": "Shane",
        "lastName": "Cheek",
        "phoneNumber": "222-222-2222",
        "email": "Shane@email.com",
        "active": true
      }
    }, {
      "model": "members.rider",
      "pk": 2,
      "fields": {
        "firstName": "Other",
        "lastName": "Rider",
        "phoneNumber": "333-333-3333",
        "email": "Other@email.com",
        "active": false
      }
    }]
    
    
    
    for (let i in member_list) {
      let name = member_list[i].fields.firstName + " " + member_list[i].fields.lastName;
      let phoneNumber = member_list[i].fields.phoneNumber;
      let email = member_list[i].fields.email;
    
    	let prop_list = [name, phoneNumber, email]
    
      let result_block = document.querySelector("#result_block");
      let result_group = document.querySelector("#result_group");
      let member_data = document.querySelector("#member_data_left");
    
    
      let cloned_result_group = result_group.cloneNode(true);
      result_block.appendChild(cloned_result_group);
      cloned_result_group.style.display = ""
      
      let cloned_member_data = cloned_result_group.querySelector("#member_data_left")
    	cloned_member_data.innerHTML=""
        for (let p in prop_list) {
          let para = document.createElement("p")
          let text = document.createTextNode(prop_list[p])
          para.appendChild(text)
          cloned_member_data.appendChild(para)
        }
      }

  
      <div class="result_block ref" id="result_block">
        <div class="result_group ref " id="result_group" style="display: none">
          <div class="member_data_left" id="member_data_left">
            <p id="first_last_name">name</p>
            <p id="phone">phone number</p>
            <p id="email">email</p>
          </div>
        </div>
      </div>

Answer 1

您应该真正检查一下handlebars.js之类的模板库。它们旨在以最有效和可维护的方式解决您遇到的确切问题。

如果您真的想自己实现它，建议您使用字符串而不是Node实例，并尽量减少DOM操作（appendChild或some_node.innerHTML = '...'），因为这是最昂贵的操作用于浏览器。您可以复制模板的html，并在创建节点之前将其作为字符串进行处理。

例如：

https://jsfiddle.net/6bmjyneq/

let result_block = document.getElementById("result_block")
let result_group_template = document.getElementById("result_group_template").innerHTML
let new_results = []
for ( let i = 0; i < member_list.length; i++ ) {
    let this_result = result_group_template
    for( let field_name in member_list[i].fields ){
        this_result = this_result.replace( field_name, member_list[i].fields[field_name] )
    }
    new_results.push( this_result )
}
result_block.innerHTML = new_results.join("")

JS cloneNode（）并更改子代的值

1 个答案: