基因敲出生成的HTML到普通的HTML

Question

我有一個複雜的網絡應用程序，廣泛使用基因敲除。現在，我要動態淘汰賽結合HTML的一個子集轉換爲靜態HTML表示，例如

<div data-bind="style : { width : mywidth} "/> /** mywidth = 40px 

到

<div style='width:40px' /> 

我怎樣才能做到這一點？

Answer 1

通過獲取父元素（本例中爲#wrapper），然後創建一個新的DOM節點並放入其中的HTML，迭代所有元素並刪除data-bind屬性再次讀取HTML回到了它：

var model = { 
 
    mywidth: ko.observable(40), 
 
    gethtml: function() { 
 
    //Get current HTML 
 
    var html = document.getElementById('wrapper').innerHTML; 
 
    
 
    //Create "fake" element to hold it 
 
    var d = document.createElement('div'); 
 
    d.innerHTML = html; 
 
    
 
    //Loop all child elements in fake element 
 
    var elements = d.getElementsByTagName('*'); 
 
    
 
    //remove data-bind from each 
 
    for (var i = 0; i < elements.length; i++) { 
 
     elements[i].removeAttribute('data-bind'); 
 
    } 
 
    
 
    //finally log the resulting HTML 
 
    console.log(d.innerHTML); 
 
    } 
 
} 
 
ko.applyBindings(model);

div.ex { 
 
    border:1px solid black; 
 
    display:inline-block; 
 
    height:20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="ex" data-bind="style: { width : mywidth() + 'px'}"></div> 
 
</div> 
 

 
<div> 
 
    Set width: <input data-bind="value: mywidth"> 
 
    <button data-bind="click: gethtml">Log Current HTML</button> 
 
</div>