Looking for an answer from a senior level DOM/JS Architect.
My question is in context of the another question/answer where it talks about having clean id space in a SPA.
I can not use any data binding frameworks instead it's plain vanilla html due to some constraints, so looking forward to advice from senior architects who knows inner pinnings of data-binding frameworks of how they do it internally.
For example I'm generating some DOM records once http GET call returns.
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);
};
output looks like this.
<li id="brand_0">
<p>Brand Name</p>
<p>Delete</p>
</li>
and if user click on delete, it's an async operation (no promises), and once the delete request returns, I'm looking up the specific id and deleting it.
So the point is I can't have my way without having an ID, I must have an id in the dom for all the records and if I've several sections of a SPA, i'm prefixing id's with a namespace string and of course it can get messy if I've several sections with deep nesting.
Even if I was using some data binding framework, I still have to remove that specific object from the array can call digest or whatever to have it deleted.
So the question becomes, is there way to have CRUD work without declaring ids in plain vanilla JS?
Edit after guest271314's suggestion.
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);
};
