"No se puede leer la propiedad 'nodeType' de null" al llamar ko.applyBindings

que tengo este código nocaut:"No se puede leer la propiedad 'nodeType' de null" al llamar ko.applyBindings

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

este código 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>

El ejemplo es el mismo que el en el sitio web del golpe de gracia, pero cuando lo ejecuto, devuelve este mensaje en Chrome Bug fuego:

Uncaught TypeError: Cannot read property 'nodeType' of null

ésta se relaciona con la KNOC Kout archivo y para esta línea de mi guión:

ko.applyBindings(new TaskListViewModel());

Y este error está apuntando a esta línea (1766) en octavos de final:

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

¿Qué estoy haciendo mal?

Fuente

2012-02-03 Gerep

Ese error tipográfico causaría que SyntaxError. ¿Arreglar el error tipográfico soluciona el problema? –

Sí ... He actualizado la pregunta porque vino otro error. – Gerep

165

Este problema ocurría porque yo estaba tratando de obligar a un elemento HTML antes de que fuera creado.

Mi script se cargó en la parte superior de HTML (en la cabeza) pero tenía que cargarse en la parte inferior de mi código HTML (justo antes de la etiqueta de cierre del cuerpo).

Gracias por su atención James Allardice.

Una posible solución está utilizando defer="defer"

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

Uso esto si el guión no va a generar ningún contenido del documento. Esto le indicará al navegador que puede esperar a que se cargue el contenido antes de cargar el script.

Further reading.

Espero que ayude.

Fuente

2012-02-03 11:58:37 Gerep

Para destacar: la etiqueta '

Tienes un simple error de ortografía:

self.addTask = fuction() {

debe ser:

self.addTask = function() { //Notice the added 'n' in 'function'

Fuente

2012-02-03 11:38:02

Es posible que desee considerar el uso de jQuery manejador listo para este

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

Entonces a lograr dos cosas:

evitar la contaminación del espacio de nombres global
vinculante Knockout se produce después de que el DOM es creado. Puede colocar su javascript donde sea adecuado para la organización.

Ver http://api.jquery.com/ready/

Fuente

2012-04-12 16:58:36 James

Alerta de spoiler para los que no lo hicieron RTM: '$ (handler)' es equivalente a '$ (document) .ready (handler)' –

si tiene jQuery puesta aplicar vinculante dentro onload modo que nocaut busca el DOM DOM cuando está listo.

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

Fuente

2012-12-04 03:22:44 KhanSharp

clavado, ¿puedo incluir otros enlaces en el bloque de documentos? –

Gracias por su información! – karthik

Cuestiones relacionadas

"No se puede leer la propiedad 'nodeType' de null" al llamar ko.applyBindings

Respuesta

Cuestiones relacionadas