Se “Impossible de lire la propriété 'type', null” lors de l'appel de ko.applyBindings

J'ai ce knock-out code:

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

Ce 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>

L'exemple est le même que celui trouvé sur le knock-out du site, mais quand je le lance, il renvoie ce message sur Chrome Fire Bug:

Uncaught TypeError: Cannot read property 'type', null

Celui-ci est lié à l'knock-out de fichier et de cette ligne de mon script:

ko.applyBindings(new TaskListViewModel());

Et cette erreur est pointant vers cette ligne (1766) sur knockout:

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

Ce que je fais mal?

Que de fautes de frappe ferais en sorte que SyntaxError. Le fait de fixer la faute de frappe à corriger le problème?
Oui...j'ai mis à jour la question parce qu'un autre message d'erreur.

InformationsquelleAutor Gerep | 2012-02-03

javascript knockout.js

175

Ce problème qui se passait parce que j'essayais de le lier à une HTML élément avant il a été créé.

Mon script a été chargé sur le dessus de la HTML (dans la tête) mais il doit être chargé dans le fond de mon HTML code (juste avant la balise de fermeture body).

Merci pour votre attention James Allardice.

Une solution possible est d'utiliser defer="defer"
```
<script src="script.js" type="text/javascript" defer="defer"></script>
```
Utilisez cette option si le script ne va pas générer de tout le contenu du document. Cela permettra d'indiquer au navigateur qu'il peut attendre pour que le contenu soit chargé avant de charger le script.

Lectures complémentaires.

Espère que cela aide.
- À souligner: Le <script ...> balise doit être au bas de la page, juste avant la fermeture </body> tag.
- merveilleux, merci! Je viens de déménager mon script à la fin de corps et il a parfaitement fonctionné. beaucoup de remerciements
InformationsquelleAutor Gerep
33

Vous pourriez envisager d'utiliser le jquery prêt gestionnaire pour ce
```
$(function() {
   function TaskListViewModel() {
   ...
   ko.applyBindings(new TaskListViewModel());
});
```
Alors vous permettre d'atteindre deux objectifs:
1. Éviter de polluer l'espace de noms global
2. Knock-out de liaison se produit APRÈS que le DOM est créé. Vous pouvez placer votre javascript partout où il est adapté pour l'organisation.
Voir http://api.jquery.com/ready/
- Spoiler alert pour ceux qui n'ont pas RTM: $(handler) est équivalent à $(document).ready(handler)
InformationsquelleAutor James Kessler
21

si vous avez jQuery mettre appliquer la liaison à l'intérieur de onload de sorte que knock-out semble pour le DOM lorsque le DOM est prêt.
```
$(document).ready(function(){
    ko.applyBindings(new TaskListViewModel());
});
```
- cloué, btw puis-je inclure d'autres liaisons sur le document de bloc?
- Merci pour vos infos!!
InformationsquelleAutor KhanSharp
5

Vous disposez d'une simple faute d'orthographe:
```
self.addTask = fuction() {
```
Devrait être:
```
self.addTask = function() { //Notice the added 'n' in 'function'
```
InformationsquelleAutor James Allardice

Vous devez vous connecter pour publier un commentaire.