Nie można pobrać najprostszej próbki knockout.js do pracy?

To naprawdę przeszkadza mi. Proszę spojrzeć na Hello World example z knockout.js.Nie można pobrać najprostszej próbki knockout.js do pracy?

Oto mój kod:

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

Wydaje się, że wiązanie nie działa. Jeśli I alert(viewModel.fullName()); otrzymam "Planeta Ziemia" zgodnie z oczekiwaniami. Ale ani elementy wejściowe, ani zakres nie zostaną wypełnione danymi.

Co robię źle?

Here jest plik ZIP, który zawiera zarówno mój plik i knockout.js

Źródło

2011-08-22 Sandro

Twój problem jest to, że są zbyt szybko, nazywając ko.applyBindings.

Chcesz przenieść znacznik skryptu na dół lub wykonać go w funkcji onload lub coś w rodzaju gotowej funkcji jQuery.

Źródło

2011-08-22 23:54:23

-2

patrząc na pokazy dla knockout.js, tracisz jedno. Nie jesteś wysłaniem widoku modelu jako parametr do funkcji 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);

Źródło

2011-08-22 23:28:56 gislikonrad

To nie wystarczy. I w tym przykładzie nie ma również parametr viewModel dla dependObservable – Sandro

Jakiej przeglądarki używasz? Używam Chrome: Mac i ja mamy tutaj swój dokładny kod: http://jsfiddle.net/3Appe/1/ – gislikonrad

@ GísliKonráð Wygląda na to, że twój kod działa na jsfiddle, ponieważ jest ustawiony na uruchom bibliotekę js przy obciążeniu. – Zack

Po wywołaniu widoku należy wywołać ko.applyBindings(), a następnie dane zostaną automatycznie powiązane z kontrolkami.

Źródło

2012-06-21 11:34:22 Ajay

To jest działająca wersja samouczka 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>

Źródło

2013-08-26 07:39:21

Wystarczy dodać window.onload = function() na początku skryptu ..

window.onload= function() { 

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

Źródło

2013-09-03 18:58:04

-2

Jeśli wartości nie są wiążące tylko odpalić funkcjonalność sprawdzić przed skorzystać z tablicy. W nokaut można to zrobić tak jak

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


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


<!-- /ko -->

Źródło

2014-10-23 03:45:07

Nie można pobrać najprostszej próbki knockout.js do pracy?

Odpowiedz

Powiązane problemy