2013-02-26 50 views
31

Hôm nay là ngày đầu tiên tôi ở Knockout. Đã xảy ra với nó. Dưới đây là mã mẫu đầu tiên của tôi bằng cách sử dụng knockout.js và nó cho thấy một lỗi.Tại sao tôi nhận được lỗi "Không thể đọc thuộc tính 'nodeType' của null" bằng Knockout JS?

không thể đọc thuộc tính 'nodeType' null

Dưới đây là kịch bản của tôi: `

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

Dưới đây là html của tôi:

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

tôi muốn biết lý do cho lỗi trên và cách khắc phục nó ...

Trả lời

43

Nếu bạn thiết lập mã của bạn như thế này, nó sẽ hoạt động.

<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

Yup làm việc tốt ngay bây giờ .. Nhưng tôi có thể biết lý do .. ?? –

+11

HTML được phân tích cú pháp từ đầu đến cuối. Vì vậy, nếu bạn bao gồm các tập lệnh ở đầu trang (ví dụ: '' phần), chúng có thể được chạy trước khi một số hoặc tất cả các phần tử trang sẵn sàng tương tác. Có nhiều cách khác để làm điều đó (trả lời các sự kiện sẵn sàng DOM), nhưng việc đặt mã ở dưới cùng cũng vậy. – FakeRainBrigand

+1

Một mẹo khác: '' các phần tử không có thẻ đóng. Trong html bạn chỉ cần viết chúng như '' hoặc '' trong XHTML. – FakeRainBrigand

32

Nếu bạn muốn giữ <script> của bạn ở phía trên cùng của trang, bạn có thể sử dụng chức năng sẵn sàng() của jQuery để trì hoãn việc khởi tạo cho đến khi trang đã được nạp.

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

Tôi không biết liệu nó hoạt động ... Dù sao cảm ơn bạn cho câu trả lời có giá trị của bạn ... !!! –

+4

Có, nó hoạt động. Tôi đã có lỗi tương tự như bạn và trang này đã giúp tôi giải quyết nó với $ .ready(). –

1

Tôi nghĩ ko.applyBindings (obj); nên viết dưới dạng xem.

<!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> 
Các vấn đề liên quan