javascript - Obteniendo "No se puede leer la propiedad ''nodeType'' of null" al llamar a ko.applyBindings
knockout.js (4)
Es posible que desee considerar el uso del controlador jquery ready para este
$(function() {
function TaskListViewModel() {
...
ko.applyBindings(new TaskListViewModel());
});
Entonces logras dos cosas:
- Evite contaminar el espacio de nombres global
- El enlace knockout ocurre DESPUÉS de que se crea el DOM. Puede colocar su javascript donde sea adecuado para la organización.
Tengo este código knockout:
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 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"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it''s beer time!</span>
</body>
El ejemplo es el mismo que el que se encuentra en el sitio web de Knockout, pero cuando lo ejecuto, devuelve este mensaje en Chrome Fire Bug:
Unkeught TypeError: no se puede leer la propiedad ''nodeType'' de null
Este está relacionado con el archivo knockout y con esta línea de mi script:
ko.applyBindings(new TaskListViewModel());
Y este error apunta a esta línea (1766) en knockout:
var isElement = (nodeVerified.nodeType == 1);
¿Qué estoy haciendo mal?
Este problema estaba sucediendo porque estaba intentando vincular un elemento HTML antes de que se creara.
Mi script se cargó en la parte superior del 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 alternativa es usar defer="defer"
<script src="script.js" type="text/javascript" defer="defer"></script>
Use esto si el script no va a generar ningún contenido de documento. Esto le indicará al navegador que puede esperar a que se cargue el contenido antes de cargar el script.
Espero eso ayude.
Usted tiene un error de ortografía simple:
self.addTask = fuction() {
Debiera ser:
self.addTask = function() { //Notice the added ''n'' in ''function''
si tiene jQuery poner aplicar enlace dentro de onload para que knockout busque el DOM cuando DOM esté listo.
$(document).ready(function(){
ko.applyBindings(new TaskListViewModel());
});