Tại sao backbone.js trả về một mảng trống khi truy cập các mô hình?

Question

Tôi có một bộ định tuyến truy cập bộ sưu tập của nó. Vòng lặp của tôi không lặp qua các mô hình vì vậy tôi đã thử ghi lại bộ sưu tập để xem nó đã trả về cái gì. Hóa ra khi tôi đăng nhập bộ sưu tập trực tiếp tôi thấy tất cả các mô hình như mong đợi. Nhưng nếu tôi cố gắng để đăng nhập các thuộc tính mô hình của bộ sưu tập tôi nhận được một mảng trống! Nó không có ý nghĩa. Những dòng này trực tiếp theo nhau. Tôi đã thử thay đổi thứ tự và nhận được kết quả tương tự.

console.log(this.collection); 
=> Shots 
    _byCid: Object 
    _byId:  Object 
    length: 15 
    models: Array[15] 
    __proto__: Shots 
    ... 

console.log(this.collection.models); 
=> [] 

console.log(this.collection.length); 
=> 0 

Tại sao điều này lại xảy ra?

Dưới đây là các mã như nó là trong các bộ định tuyến để cung cấp cho một bối cảnh tốt hơn về nơi mã này được bắn:

# Routers 
class Draft.Routers.Shots extends Backbone.Router 
    routes: 
    ''   : 'index' 
    'shots/:id' : 'show' 

    initialize: -> 
    @collection = new Draft.Collections.Shots() 
    @collection.fetch() 

    index: -> 
    console.log @collection 
    console.log @collection.models 

Answer 1

tôi thấy rằng tôi cần thiết để lắng nghe cho bộ sưu tập để thiết lập lại. Vì vậy, thay vì chuyển mô hình vào chế độ xem, tôi đã tạo một chế độ xem khác chờ bộ sưu tập và lắng nghe sự kiện 'đặt lại' để kích hoạt 'hiển thị' cho chế độ xem.

# Routers 
class Draft.Routers.Shots extends Backbone.Router 
    routes: 
    ''   : 'index' 
    'shots/:id' : 'show' 

    initialize: -> 
    @collection = new Draft.Collections.Shots() 
    @collection.fetch() 

    index: -> 
    view = new Draft.Views.Desktop(collection: @collection) 

# Views 
class Draft.Views.Desktop extends Backbone.View 
    el: $("body") 

    initialize: -> 
    @collection.on("reset",@render,this) 

    render: -> 
    console.log @collection 
    console.log @collection.length 

Answer 2

Jim,

này không khắc phục vấn đề của bạn - bạn đã làm việc mà ra. Nhưng nó giải thích lý do tại sao bạn nhìn thấy đầu ra giao diện điều khiển mà bạn nhìn thấy.

Khi bạn chạy console.log (điều này), bạn xuất bản thân đối tượng và liên kết bàn điều khiển tham chiếu (con trỏ nếu bạn thích) vào các biến bên trong.

Khi bạn nhìn vào nó trong giao diện điều khiển, tại thời điểm console.log (this) chạy khu vực mô hình là trống rỗng, nhưng tại thời điểm bạn trông vào các bản ghi, bộ sưu tập đã kết thúc tải các mô hình và biến mảng bên trong được cập nhật, và tham chiếu tới biến đó trong nhật ký đối tượng hiển thị nội dung hiện tại.

Về cơ bản trong console.log (điều này), biến mô hình bên trong tiếp tục cuộc sống bình thường của nó và bảng điều khiển hiển thị trạng thái hiện tại tại thời điểm bạn đang xem nó, không phải tại thời điểm bạn gọi nó. Với console.log (this.models), mảng được bán phá giá, không có tham chiếu nào được giữ lại và tất cả các giá trị bên trong được đổ từng cái một.

Hành vi đó khá đơn giản để tái tạo với thời gian chờ ngắn, xem fiddle này .. http://jsfiddle.net/bendog/XVkHW/

Answer 3

Bạn có thể sử dụng lời hứa. (.done sẽ làm tốt)

@collection.fetch().done => 
    for model in @collection.models 
    console.log model 

điều này sẽ cung cấp cho bạn @ các mô hình của bộ sưu tập được tìm nạp và sẵn sàng để sử dụng.

hoặc nếu bạn không cần phải buộc các ứng dụng phải chờ đợi,

@collection.on 'sync', => 
    for model in @collection.models 
    console.log model 

Cả hai sẽ cho phép bạn làm những gì bạn muốn.