Ko.applyBindings কল করার সময় "নালীর সম্পত্তি 'নোডটাইপ' পড়তে পারে না" পাওয়া Get


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());

এই এইচটিএমএল:

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

আমি কি ভুল করছি?


সেই টাইপোর ফলে সিনট্যাক্স এরিয়ার হতে পারে। টাইপ ঠিক করা সমস্যার সমাধান করে?
জেমস এলার্ডিস

ইয়াস ... আমি প্রশ্নটি আপডেট করেছি কারণ অন্য একটি ত্রুটি এসেছে।
গেরেপ

উত্তর:


176

এই সমস্যাটি হচ্ছিল কারণ আমি একটি HTMLউপাদান তৈরি হওয়ার আগে তাকে আবদ্ধ করার চেষ্টা করছিলাম ।

আমার স্ক্রিপ্টটি HTML(মাথার মধ্যে) শীর্ষে লোড করা হয়েছিল তবে এটি আমার HTMLকোডের নীচে লোড করা দরকার (ক্লোজিং বডি ট্যাগের ঠিক আগে)।

জেমস আলার্ডার্ডিস আপনার মনোযোগের জন্য ধন্যবাদ ।

একটি সম্ভাব্য workaround ব্যবহার করা হয় defer="defer"

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

স্ক্রিপ্টটি কোনও দস্তাবেজ সামগ্রী তৈরি না করে থাকলে এটি ব্যবহার করুন। এটি ব্রাউজারকে বলবে যে এটি স্ক্রিপ্টটি লোড করার আগে সামগ্রীটি লোড হওয়ার জন্য অপেক্ষা করতে পারে।

আরও পড়া

আশা করি এটা সাহায্য করবে.


4
জোর দেওয়ার জন্য: <script ...>ট্যাগটি বন্ধের </body>ট্যাগের ঠিক আগে পৃষ্ঠার নীচে থাকা দরকার ।
aliteralmind 10

4
ধন্যবাদ, ধন্যবাদ! আমি আমার স্ক্রিপ্টটি কেবল শরীরের শেষ দিকে নিয়ে এসেছি এবং এটি পুরোপুরি কার্যকর হয়েছে। অনেক কৃতজ্ঞতা
জিম্মারম্যান

33

আপনি এই জন্য jquery প্রস্তুত হ্যান্ডলার ব্যবহার বিবেচনা করতে পারেন

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

তারপরে আপনি দুটি জিনিস অর্জন করুন:

  1. বিশ্বব্যাপী নাম স্থান দূষিত করা এড়িয়ে চলুন
  2. নকআউট বাঁধাই DOM তৈরি হওয়ার পরে ঘটে। আপনার জাভাস্ক্রিপ্ট যেখানেই এটি প্রতিষ্ঠানের পক্ষে উপযুক্ত সেখানে রাখতে পারেন।

Http://api.jquery.com/ تيار/ দেখুন


4
যারা আরটিএম করেননি তাদের জন্য স্পোলার সতর্কতা: $(handler)সমতুল্য$(document).ready(handler)
ব্রক হেনসলে

21

আপনার যদি jQuery থাকে তবে এটির জন্য বাইন্ডিং লাগান onloadযাতে নকআউটটি DOM তৈরি হওয়ার সময় খুঁজে পায়।

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

এটিতে পেরেক দেওয়া হয়েছে, বিটিডব্লু আমি কী নথির ব্লকে অন্য বাইন্ডিংগুলি অন্তর্ভুক্ত করতে পারি?
অ্যালান জিকামু

4
আপনার তথ্যের জন্য ধন্যবাদ !!
কার্তিক

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.