J'ai une application web complexe qui utilise beaucoup KO. Maintenant, je veux transformer un sous-ensemble de l'html knock-out lié à une dynamique représentation HTML statique, par exempleHTML généré par Knockout en HTML normal
<div data-bind="style : { width : mywidth} "/> /** mywidth = 40px
à
<div style='width:40px' />
Comment puis-je y parvenir?
Vous pouvez obtenir le rendu HTML actuel en obtenant l'élément parent (#wrapper dans ce cas), puis en créant un nouveau noeud DOM et en y mettant le HTML, en itérant tous les éléments et en supprimant l'attribut data-bind lire le code HTML de retour de nouveau:
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>
Si je comprends bien votre question à droite, vous pouvez utiliser les outils de développement pour sélectionner l'élément racine et copiez le code HTML externe Une fois que l'application est rendue – Ramesh
I vouloir faire thi s dans js seulement – Ferenjito
Cela vous dérange si la copie du html possède les attributs de liaison de données d'origine, ainsi que les styles mis à jour etc? –