Plantilla de KnockOutjs no funciona -- knockout.js campo con jquery-templates camp Relacionados El problema

knockoutjs template not working


1
vote

problema

Español

Estuve siguiendo un video sobre Knockout y no tengo idea de por qué mi código no está funcionando.

Estoy usando estos scripts JS:

  u82  

Este código me devuelve esto, está mostrando la cantidad correcta de amigos, pero no muestra los nombres.

  u83  

¿Qué estoy haciendo mal?

gracias de antemano.

editar Hacer algunas pruebas y este código funciona porque no está usando la plantilla, por lo que mi código es correcto, el problema es solo con la plantilla.

  u84  
Original en ingles

I was following a video about knockout and I have no idea why my code is not working.

I'm using these js scripts:

    <script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script>     <script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>     <script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script>      <h2>Friends</h2>     <ul data-bind="template: {name: 'friendsTemplate', foreach:friends}"></ul>      <script type="text/html" id="friendsTemplate">         <li>${ data.name }</li>     </script>  <script type="text/javascript">      function friend(name) {         return { name : ko.observable(name) };     }      var viewModel = {         friends : ko.observableArray([new friend('Joxc3xa3o'), new friend('Lucas')])     };     ko.applyBindings(viewModel); </script> 

This code returns me this, it is showing the correct amount of friends but not displaying the names.

Friends ${ data.name } ${ data.name } 

What am I doing wrong?

Thanks in advance.

EDIT Making some tests and this code works because it is not using template, so my code is correct, the problem is only with template.

<script type="text/html" id="friendsTemplate">     <li><span data-bind="text: name"></span></li> </script> 
     

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

Debe hacer referencia a jquery.tmpl antes de KnockOutjs

  angular.module("app", [])    .controller('Parent', function($scope, $timeout) {      $scope.searchRibbon = {        default: function() {          $scope.ribbonMessage = 'Welcome';          $scope.ribbonHide = false;        },        clearMessage: function() {          $scope.ribbonMessage = '';        },        hide: function() {          $scope.ribbonHide = true;        },        autoRemove: function() {          $timeout(function() {            $scope.searchRibbon.hide();            $timeout(function() {              $scope.searchRibbon.clearMessage();            }, 500);          }, 5000);        }      }    })    .controller('Child', function($scope, $timeout) {      $scope.$parent.searchRibbon.hide();    });4  

y cambia $ {data.name} a $ {nombre}

http://jsfiddle.net/c8svk/

 

you should reference jquery.tmpl prior to knockoutjs

<script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script> <script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script>  

and change ${ data.name } to ${name}

http://jsfiddle.net/c8Svk/

 
 
0
 
vote

intento:

  angular.module("app", [])    .controller('Parent', function($scope, $timeout) {      $scope.searchRibbon = {        default: function() {          $scope.ribbonMessage = 'Welcome';          $scope.ribbonHide = false;        },        clearMessage: function() {          $scope.ribbonMessage = '';        },        hide: function() {          $scope.ribbonHide = true;        },        autoRemove: function() {          $timeout(function() {            $scope.searchRibbon.hide();            $timeout(function() {              $scope.searchRibbon.clearMessage();            }, 500);          }, 5000);        }      }    })    .controller('Child', function($scope, $timeout) {      $scope.$parent.searchRibbon.hide();    });5  

Alternativamente, usted podría simplemente hacer:

  angular.module("app", [])    .controller('Parent', function($scope, $timeout) {      $scope.searchRibbon = {        default: function() {          $scope.ribbonMessage = 'Welcome';          $scope.ribbonHide = false;        },        clearMessage: function() {          $scope.ribbonMessage = '';        },        hide: function() {          $scope.ribbonHide = true;        },        autoRemove: function() {          $timeout(function() {            $scope.searchRibbon.hide();            $timeout(function() {              $scope.searchRibbon.clearMessage();            }, 500);          }, 5000);        }      }    })    .controller('Child', function($scope, $timeout) {      $scope.$parent.searchRibbon.hide();    });6  
 

Try:

<script type="text/html" id="friendsTemplate">     <li>$data.name</li> </script> 

Alternatively, you could just do:

<script type="text/html" id="friendsTemplate">     <li data-bind="text: name"></li> </script> 
 
 

Relacionados problema

1  Rodillo de tema jquery  ( Jquery theme roller ) 
He creado un tema usando http://jqueryui.com/themeroller/ Todos los widgets de UI están funcionando correctamente con la excepción de los iconos. ¿No puedo ...

7  ¿Cuál es la diferencia en jquery.tmpl y jquery.tmpplus?  ( Whats the difference in jquery tmpl and jquery tmplplus ) 
Estoy pensando en comenzar a usar el motor de plantilla de jQuery en mis proyectos. ¿Cuál es la diferencia en estos dos? Además, ¿es un buen momento para co...

4  Almacenamiento de plantillas JQuery / JS en archivos separados  ( Storing jquery js templates in a separate files ) 
Estoy tratando de averiguar cómo almacenar las plantillas de jquery en diferentes archivos de la base HTML (sin usar una Solicitud de cadena o AJAX). Por ej...

3  Motor de plantilla predeterminado de Knockout ahora cuando jquery.tmpl está condenado  ( Knockouts default template engine now when jquery tmpl is doomed ) 
¿Alguien sabe qué pasará con el motor de plantilla predeterminado de Knockout ahora cuando jquery.tmpl no se está desarrollando activamente o ¿Mantenido más ...

15  Usando el atributo de tipo personalizado en <Script> Etiquetas como el texto de jquery / x-jquery-tmpl  ( Using custom type attribute in script tags such as jquerys text x jquery tmpl ) 
Noté que El complemento de plantilla Beta de Jquery está usando, el atributo de tipo "Texto / X-jQuery- tmpl " e.g <script type="text/x-jquery-tmpl"> ...

0  ¿Cómo evitar el análisis automático de una etiqueta de URL y hazlo como la etiqueta completa en su lugar?  ( How to prevent auto parsing of an url tag and render it as the full tag instead ) 
¿Alguien sabe si KnockOutjs analiza TextInput6 y TextInput7 en sus observables? Estoy devolviendo una cadena como ... TextInput8 ... pero se hace ...

2  Plantillas de jquery anidadas usando parámetros de opciones  ( Jquery nested templates using options parameter ) 
No entiendo cómo hacer referencia a los parámetros de opciones en plantillas anidadas. Por favor, consulte: <div id="myContainer"></div> <script type="te...

7  La plantilla de jQuery puede unirse a una matriz cruda  ( Can jquery template bind to a raw array ) 
dado <div id="place_holder" /> <script id="template" type="text/x-jquery-tmpl"> WHAT DO I PUT HERE </script> var array_of_ints = [1,2,3] $( "#template" ...

0  $ .nano no es una función (motor de plantación de jQuery-nano)  ( Nano is not a function jquery templating engine nano ) 
Updated Question Estoy recibiendo el error $.nano is not a function y este es mi siguiente código ... ¿Alguna idea de por qué está sucediendo así?...

8  ¿Posibilidad de que ASP.NET MVC 2 se presenta a las plantillas de jquery-TMPL?  ( Possible for asp net mvc 2 to render views as jquery tmpl templates ) 
Me gusta la idea de los nuevos complementos, plantillas de jquery desarrollada de MS, y en realidad, y en realidad tiene la necesidad en mi trabajo de día don...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos