Knockout.js - đơn giản "Hello World" không thành công

Tôi đang làm một thế giới hello rất đơn giản cho loại bỏ js (từ http://goo.gl/lddLl): nhưng mã của tôi đang tạo ra một lỗi mà tôi không hiểu.Knockout.js - đơn giản "Hello World" không thành công

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>AJAX Example</title> 
    <script src="../Scripts/jquery-2.0.3.js"></script> 
    <script src="../Scripts/knockout-3.0.0.debug.js"></script> 

    <script> 

     // Here's my data model 
     var ViewModel = function (first, last) { 
      this.firstName = ko.observable(first); 
      this.lastName = ko.observable(last); 

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

     ko.applyBindings(new ViewModel("Planet", "Earth")); // 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>

cuộc gọi ko.applyBindings làm tăng lỗi:

của router Lỗi Loại: Không thể đọc thuộc 'nodeType' null knock-out-3.0.0.debug.js: 2439

từ knockout- đang 3.0.0.debug.js:

// Perf optimisation: Apply bindings only if... 
// (1) We need to store the binding context on this node (because it may differ from the DOM parent node's binding context) 
//  Note that we can't store binding contexts on non-elements (e.g., text nodes), as IE doesn't allow expando properties for those 
// (2) It might have bindings (e.g., it has a data-bind attribute, or it's a marker for a containerless template) 
var isElement = (nodeVerified.nodeType === 1);

tôi quá ngu dốt để biết những gì tôi đang làm sai ...

Nguồn

2013-11-26 TheFastCat

2 cách để giải quyết nó tôi đoán.

1 cách đơn giản nhất: quấn kịch bản của bạn bên trong() chức năng sẵn sàng

$(document).ready(function() { 
    your script goes here 
});

sử dụng jQuery để trì hoãn việc khởi tạo cho đến khi trang đã được nạp.

2 di chuyển kịch bản của bạn dưới:

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

HTML được phân tách từ trên xuống dưới. nếu bạn đặt tập lệnh trước phần tử html, 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.

Nguồn

2013-11-26 19:11:23

/xấu hổ. cảm ơn bạn đã giảng dạy của bạn! – TheFastCat

không phải lo lắng. vui mừng giúp! –

Tập lệnh của bạn đang thực thi trước khi cơ thể được thêm vào DOM, phần thân là nút gốc mặc định cho ràng buộc. Đặt kịch bản ở phía dưới như vậy:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>AJAX Example</title> 
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js"></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> 

<script> 

    // Here's my data model 
    var ViewModel = function (first, last) { 
     this.firstName = ko.observable(first); 
     this.lastName = ko.observable(last); 

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

    ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work 

</script>

Nguồn

2013-11-26 19:12:29 Matt

Cảm ơn bạn đã dạy tôi! – TheFastCat

Knockout.js - đơn giản "Hello World" không thành công

Trả lời

Các vấn đề liên quan