Usando una Plantilla externa en KnockoutJS

¿es posible usar una Plantilla externa en KnockoutJS como esta?Usando una Plantilla externa en KnockoutJS

<script type="text/html" id="a_template" src="templates/a_template.html"> 
</script>

He intentado con esta solución pero no funcionó.

Fuente

2012-02-28 KebdnK

También puede comprobar esta pregunta: http://stackoverflow.com/questions/17073648/load-knockout-template-from-external-file-without-complex-engine. Discute las plantillas externas para KnockoutJS sin el uso de frameworks de terceros. –

Usted también podría buscar en:

https://github.com/ifandelse/Knockout.js-External-Template-Engine

Fuente

2012-02-28 11:33:08

Gracias, esto se ve bastante sencillo. – KebdnK

* En su archivo HTML, consulte jQuery, jquery-tmpl (si está usando plantillas jquery), knockout.js, TrafficCop, infuser y el archivo koExternalTemplateEngine.js * - No parece muy ligero :) – soniiic

Puede también solo hace referencia a koExternalTemplateEngine_all.js que incluye el motor de plantillas, TrafficCop y el infusor. Las tres bibliotecas fueron escritas por Jim, ya que reconoció que parte de esta funcionalidad era útil fuera de KO. –

Puede usar jquery para cargar dinámicamente html en un elemento de script, y luego ejecutar el knockout basado en eso.

<script type="text/html" id="template_holder"></script> 
<script type="text/javascript"> 
$('#template_holder').load('templates/a_template.html', function() { 
    alert('Load was performed.'); 
    //knockout binding goes here 
});</script>

Su unión se debe hacer en la función de devolución de llamada, sin embargo, de lo contrario existe la posibilidad de que usted va a estar tratando de unirse antes de la página se ha cargado

ACTUALIZACIÓN Aquí nocaut es un ejemplo que he codificado en jsFiddle para demostrar la carga dinámica: http://jsfiddle.net/soniiic/2HxPp/

Fuente

2012-02-28 11:20:13 soniiic

Gracias, pero creo que el motor de plantillas externas es un poco mejor porque oculta todas las solicitudes. – KebdnK

Ok :) pero recuerde que aún es posible que el usuario vea solicitudes: http://code.google.com/chrome/devtools/docs/network-files/network_panel.png – soniiic

Esta es una buena solución. Aquí hay un enlace de ejemplo de un marcador de posición de plantilla div: ko.applyBindings (myViewModel, $ ('# template_holder') [0]); – ROFLwTIME

También puede utilizar este programa previo Plantilla para KO

Bootstrapper https://github.com/AndersMalmgren/Knockout.Bootstrap

MVC WebAPI demostración https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

Se utiliza una convención sobre configuración approuch el uso de este lib https://github.com/AndersMalmgren/Knockout.BindingConventions

Lo que significa que entenderá automáticamente que MyViewModel sh Ould establecer una correspondencia con MyView

su también preparados para trabajar muy bien en un SPA

exención de responsabilidad: Soy el autor detrás de las 3 bibliotecas mencionadas anteriormente

Fuente

2013-05-03 12:00:50 Anders

Aquí hay un pequeño edificio de la función de la respuesta de soniiic :

function loadExternalKnockoutTemplates(callback) { 
    var sel = 'script[src][type="text/html"]:not([loaded])'; 
    $toload = $(sel); 
    function oncomplete() { 
     this.attr('loaded', true); 
     var $not_loaded = $(sel); 
     if(!$not_loaded.length) { 
      callback(); 
     } 
    } 
    _.each($toload, function(elem) { 
     var $elem = $(elem); 
     $elem.load($elem.attr('src'), _.bind(oncomplete, $elem)); 

    }); 
}

Esto va a cargar automáticamente todas las plantillas knockout en el documento, siempre que su src está establecido y su tipo es "text/html". Pase una devolución de llamada para recibir una notificación cuando se carguen todas las plantillas. No tengo idea de qué sucede si alguno de ellos falla.

Ejemplo de uso:

<head> 
    <script type="text/html" src="kot/template1.html" id="template1"></script> 

</head> 
<body> 
    <script> 
     $(function() { 
      loadExternalKnockoutTemplates(function() { 
       // Put your ready code here, like 
       ko.applyBindings(); 
      }); 
     }); 


     function loadExternalKnockoutTemplates(callback) { 
      var sel = 'script[src][type="text/html"]:not([loaded])'; 
      $toload = $(sel); 
      function oncomplete() { 
       this.attr('loaded', true); 
       var $not_loaded = $(sel); 
       if(!$not_loaded.length) { 
        callback(); 
       } 
      } 
      _.each($toload, function(elem) { 
       var $elem = $(elem); 
       $elem.load($elem.attr('src'), _.bind(oncomplete, $elem)); 

      }); 
     } 
    </script> 
</body>

Fuente

2014-04-07 01:10:29

Muy inteligente, pero no votaré antes de reemplazar '_.bind (oncomplete, $ elem)' con 'oncomplete.bind ($ elem)' y '_.each' con 'ko.utils.arrayForEach'; -) No es necesario agregar guiones bajos todavía –

Usando una Plantilla externa en KnockoutJS

Respuesta

Cuestiones relacionadas