SPAのIDスペース

Question

上級レベルのDOM/JS Architectからの回答を探しています。

私の質問は、別の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のいくつかのセクションを持っている場合、名前空間の文字列です。もちろん、深いネスティングを持つセクションがいくつかあると面倒です。

データバインディングフレームワークを使用していても、配列からその特定のオブジェクトを削除する必要があります。digestなどを削除する必要があります。

質問があるので、プレーンバニラJSでidsを宣言せずに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に依存するイベントハンドラ内でイベントのターゲットを得ることができます。