2012-03-28 14 views
10

Tôi có hai mô hình xương sống, tải từ máy chủ:Backbone JS mô hình phức tạp lấy

var Model = Backbone.Model.extend({}); 
var SubModel = Backbone.Model.extend({}); 

var SubCollection = Backbone.Collection.extend({ 
    model: SubModel 
}); 

var m = new Model(); 
m.fetch({success: function(model) 
{ 
    model.submodels = new SubCollection(); 
    model.submodels.url = "/sub/" + model.get("id"); 
    model.submodels.fetch(); 
}}); 

Vì vậy, máy chủ phải gửi hai phản ứng riêng biệt. Ví dụ:

{ name: "Model1", id: 1 } // For Model fetch 

[{ name: "Submodel1", id: 1 }, { name: "Submodel2", id: 2 }] // For Submodel collection fetch 

Có cách nào để lấy một ví dụ mẫu có thu Submodel cùng một lúc, như:

{ 
    name: "Model1", 
    id: 1, 
    submodels: [{ name: "Submodel1", id: 2 }, { name: "Submodel1", id: 2 }] 
} 

Trả lời

11

Để có thể làm điều đó là lên để back-end của bạn - nó không thực sự có bất cứ điều gì để làm với Backbone.

Bạn có thể định cấu hình công nghệ back-end của mình để trả về các mô hình liên quan dưới dạng tài nguyên lồng nhau không?

Nếu back-end của bạn là Rails, ví dụ, và mô hình của bạn có liên quan trong ActiveRecord, một trong những cách để làm điều này là một cái gì đó giống như

respond_to do |format| 
    format.json { render :json => @model.to_json(:include => [:submodels])} 
end 

công nghệ gì back-end bạn đang sử dụng?

Edit:

Xin lỗi, hiểu lầm ý chính của câu hỏi của bạn, một khi bạn đã có bạn back-end trả lại JSON ở dạng thích hợp, yeah, có những điều bạn cần làm trong Backbone để có thể xử lý nó.

Backbone-Relational

Một cách để đối phó với nó là sử dụng Backbone-Relational, một plugin cho xử lý mô hình liên quan.

Bạn xác định mô hình liên quan thông qua một tài sản 'quan hệ':

SubModel = Backbone.RelationalModel.extend({}); 

SubCollection = Backbone.Collection.extend({ 
    model: SubModel 
}); 

Model = Backbone.RelationalModel.extend({ 
    relations: [ 
    { 
     type: 'HasMany', 
     key: 'submodels', 
     relatedModel: 'SubModel', 
     collectionType: 'SubCollection' 
    } 
    ] 
}); 

Khi mẫu của bạn fetches các JSON, nó sẽ tự động tạo ra một SubCollection dưới bất động sản 'mô hình con' và cư nó với mô hình con - một cho mỗi Đối tượng JSON trong mảng.

jsfiddle cho xương sống quan hệ: http://jsfiddle.net/4Zx5X/12/

By Hand

Bạn có thể làm điều này bằng tay nếu bạn muốn là tốt. Trong liên quan đến trọng các parse chức năng cho các lớp học mẫu của bạn (tha thứ cho tôi nếu JS của tôi là không chính xác 100% - được làm CoffeeScript rất nhiều thời gian gần đây Hardwired của nó trong não của tôi)

var Model = Backbone.Model.extend({ 
    parse: function(response) { 
    this.submodels = new SubCollection(); 
    // Populate your submodels with the data from the response. 
    // Could also use .add() if you wanted events for each one. 
    this.submodels.reset(response.submodels); 
    // now that we've handled that data, delete it 
    delete response.submodels; 
    // return the rest of the data to be handled by Backbone normally. 
    return response; 
    } 
}); 

parse() chạy trước khi khởi tạo() và trước khi hash thuộc tính được thiết lập, vì vậy bạn không thể truy cập model.attributes và model.set() không thành công, vì vậy chúng tôi phải đặt tập hợp dưới dạng thuộc tính trực tiếp của mô hình và không phải là "thuộc tính" mà bạn sẽ truy cập với get/set.

Tùy thuộc vào những gì bạn muốn xảy ra trên "save()", bạn có thể phải ghi đè `toJSON 'để có phiên bản mô hình tuần tự hóa của bạn trông giống như những gì API của bạn mong đợi.

jsfiddle:

http://jsfiddle.net/QEdmB/44/

+0

cũng ... back-end là làm bằng tay CPP (và không có cách để thay đổi nó để Rails hoặc Django) :) nhưng, như xa như tôi hiểu, giải pháp của bạn sẽ định dạng phản ứng giống như một JSON được đưa ra trong câu hỏi của tôi ... vì vậy, xương sống sẽ không giải thích các đối tượng trong mảng "mô hình con" dưới dạng Mô hình con ... tôi có đúng không? –

+0

Biến thể có quan hệ xương sống dường như không hoạt động chính xác, vì mảng "mô hình con" trở thành một mảng đối tượng, không phải Mô hình con tôi đã thử nghiệm fiddle của bạn một chút, hãy xem http://jsfiddle.net/4Zx5X/3/ –

+0

Ok, tôi sẽ thử nó theo yêu cầu ajax thực. Dù sao, cảm ơn bạn đã trả lời chi tiết của bạn! –

Các vấn đề liên quan