SPA 中的 ID 空间

Question

寻求高级 DOM/JS 架构师的答案。

我的问题是在另一个 question/answer 的上下文中，它谈到在 SPA 中拥有干净的 id 空间。

由于某些限制，我不能使用任何数据绑定框架，而是使用普通的普通 html，因此期待了解数据绑定框架内部固定的高级架构师的建议。

例如，一旦 http GET 调用返回，我将生成一些 DOM 记录。

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 并删除它。

所以关键是我不能没有 ID，我必须在 dom 中有一个 id 用于所有记录，如果我有 SPA 的多个部分，我会在 id 前面加上一个命名空间字符串，当然，如果我有几个深度嵌套的部分，它会变得混乱。

即使我使用了一些数据绑定框架，我仍然必须从数组中删除该特定对象，可以调用 digest 或任何其他方式将其删除。

所以问题就变成了，有没有办法让 CRUD 工作而不用在普通 JS 中声明 id？

根据 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。