Question

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

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

由于某些限制，我不能使用任何数据绑定框架而不是普通的html html，所以期待高级架构师的建议，他们知道数据绑定框架内部如何在内部进行操作。< / p>

例如，一旦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并删除它。

所以关键是我没有身份证就没有办法，我必须在dom中拥有所有记录的身份证，如果我在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。

SPA中的ID空间

1 个答案: