2013-02-26 5 views
31

Dzisiaj jest pierwszy dzień dla mnie w Knockout. Uderzyło go to. Poniżej znajduje się mój pierwszy przykładowy kod przy użyciu pliku knockout.js, który pokazuje błąd.Dlaczego otrzymuję komunikat "Nie można odczytać właściwości" nodeType o wartości "null" error with Knockout JS?

nie można odczytać własności 'NODETYPE' null

Tu jest mój skrypt: `

function ViewModel() 
    { 
    var self = this; 
    self.n1 = ko.observable(10); 
    self.n2 = ko.observable(10); 
    self.n3 = ko.observable(10); 
    } 
    ko.applyBindings(new ViewModel()); ` 

Tu jest mój HTML:

<body> 
<p>Number1:<input data-bind="value:n1"></input></p> 
<p>Number2:<input data-bind="value:n2"></input></p> 
<p>Number3:<input data-bind="value:n3"></input></p> 
</body> 

chcę wiedzieć powód powyższego błędu i sposób jego pokonania ...

Odpowiedz

43

Po skonfigurowaniu kodu w ten sposób zadziała.

<body> 
<p>Number1:<input data-bind="value:n1"></p> 
<p>Number2:<input data-bind="value:n2"></p> 
<p>Number3:<input data-bind="value:n3"></p> 
<script src="knockout.js"></script> 
<script> 

function ViewModel() { 
    var self = this; 
    self.n1 = ko.observable(10); 
    self.n2 = ko.observable(10); 
    self.n3 = ko.observable(10); 
} 

ko.applyBindings(new ViewModel()); ` 

</script> 
</body> 
+1

Tak, działa dobrze teraz .. Ale czy mogę znać powód .. ?? –

+11

HTML jest analizowany od góry do dołu. Tak więc, jeśli umieścisz skrypty u góry strony (np. Sekcja ""), mogą one zostać uruchomione, zanim niektóre lub wszystkie elementy strony będą gotowe do interakcji. Są na to inne sposoby (reagowanie na zdarzenia przygotowane w DOM), ale umieszczenie kodu u dołu robi to samo. – FakeRainBrigand

+1

Jeszcze jedna wskazówka: '' elementy nie mają znacznika zamykającego. W html po prostu zapisz je jak '' lub '' w XHTML. – FakeRainBrigand

32

Jeśli chcesz zachować swoje <script> na górze strony, można użyć funkcji gotowy jQuery(), aby opóźnić inicjalizacji aż strona się załaduje.

$(document).ready(function() { 
    ko.applyBindings(new ViewModel()); 
}); 
+0

Nie wiem, czy to działa ... W każdym razie dziękuję za cenną odpowiedź ... !!! –

+4

Tak, to działa. Miałem ten sam błąd co ty i ta strona pomogła mi rozwiązać go za pomocą $ .ready(). –

1

Myślę, że ko.applyBindings (obj); powinien być napisany pod widokiem modelu.

<!DOCTYPE html> 
<html> 
<head> 
    <title>KO Examples</title> 
    <script type='text/javascript' src='knockout-3.1.0.js'></script> 
    <script type='text/javascript' src='jquery.js'></script> 
    <script type='text/javascript'> 
     var obj = { 
      first_name : 'Gazal Irish' 
     }; 


    </script> 

</head> 
<body> 
<div> 
    <p>My name : <span data-bind="text: first_name"></span> 
<p> 
</div> 
<script type="text/javascript"> 

    ko.applyBindings(obj); 
</script> 

</body> 
</html>