¿No se puede obtener la muestra más simple de knockout.js para trabajar?

Esto realmente me molesta. Por favor, eche un vistazo al Hello World example de knockout.js.¿No se puede obtener la muestra más simple de knockout.js para trabajar?

Aquí está mi código:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Home Page</title> 
    <script src="knockout-1.2.1.debug.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     // Here's my data model 
     var viewModel = { 
      firstName: ko.observable("Planet"), 
      lastName: ko.observable("Earth") 
     }; 
     viewModel.fullName = ko.dependentObservable(function() { 
      // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
      return viewModel.firstName() + " " + viewModel.lastName(); 
     }); 

     ko.applyBindings(viewModel); // This makes Knockout get to work 
    </script> 

</head> 
<body> 
    <p>First name: <input data-bind="value: firstName" /></p> 
    <p>Last name: <input data-bind="value: lastName" /></p> 
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 
</body> 
</html>

Parece, que la unión no funciona. Si yo alert(viewModel.fullName()); obtengo "Planet Earth" como se esperaba. Pero ni los elementos de entrada ni el tramo se llenan de datos.

¿Qué estoy haciendo mal?

Here es un archivo zip que incluye tanto mi archivo y knockout.js

Fuente

2011-08-22 Sandro

Su problema es que usted está llamando ko.applyBindings demasiado pronto.

Desea mover la etiqueta de secuencia de comandos hacia abajo o ejecutarla en una carga o algo así como la función de preparación de jQuery.

Fuente

2011-08-22 23:54:23

-2

mirando las demos para knockout.js, que se está perdiendo algo. Usted no está enviando el modelo de vista como parámetro a la función dependentObservable:

viewModel.fullName = ko.dependentObservable(function() { 
     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
     return viewModel.firstName() + " " + viewModel.lastName(); 
    }, viewModel);

Fuente

2011-08-22 23:28:56 gislikonrad

Eso no sirve. Y en el ejemplo, tampoco hay parámetro viewModel para dependObservable – Sandro

¿Qué navegador estás usando? Estoy usando Chrome: Mac y tengo su código exacto para trabajar aquí: http://jsfiddle.net/3Appe/1/ – gislikonrad

@ GísliKonráð Parece que la razón por la que su código está trabajando en el jsfiddle es porque está configurado para ejecuta la biblioteca js en carga. – Zack

El ko.applyBindings() debe llamarse una vez que la vista se carga y luego los datos se combinan con los controles automáticamente.

Fuente

2012-06-21 11:34:22 Ajay

Esta es una versión funcional del tutorial de KnockoutJs.

<!DOCTYPE html> 
<html> 
<head> 

    <link rel="stylesheet" type="text/css" href="style/monitor.css"> 
    <script type="text/javascript" src="js/knockout-2.3.0.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function WebmailViewModel() { 
      // Data 
      var self = this; 
      self.folders = [ 'Inbox', 'Archive', 'Sent', 'Spam' ]; 
      self.chosenFolderId = ko.observable(); 
      self.chosenFolderData = ko.observable(); 
      self.chosenMailData = ko.observable(); 

      // Behaviours  
      self.goToFolder = function(folder) { 
       self.chosenFolderId(folder); 
       self.chosenMailData(null); // Stop showing a mail 
       $.get('/mail', { 
        folder : folder 
       }, self.chosenFolderData); 
      }; 
      self.goToMail = function(mail) { 
       self.chosenFolderId(mail.folder); 
       self.chosenFolderData(null); // Stop showing a folder 
       $.get("/mail", { 
        mailId : mail.id 
       }, self.chosenMailData); 
      }; 

      // Show inbox by default 
      self.goToFolder('Archive'); 
     }; 


    </script> 
</head> 
<body onload="ko.applyBindings(new WebmailViewModel());"> 
    <!-- Folders --> 
    <ul data-bind="foreach: folders"> 
     <li> 
      The current folders are: <b data-bind="text: $data"></b> 
     </li> 
    </ul> 
    </body> 
    </html>

Fuente

2013-08-26 07:39:21

Sólo añadir window.onload = function() en el comienzo de la escritura ..

window.onload= function() { 

    // Here's my data model 
    var viewModel = { 
...... 
    ko.applyBindings(viewModel); // This makes Knockout get to work 
    } 
</script>

Fuente

2013-09-03 18:58:04

-2

Si los valores no son vinculantes solo use una funcionalidad de comprobación antes de hacer uso de la matriz. En knockout puede hacer esto como

< !-- ko if:detail() --> 


    --your HTML code to display the fields goes here-- 


<!-- /ko -->

Fuente

2014-10-23 03:45:07

¿No se puede obtener la muestra más simple de knockout.js para trabajar?

Respuesta

Cuestiones relacionadas