Javascript Girl
  1. Javascript Girl
  3. Utilisez l'élément virtuel knockoutjs pour créer une partie html en vol
Intereting Posts
Obtenir l'espace blanc du type de saisie du mot de passe à la portée? Problèmes de portée dans Javascript lors du passage d'une fonction anonyme à une fonction nommée avec une variable locale Existe-t-il un moyen de définir le titre de la page par liaison de données en utilisant Knockout.js? Comment passer la référence du navigateur à React Native <Drawer />? Sélectionnez2 plusieurs versions sur la même page / site Propriété jQuery min / max du tableau d'éléments JQuery click off element event Protractor + xvfb + test de sélénium se bloque sur Jenkins Date de date de javascript Utilisation de Google Closure Templates avec jQuery Obtenir le nom de la variable. Javascript "réflexion" Paypal Express Checkout Security avec Cilent Ajax Call Chargez javascript via la console Firebug Existe-t-il un gain de performance dans l'inclusion de tags <script> par opposition à l'utilisation d'eval? UIWebview JS Performance est-il plus lent que le safari mobile sur iOS 6/7?

Utilisez l'élément virtuel knockoutjs pour créer une partie html en vol

J'essaie d'utiliser "élément virtuel" avec liaison html pour créer une partie html à la volée mais a échoué avec un message: "La liaison" html "ne peut pas être utilisée avec des éléments virtuels". Voici le jsfiddle: http://jsfiddle.net/d3Dpp/ .

Quelqu'un sait s'il y a une solution de contournement?

Eh bien, après avoir joué avec KO, je vois que c'est possible.

L'exemple de travail est ici

http://jsfiddle.net/d3Dpp/42/

Malheureusement, cela nécessite la duplication de certaines fonctionnalités de neutralisation interne

METTRE À JOUR

KnockoutJS 2.2.1 a ajouté des éléments virtuels liés à l'exportation, donc il est disponible même dans la version minifiée: 

 ko.exportSymbol('virtualElements.allowedBindings', ko.virtualElements.allowedBindings);

Cela signifie qu'une meilleure solution pour la liaison html est possible – voir la réponse de Martijn .

Basé sur le code d'Artem et KnockoutJS 2.2.1, voici une version améliorée:

http://jsfiddle.net/YZzDe/2/

Améliorations:

  1. Moins de code, moins de duplication (s'accroche aux interfaces exposées)
  2. Supprime la liaison 'html', donc l'ancien 'html' peut maintenant être utilisé dans des domaines virtuels
  3. Plus de fonctions globales.

Voici le code 

 { var overridden = ko.bindingHandlers['html'].update; ko.bindingHandlers['html'].update = function (element, valueAccessor) { if (element.nodeType === 8) { var html = ko.utils.unwrapObservable(valueAccessor()); ko.virtualElements.emptyNode(element); if ((html !== null) && (html !== undefined)) { if (typeof html !== 'string') { html = html.toString(); } var parsedNodes = ko.utils.parseHtmlFragment(html); if (parsedNodes) { var endCommentNode = element.nextSibling; for (var i = 0, j = parsedNodes.length; i < j; i++) endCommentNode.parentNode.insertBefore(parsedNodes[i], endCommentNode); } } } else { // plain node overridden(element, valueAccessor); } }; } ko.virtualElements.allowedBindings['html'] = true;

Vous pouvez également utiliser ceci comme point de vue: 

 <div data-bind="html: html"></div>​​​​​​​​​​​​​​​​​​​​​

Cela remplacera le innerHtml du div "conteneur" par votre propriété html fournie.