Non riesci a far funzionare il campione knockout.js più semplice?

Questo mi disturba davvero. Si prega di dare un'occhiata allo Hello World example di knockout.js.Non riesci a far funzionare il campione knockout.js più semplice?

Ecco il mio codice:

<!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>

Sembra, che il legame non funziona. Se I alert(viewModel.fullName()); ottengo "Pianeta Terra" come previsto. Ma né gli elementi di input né l'intervallo vengono riempiti di dati.

Cosa sto sbagliando?

Here è un file zip che comprende sia il mio file e knockout.js

fonte

2011-08-22 Sandro

Il tuo problema è che si sta chiamando ko.applyBindings troppo presto.

Si desidera spostare il tag di script in fondo o eseguirlo in un onload o qualcosa come la funzione ready di jQuery.

fonte

2011-08-22 23:54:23

-2

Guardando le demo per knockout.js, vi state perdendo una cosa. Non stai inviando il modello vista come parametro per la funzione 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);

fonte

2011-08-22 23:28:56 gislikonrad

Questo non fa il trucco. E nell'esempio, non esiste anche alcun parametro viewModel per dependentObservable – Sandro

Che browser stai usando? Sto usando Chrome: Mac e ho ottenuto il tuo codice esatto per lavorare qui: http://jsfiddle.net/3Appe/1/ – gislikonrad

@ GísliKonráð Sembra che il motivo per cui il tuo codice sta lavorando su jsfiddle sia perché è impostato su eseguire la libreria js in caricamento. – Zack

Il ko.applyBindings() deve essere chiamato una volta caricata la vista, quindi i dati vengono automaticamente associati ai controlli.

fonte

2012-06-21 11:34:22 Ajay

Questa è una versione funzionante del tutorial di 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>

fonte

2013-08-26 07:39:21

Basta aggiungere window.onload = function() all'inizio dello script ..

window.onload= function() { 

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

fonte

2013-09-03 18:58:04

-2

Se i valori non sono vincolanti solo accendere una funzionalità di controllo prima di fare uso della matrice. In knockout si può fare questo come

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


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


<!-- /ko -->

fonte

2014-10-23 03:45:07

Non riesci a far funzionare il campione knockout.js più semplice?

risposta

Problemi correlati