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.