SPA中的ID空間

Question

尋找高級DOM/JS架構師的答案。

我的問題是在另一個question/answer的背景下，它討論了在SPA中乾淨的ID空間。

由於受到一些限制，我無法使用任何數據綁定框架，而是普通的vanilla html，因此期待高級架構師的建議，他們知道內部數據綁定框架的內部固定。

例如，我一旦生成一些DOM記錄http GET調用返回。

Brand.prototype.appendChild = function(data) { 
    var self = this; 
    var li = document.createElement("li"); 
    li.setAttribute("id", "brand_" + data.id); 
    li.innerHTML = "<p>" + data.name + "</p>"; 

    var p = document.createElement("p"); 
    p.innerHTML = "Delete"; 
    li.appendChild(p); 

    p.addEventListener("click", function(){ 
     Brand.prototype.delete.call(self, {id: data.id}); 
    }); 

    this.element.appendChild(li); 
}; 

// http delete happens outside via delegate, so it's async 
Brand.prototype.delete = function(data) { 
    this.delegate.requestConfirm(new model.vo.RequestVO(data, AppConstants.DELETE), "Are you sure you want to delete?"); 
}; 

// when http delete request returns, it passes the original data request, I've to find the DOM and delete it 
Brand.prototype.removeChild = function(data) { 
    var element = document.getElementById("brand_" + data.id); 
    element.parentNode.removeChild(element); 
}; 

輸出看起來像這樣。

<li id="brand_0"> 
    <p>Brand Name</p> 
    <p>Delete</p> 
</li> 

，如果在刪除用戶點擊，這是一個異步操作（不承諾），而一旦刪除請求返回，我找了特定ID並刪除它。

所以關鍵是我沒有身份證我不能有我的方式，我必須在所有記錄的dom中有一個id，如果我有一個SPA的幾個部分，我在id前加一個命名空間字符串，當然如果我有幾個深嵌套的部分，它會變得混亂。

即使我正在使用某種數據綁定框架，我仍然需要從數組中刪除該特定對象，可以調用digest或任何可以刪除的對象。

所以問題變成了，有沒有方法可以在普通香草JS中聲明ID的情況下進行CRUD工作？

編輯在guest271314的建議後。

Brand.prototype.appendChild = function(data) { 
    var self = this; 
    var li = document.createElement("li"); 
    li.innerHTML = "<p>" + data.name + "</p>"; 

    var p = document.createElement("p"); 
    p.innerHTML = "Delete"; 
    li.appendChild(p); 

    p.addEventListener("click", function(event){ 
     Brand.prototype.delete.call(self, {id: data.id, event: event}); 
    }); 

    this.element.appendChild(li); 
}; 

Brand.prototype.removeChild = function(data) { 
    var element = data.event.target; 
    var grandparent = element.parentNode.parentNode; 
    grandparent.removeChild(element.parentNode); 
}; 

Answer 1

可以使用event.target或event.currentTarget事件處理程序中獲得的，而不是依靠一個元素的id事件的目標。