2013-11-26 10 views
8

विफल रहता है मैं नॉकआउट जेएस (http://goo.gl/lddLl से) के लिए एक बहुत ही सरल हैलो दुनिया कर रहा हूं: लेकिन मेरा कोड एक त्रुटि उत्पन्न कर रहा है जिसे मैं समझ नहीं पा रहा हूं। knockout- से 2439Knockout.js - सरल "हैलो वर्ल्ड"

:

Uncaught TypeError: संपत्ति पढ़ा नहीं जा सकता अशक्त नॉकआउट-3.0.0.debug.js की 'nodeType'

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

ko.applyBindings कॉल त्रुटि को जन्म देती है 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); 

मैं भी पता करने के लिए मैं गलत तरीके से क्या कर रहा हूँ ... अज्ञानी

उत्तर

13

इसे हल करने के 2 तरीके मुझे लगता है।

1 सबसे आसान तरीका: प्रारंभ देरी करने के लिए जब तक पृष्ठ के लोड होते अंदर

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

उपयोग jQuery के लिए तैयार() फ़ंक्शन अपनी स्क्रिप्ट लपेट दें।

2 कदम के तहत अपनी स्क्रिप्ट:

<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 तत्वों से पहले स्क्रिप्ट डालते हैं, तो कुछ या सभी पृष्ठ तत्वों के साथ बातचीत करने के लिए तैयार होने से पहले उन्हें चलाया जा सकता है।

+1

/शर्मिंदा। आपके शिक्षण के लिए धन्यवाद! – TheFastCat

+0

कोई चिंता नहीं। खुश है कि मदद करता है! –

2

शरीर को डीओएम में जोड़ा जाने से पहले आपकी स्क्रिप्ट निष्पादित हो रही है, शरीर बाध्यकारी के लिए डिफ़ॉल्ट रूट नोड है। इसलिए जैसे तल पर स्क्रिप्ट रखो:

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

+1

मुझे सिखाने के लिए धन्यवाद! – TheFastCat

संबंधित मुद्दे