Làm thế nào để bạn hiển thị chính xác khung nhìn bộ sưu tập Backbone marionette dựa trên thuộc tính mảng javascript mô hình?

Question

* CẬP NHẬT: Xem mã câu trả lời cuối cùng trong khối mã cuối cùng bên dưới. *

Hiện tại tôi đang gặp sự cố khi hiển thị bộ sưu tập trong chế độ xem bộ sưu tập. Bộ sưu tập là thuộc tính của một mô hình hiện có như vậy (mã giả)

ApplicationVersion { Id: 1, VersionName: "", ApplicationCategories[] } 

Vì vậy, về cơ bản ApplicationVersion có một thuộc tính được gọi là ApplicationCategories là mảng javascript. Hiện tại khi tôi hiển thị chế độ xem bộ sưu tập được liên kết với ApplicationCategories, không có gì được hiển thị. Nếu tôi gỡ lỗi trong trình gỡ lỗi javascript của Chrome, có vẻ như các danh mục chưa được phổ biến (vì vậy tôi cho rằng ApplicationVersion chưa được tìm nạp). Đây là mã của tôi vì nó hiện đang đứng

ApplicationCategory Model, Bộ sưu tập, và xem

ApplicationModule.ApplicationCategory = Backbone.Model.extend({ 
    urlRoot:"/applicationcategories" 
}); 

ApplicationModule.ApplicationCategories = Recruit.Collection.extend({ 
    url:"/applicationcategories", 
    model:ApplicationModule.ApplicationCategory, 

    initialize: function(){ 
     /* 
     * By default backbone does not bind the collection change event to the comparator 
     * for performance reasons. I am choosing to not preoptimize though and do the 
     * binding. This may need to change later if performance becomes an issue. 
     * See https://github.com/documentcloud/backbone/issues/689 
     * 
     * Note also this is only nescessary for the default sort. By using the 
     * SortableCollectionMixin in other sorting methods, we do the binding 
     * there as well. 
     */ 
     this.on("change", this.sort); 
    }, 

    comparator: function(applicationCategory) { 
     return applicationCategory.get("order"); 
    }, 

    byName: function() { 
     return this.sortedBy(function(applicationCategory) { 
      return applicationCategory.get("name"); 
     }); 
    } 
}); 

_.extend(ApplicationModule.ApplicationCategories.prototype, SortableCollectionMixin); 

ApplicationModule.ApplicationCategoryView = Recruit.ItemView.extend({ 
    template:"application/applicationcategory-view-template" 
}); 

ApplicationModule.ApplicationCategoriesView = Recruit.CollectionView.extend({ 
    itemView:ApplicationModule.ApplicationCategoryView 
}); 

mẫu ApplicationCategory

<section id="<%=name%>"> 
    <%=order%> 
</section> 

ApplicationVersion Model, Bộ sưu tập, và xem

ApplicationModule.ApplicationVersion = Backbone.Model.extend({ 
    urlRoot:"/applicationversions" 
}); 

ApplicationModule.ApplicationVersions = Recruit.Collection.extend({ 
    url:"/applicationversions", 
    model:ApplicationModule.ApplicationVersion 
}); 

ApplicationModule.ApplicationVersionLayout = Recruit.Layout.extend({ 
    template:"application/applicationversion-view-template", 

    regions: { 
     applicationVersionHeader: "#applicationVersionHeader", 
     applicationVersionCategories: "#applicationVersionCategories", 
     applicationVersionFooter: "#applicationVersionFooter" 
    } 
}); 

ApplicationModule.ApplicationVersionController = { 
    showApplicationVersion: function (applicationVersionId) { 
     ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId}); 

     var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({ 
      model:ApplicationModule.applicationVersion 
     }); 

     ApplicationModule.applicationVersion.fetch({success: function(){ 
      var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({ 
       collection: ApplicationModule.applicationVersion.application_categories 
      }); 
      applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories); 
     }}); 

     // Fake server responds to the request 
     ApplicationModule.server.respond(); 

     Recruit.layout.main.show(applicationVersionLayout); 
    } 
}; 

đây là mẫu ApplicationVersion của tôi

<section id="applicationVersionOuterSection"> 
<header id="applicationVersionHeader"> 
    Your Application Header <%= id %> 
</header> 
<section id="applicationVersionCategories"> 
</section> 
<footer id="applicationVersionFooter"> 
    Your footer 
</footer> 

Một điều cần lưu ý Tôi hiện đang sử dụng Sinon để thử phản ứng máy chủ của tôi, nhưng tôi không nghĩ rằng đây đang gây ra những vấn đề như nó đang phản ứng với các thông tin như tôi mong đợi nhìn qua javascript debugger (và như tôi đã nói nó đang hiển thị id ApplicationVersion chính xác). Tôi cũng có thể cung cấp mã này nếu nó giúp

Nó hiện đang hiển thị id phiên bản ứng dụng (id trong mẫu), vì vậy tôi biết nó đang tìm nạp dữ liệu chính xác cho các thuộc tính bình thường, nó không hiển thị javascript Ứng dụng của tôi mảng tài sản.

Vì vậy, cuối cùng tôi ràng buộc với sự thành công của tìm nạp cho ApplicationVersion, sau đó thiết lập chế độ xem cho ApplicationCategories. Vì điều này không hoạt động như tôi mong đợi, tôi tự hỏi liệu có cách nào tốt hơn để tạo chế độ xem bộ sưu tập này không?

Nhờ sự giúp đỡ

CẬP NHẬT: Mã làm việc ví dụ mà Derek Bailey dẫn tôi quá.

ApplicationModule.ApplicationVersionController = { 
    showApplicationVersion: function (applicationVersionId) { 
     ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId}); 

     var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({ 
      model:ApplicationModule.applicationVersion 
     }); 

     ApplicationModule.applicationVersion.fetch(); 

     // Fake server responds to the request 
     ApplicationModule.server.respond(); 

     Recruit.layout.main.show(applicationVersionLayout); 

     var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({ 
      collection: new Backbone.Collection(ApplicationModule.applicationVersion.get('application_categories')) 
     }); 
     applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories); 
    } 
}; 

Answer 1

Bộ sưu tập của bộ sưu tập yêu cầu phải có Backbone.Collection hợp lệ, không phải là mảng đơn giản. Bạn cần tạo Backbone.Collection từ mảng của mình khi chuyển nó tới chế độ xem:

new MyView({ 
    collection: new Backbone.Collection(MyModel.Something.ArrayOfThings) 
});