99 votes

erreur de syntaxe knockout

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 code 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 'nodeType' of 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?

175voto

Gerep Points 3608

Le problème est arrivé parce que j'ai essayé de lier un HTML élément avant il a été créé.

Mon script a été chargé sur le dessus de l' HTML et il doit être chargé dans le fond de mon HTML code.

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. Ce sera de dire au navigateur que l'on peut attendre sur le contenu de la charge avant le chargement du script.

Poursuite de la lecture.

Espérons que cela aide.

33voto

James Points 447

Vous voudrez peut-être envisager d’utiliser le gestionnaire jquery ready pour cette commande.

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

Ensuite, vous réalisez deux choses:

  1. Évitez de polluer l'espace de noms global
  2. La liaison knockout se produit APRÈS la création du DOM. Vous pouvez placer votre javascript partout où il convient à l'organisation.

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

21voto

KhanSharp Points 1754

Si vous avez jQuery, mettez la liaison à l'intérieur de onload afin que knockout recherche le DOM lorsque celui-ci est prêt.

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

5voto

James Allardice Points 81162

Vous avez une simple faute d'orthographe:

 self.addTask = fuction() {
 

Devrait être:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X