jquery - example - knockout select value binding
Knockout JS: detener divs binded a visible: desde flashear en la pantalla (3)
Estoy trabajando en una sola página de aplicaciones que tiene un montón de divs escondidos, enlazados (¿o están enlazados?) A KnockoutJS con visible: Cuando la página se carga, todos parpadean momentáneamente en la pantalla. He intentado mover mi JS al <head></head> , pero eso no tuvo ningún efecto, por lo que cargar JS en la parte inferior de la página no es lo que está causando.
Desafortunadamente, visible: enlace no se propaga al atributo de display CSS, por lo que no puedo usar display: none; en la carga de la página, o visible: no funcionará en absoluto. A menos que ... Cargue la página con display: none; y luego cambiarlo la primera vez que le muestro el div a un usuario.
Pero, ¿hay una forma más elegante de lograr esto?
Lo resolví poniendo mi contenido "llamativo" en una plantilla de script y uso los elementos virtuales de ko para cargar la plantilla cuando la variable está configurada por otro elemento virtual.
Por ejemplo:
<!-- ko if: myVariable -->
<!-- ko template: { name: ''myTemplate'' } --><!-- /ko -->
<script type="text/html" id="myTemplate">
<ul data-bind="foreach: blah...">
<li></li>
</ul>
</script>
<!-- /ko -->
Por lo tanto, cuando se configura myVariable, el contenido del contenedor de scripts se colocará en lugar del elemento virtual de la plantilla. Con este método no ves contenido intermitente :-)
Terminé escribiendo un enlace personalizado para usar en lugar del visible defecto.
function isHidden(el) {
var style;
style = window.getComputedStyle(el);
return (style.display === ''none'')
}
ko.bindingHandlers[''cssVisible''] = {
''update'': function (element, valueAccessor) {
var value,
isCurrentlyVisible;
value = ko.utils.unwrapObservable(valueAccessor());
isCurrentlyVisible = !isHidden(element);
if (value && !isCurrentlyVisible) {
ko.utils.toggleDomNodeCssClass(element, ''ko-visible'', true);
}
else if ((!value) && isCurrentlyVisible) {
ko.utils.toggleDomNodeCssClass(element, ''ko-visible'', false);
}
}
}
Luego, algunos CSS para manejar la visibilidad
[data-bind*="cssVisible"]:not(.ko-visible) {
display: none;
}
El uso es el mismo que el enlace visible
<div data-bind="cssVisible: true"></div>
Wth KnockoutJS, soluciono este problema definiendo una clase de CSS llamada hidden with display:none , luego agregaré esta clase y el enlace al contenedor parpadeante:
class="hidden" data-bind="css: { hidden: false }"