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

问题描述：

我有一个复杂的网络应用程序，广泛使用基因敲除。现在，我要动态淘汰赛结合HTML的一个子集转换为静态HTML表示，例如基因敲出生成的HTML到普通的HTML

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

到

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

我怎样才能做到这一点？

如果我理解你的问题的权利，你可以使用开发工具来选择根元素，并复制外HTML一旦申请被渲染 – Ramesh

我想做什么s仅在js中 – Ferenjito

你介意html的副本是否具有原始数据绑定属性以及更新后的样式等？ –

答

通过获取父元素（本例中为#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>

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

相关推荐