Tải dữ liệu vào bộ sưu tập Backbone từ tệp JSON?

Question

Tôi đang cố gắng để tải một số dữ liệu vào một Bộ sưu tập Backbone từ một tập tin JSON địa phương, sử dụng mã rất cơ bản này:

window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.fetch({ url: "/init.json"}); 
    console.log('AllStudents', AllStudents); 

Trong báo cáo kết quả giao diện điều khiển, AllStudents trống. Nhưng init.json chắc chắn đang được tải. Có vẻ như sau:

[ 
    { text: "Amy", grade: 5 }, 
    { text: "Angeline", grade: 26 }, 
    { text: "Anna", grade: 55 }  
] 

Tôi đang làm gì sai?

CẬP NHẬT: Tôi cũng đã thử thêm một người biết lắng nghe reset trên .fetch() cuộc gọi, nhưng đó không phải sa thải một trong hai:

AllStudents.bind("reset", function() { 
    alert('hello world'); 
}); 
AllStudents.fetch({ url: "/init.json"}); 

Không cảnh báo xuất hiện.

UPDATE 2: Đang cố gắng kịch bản này (sao chép ở đây đầy đủ):

$(function(){ 
    window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.url = "/init.json"; 
    AllStudents.bind('reset', function() { 
     console.log('hello world'); 
    }); 
    AllStudents.fetch(); 
    AllStudents.fetch({ url: "/init.json", success: function() { 
     console.log(AllStudents); 
    }}); 
    AllStudents.fetch({ url: "/init.json" }).complete(function() { 
     console.log(AllStudents); 
    }); 
}); 

Chỉ có một giao diện điều khiển tuyên bố thậm chí còn xuất hiện, trong fetch() cuộc gọi thứ ba, và nó là một đối tượng có sản phẩm nào.

Hiện tại tôi hoàn toàn bối rối. Tôi đang làm gì sai?

Tệp JSON đang được phân phát dưới dạng ứng dụng/json, vì vậy không có gì liên quan đến điều đó.

Answer 1

Tôi nghĩ rằng bạn cần phải thêm {add:true} để các tùy chọn của lấy,

nếu bạn gán lấy cho một biến, bạn sẽ nhận được kết quả là tốt, nhưng sau đó nó không phải bên trong bộ sưu tập bạn muốn

Answer 2

Hoạt động I/O trong javascript hầu như luôn không đồng bộ, và vì vậy nó cũng có Backbone. Điều đó có nghĩa là chỉ vì AllStudents.fetch đã trả lại, nó chưa tìm nạp dữ liệu. Vì vậy, khi bạn nhấn vào câu lệnh console.log của mình, tài nguyên chưa được tìm nạp. Bạn phải vượt qua một callback để fetch:

AllStudents.fetch({ url: "/init.json", success: function() { 
    console.log(AllStudents); 
}}); 

Hoặc tùy chọn, sử dụng tính năng hứa hẹn mới trong jQuery (fetch sẽ trả về một lời hứa):

AllStudents.fetch({ url: "/init.json" }).complete(function() { 
    console.log(AllStudents); 
}); 

Answer 3

lấy() trả về một 'thành công' thông báo như đã được tuyên bố, nhưng điều đó chỉ có nghĩa là yêu cầu máy chủ đã thành công. fetch() đưa trở lại một số JSON, nhưng nó vẫn cần phải nhồi nó vào bộ sưu tập.

Bộ sưu tập kích hoạt sự kiện 'đặt lại' khi nội dung của nó được cập nhật. Đó là khi bộ sưu tập đã sẵn sàng để sử dụng ...

AllStudents.bind('reset', function() { alert('AllStudents bind event fired.'); }); 

Dường như bạn đã có điều này trong lần cập nhật đầu tiên của bạn. Điều duy nhất tôi đã làm khác là đặt fetch() ở phía trước của sự kiện ràng buộc.

Answer 4

Tên thuộc tính và giá trị thuộc tính không phải số trong tệp JSON của bạn phải được trích dẫn kép (""). Dấu nháy đơn hoặc không có dấu ngoặc kép tạo ra lỗi và đối tượng phản hồi không được tạo có thể được sử dụng để tạo các mô hình và điền vào bộ sưu tập.

So. Nếu bạn thay đổi nội dung tệp json thành:

[ 
    { "text": "Amy", grade: 5 }, 
    { "text": "Angeline", grade: 26 }, 
    { "text": "Anna", grade: 55 }  
] 

bạn sẽ thấy đối tượng bộ sưu tập không trống.

Bạn có thể thay đổi mã của bạn để nhìn thấy cả thành công và thất bại như sau:

AllStudents.fetch({ 
    url: "/init.json", 
    success: function() { 
      console.log("JSON file load was successful", AllStudents); 
     }, 
    error: function(){ 
     console.log('There was some error in loading and processing the JSON file'); 
    } 
    }); 

Để biết thêm chi tiết, có lẽ nó sẽ là một ý tưởng tốt để nhìn vào đến cách ajax đối tượng đáp ứng được tạo ra.