Ko.applyBindings को कॉल करते समय "शून्य के प्रॉपर्टी 'नोड टाइप नहीं पढ़ सकते हैं


99

मेरे पास यह नॉकआउट कोड है:

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
    });

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new TaskListViewModel());

यह html:

<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="knockout-2.0.0.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h3>Tasks</h3>

    <form data-bind="submit: addTask">
        Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>

    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
            <a href="#" data-bind="click: $parent.removeTask">Delete</a>
        </li> 
    </ul>

    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
</body>

इसका उदाहरण वही है जो नॉकआउट वेबसाइट पर पाया जाता है, लेकिन जब मैं इसे चलाता हूं, तो यह संदेश क्रोम फायर बग पर देता है:

बिना पढ़ा हुआ टाइपर्रर: नल की संपत्ति 'नोड टाइप' को नहीं पढ़ सकता है

यह नॉकआउट फ़ाइल और मेरी स्क्रिप्ट की इस पंक्ति से संबंधित है:

ko.applyBindings(new TaskListViewModel());

और यह त्रुटि नॉकआउट पर इस रेखा (1766) की ओर इशारा करती है:

var isElement = (nodeVerified.nodeType == 1);

मैं क्या गलत कर रहा हूं?


कि टाइपो कारण होता है कि SyntaxError। क्या टाइपो को ठीक करने से समस्या ठीक हो जाती है?
जेम्स एलार्डिस

हाँ ... मैंने प्रश्न अपडेट कर दिया है क्योंकि एक और त्रुटि आई है।
गेरप

जवाबों:


176

यह समस्या इसलिए हो रही थी क्योंकि मैं एक HTMLतत्व को बनाने से पहले उसे बांधने की कोशिश कर रहा था ।

मेरी स्क्रिप्ट को HTML(सिर में) शीर्ष पर लोड किया गया था, लेकिन इसे मेरे HTMLकोड के निचले भाग में लोड करने की आवश्यकता थी (समापन के अंतिम टैग से ठीक पहले)।

आपका ध्यान जेम्स Allardice के लिए धन्यवाद ।

एक संभावित समाधान का उपयोग कर रहा है defer="defer"

<script src="script.js" type="text/javascript" defer="defer"></script>

इसका उपयोग करें यदि स्क्रिप्ट किसी भी दस्तावेज़ सामग्री को उत्पन्न करने के लिए नहीं जा रहा है। यह ब्राउज़र को बताएगा कि वह स्क्रिप्ट लोड करने से पहले सामग्री के लोड होने की प्रतीक्षा कर सकता है।

आगे पढ़ रहे हैं

आशा करता हूँ की ये काम करेगा।


4
ज़ोर देने के लिए: <script ...>टैग को पृष्ठ के निचले भाग में, नज़दीकी </body>टैग से पहले होना चाहिए ।
aliteralmind

1
अद्भुत, धन्यवाद! मैंने सिर्फ अपनी स्क्रिप्ट को शरीर के अंत तक स्थानांतरित किया और यह पूरी तरह से काम करती है। कई आभार
Eleanor Zimmermann

33

आप इसके लिए jquery तैयार हैंडलर का उपयोग करने पर विचार करना चाह सकते हैं

$(function() {
   function TaskListViewModel() {
   ...
   ko.applyBindings(new TaskListViewModel());
});

फिर आप दो चीजें हासिल करते हैं:

  1. वैश्विक नाम स्थान को प्रदूषित करने से बचें
  2. नॉकआउट बाइंडिंग तब होती है जब डोमेन बनाया जाता है। जहाँ भी यह संगठन के लिए अनुकूल हो, आप अपनी जावास्क्रिप्ट लगा सकते हैं।

Http://api.jquery.com/ready/ देखें


1
RTM नहीं करने वालों के लिए स्पॉयलर अलर्ट:$(handler)$(document).ready(handler)
ब्रॉक हेंसले

21

यदि आपके पास jQuery का पुट लगा हुआ है onloadतो अंदर बांध दें ताकि DOM तैयार होने पर DOM के लिए नॉकआउट दिखे।

$(document).ready(function(){
    ko.applyBindings(new TaskListViewModel());
});

इसे पकड़ा, btw मैं दस्तावेज़ ब्लॉक पर अन्य बाइंडिंग शामिल कर सकते हैं?
एलन जिकमू

1
आपकी जानकारी के लिए शुक्रिया!!
कार्तिक

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.