Как просмотреть данные модели после извлечения в backbone.js

Question

Я как бы новичок в позвоночнике, идущем от knockout.js, и я пытаюсь преодолеть этот простой горб. У меня есть этот код:

$(function(){ 
    window.Student = Backbone.Model; 

    window.Students = Backbone.Collection.extend({ 
     model: Student, 
     url: 'test.php' 
    }); 

    window.students = new Students(); 
    window.AppView = Backbone.View.extend({ 
     el: $('#container'), 
     initialize: function() { 
      Students.bind('reset', this.render); 
     }, 
     render: function(){ 
      console.log(Students.toJSON()); 
     } 
    }); 

    window.appview = new AppView(); 

$('#test').click(function(){ 
    //var students = new Students(); 
     students.fetch(); 
     var q = students.toJSON(); 
     console.log(q); 
    /*  
     students.create({ 
      name: 'John', 
      grade: 'A' 
     }); */ 
    }) 
}); 

Мой сервер посылает следующий JSON:

[{"id": "1233","name": "Karen","grade": "C"},{"id": "1234","name": "Susan", "grade": "F"}] 

Когда я нажимаю на кнопку и посмотреть на консоли в Chrome, я вижу:

Первый клик:

[] - Corrected -just an empty array 

Второй Click:

[ 
Object 
    grade: "C" 
    id: "1233" 
    name: "Karen" 
    __proto__: Object 
, 
Object 
    grade: "F" 
    id: "1234" 
    name: "Susan" 
    __proto__: Object 
] 

Первый вопрос: почему требуется два клика? Во-вторых: как я могу просто назначить/связать класс (как в виде коллекции, так и по id) с текстовым полем <li> или другим элементом пользовательского интерфейса (лучше всего сделать его наблюдаемым, когда появится ajax).

Answer 1

Сообщение консоли, которое вы видите, связано с обработчиком событий щелчка. Сообщение консоли из метода рендеринга никогда не вызывается.

Вы ничего не видите в первом сообщении журнала, так как fetch асинхронный метод, поэтому при вызове toJSON сразу после fetch, коллекция не была заселена от метода выборки еще.

Есть несколько изменений, которые необходимо внести в код, чтобы заставить его работать должным образом.

Во-первых, вам нужно передать в коллекции, когда вы инстанцирует вид

//original 
window.appview = new AppView(); 
//new 
window.appview = new AppView({ collection: window.students }); 

Тогда в поле зрения вам нужно привязать к событию сброса на коллекции, которая была передана в конструктор. (Вы должны связываться с реализованным объектом, а не определение объекта, как вы изначально делает)

window.AppView = Backbone.View.extend({ 
     el: $('#container'), 
     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.collection.bind('reset', this.render); 
     }, 
     render: function(){ 
      console.log(this.collection.toJSON()); 
     } 
    }); 

Теперь закомментируйте сообщение журнала консоли в вашем случае клика, то вы будете иметь только один раз нажать , и вы увидите сообщение журнала консоли из метода рендеринга.

$('#test').click(function(){ 
    //var students = new Students(); 
     students.fetch(); 
     //var q = students.toJSON(); 
     //console.log(q); 
    /* 
     students.create({ 
      name: 'John', 
      grade: 'A' 
     }); */ 
    })