Backbone js - Uncaught type error: Cannot read property 'auf' undefined

Habe ich im folgenden eine sehr einfache ToDo-Liste-app mit Backbone-Rahmen.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>To do List</title>
    <style>
        .completed{
            text-decoration: line-through;
            color: #666;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>

    <h1>My Todos</h1>
    <div id="tasks">

        <button class="add">Add Task</button>
        <button class="clear hide">Clear All</button>
        <ul></ul>           

    </div>

    <script id="taskTemplate" type="text/template">
        <span class="<%= completed ? 'completed' : 'incomplete' %>"><%= text %></span>
        <button class="complete"></button>
        <button class="delete"></button>
    </script>


    <script type="text/javascript">

        var Task = Backbone.Model.extend({
            defaults: {text: 'New task', completed: false}

        });

        var Tasks = Backbone.Collection.extend({
            model: Task,
            el: '#tasks',
            initialize: function(){
                this.collection = new Tasks;
                this.collection.on('add', this.appendNewTask, this);

                this.items = this.$el.children('ul');
            },

            add: function(){
                var text = prompt('What do you need to do?');
                var task = new Task({text: text});
                this.collection.add(task);
            },

            appendNewTask: function(task){
                var TasksView = new TasksView({model:task});
                this.items.append(TasksView.el);
            },

            completed: function(){
                return _.filter(this.models, function(model){
                    return model.get('completed');
                });
            }
        });

        var TasksView = Backbone.View.extend({
            tagName: 'li',
            el: '#tasks',
            template: _.template($('#taskTemplate').html()),

            initialize: function(){

                this.model.on('change', this.render, this);
                this.model.on('remove', this.unrender, this);
                this.render();
            },

            render: function(){
                var markup = this.template(this.model.toJSON());
                    this.$el.html(markup);
            },

            unrender: function(){
                this.$el.remove();
            },

            events: { 
                'click .add': 'add',
                'click .clear': 'clearCompleted',
                'click .delete': 'delete',
                'click .complete': 'updateStatus',
                'dblclick span': 'edit'
            },

            add: function(){
                    var text = prompt('What do you need to do?');
                    var task = new Task({text: text});
            },

            delete: function(){
                this.model.destroy();
                this.$el.remove();
            },

            updateStatus: function(){
                this.model.set('completed', !this.model.get('completed'));
            },

            edit: function(){
                var text = prompt('What should we change your task to?', this.model.get('text'))
                this.model.set('text',text);
            },

            clearCompleted: function(){
                var completedTasks = this.collection.completed();
                this.collection.remove(completedTasks);
            }

        });     

        new TasksView;

    </script>


    <!-- Template JS -->


</body>
</html>

Wenn ich Besuch und laden Sie die Seite, und ich konnte sehen, eine nicht erfasste javascript-Fehler in der Konsole an.

Uncaught TypeError: Cannot read property 'auf' undefined auf der Linie 78.

Suche durch den code auf der indictaed Zeilennummer, Sie wies auf das

var TasksView = Backbone.View.extend({
    //.....
    initialize: function(){

        this.model.on('change', this.render, this); //this is the line the console is complaining
        this.model.on('remove', this.unrender, this);
        this.render();
    },
    //.....
});

Nachdem es diese für die nächsten paar Stunden und analysiert den code, ich konnte nicht herausfinden, warum dieses Modell muss instanziiert werden, wenn keine Aufgaben wurden Hinzugefügt, um die TaskView-Objekte noch. Es muss initialisiert werden, sobald ich Sie entfernen oder fügen Sie eine neue Aufgabe in das Modell ein. Ich verstehe nicht ganz, wie dieser würde eine Ausnahme werfen.

BTW, ich bin ganz neu Backbone.js und Underscore.js. Ich bin gerade nach einem online-tutorial, um herauszufinden, wie diese frameworks arbeiten...

Dank.

InformationsquelleAutor awongCM | 2014-05-23

  1. 0

    Sind Sie nicht verbindlich, jedes Modell zu Ihrer Ansicht. Können Sie ein Modell und/oder die Sammlung bei der Instanziierung von Ihrer neuen Ansicht. Diese Eigenschaften werden automatisch gebunden this.model /this.collection Ihrer Ansicht.

    Sind Sie nicht vorbei, ein Modell so this.model ist nicht definiert. Sie sollten übergeben Sie die leere taskslist so, dass, wenn es gefüllt später, die onchange ausgelöst und die Ansicht rerender.

    new TasksView({model: new Tasks()});
    Danke @Hazaart. Das sollte den trick tun!. Jedoch, wenn Sie dieses, und aktualisieren Sie die Seite. Ich bekomme eine andere Konsole log-Fehler. Es sagt " Uncaught RangeError: Maximum call stack size exceeded. Dies geschieht, in der seine Linie. diese.Sammlung = new Aufgaben; wie es Scheint, hat massive rekursive Aufrufe in dieser Sammlung erweitert die Funktion in einem ständigen Zustand... das bedeutet, Dass irgendwo in diesem tutorial code ist nicht korrekt eingestellt....
    Sie sind in der Tat schaffen eine neue Kollektion jedes mal, wenn Sie initialisieren Sie Ihre Sammlung. Sie müssen diese Zeile zu entfernen. Ersetzen Sie alle Verweise auf this.collection zu this innen Ihre Aufgaben-Sammlung. So ist es bereits im Besitz der Sammlung in diesem Zusammenhang.
    Danke, hab das, einem festen. Sieht aus wie ich, die Begegnung mit mehr bugs in diesem tutorial code, wie ich fixierte einen kleinen Fehler nach dem anderen. Ich erkennen, es gibt eine Menge von bad code smell in diesem tutorial bug...
    Beste Weg, um zu lernen, den code verstehen! 🙂
    Ich habe ein ähnliches problem...aber werde ich machen, nur eine Frage(ich erstelle ein eigenes topic für mein problem).Hatten wir binden Sie ein Modell in eine Ansicht, in backbone-0.5.1 auch?Weil ich die oben genannten version und die funktionierte ohne model - /view-Bindung

    InformationsquelleAutor Anonymoose

Schreibe einen Kommentar