2012-03-21 31 views
6

Tôi đang gặp một vấn đề với knockout.js và các plugin lập bản đồ không tạo mô hình cho mảng con trong dữ liệu nguồnKnockout.js lập bản đồ không ràng buộc mô hình con

var data = { 
    outer: [ 
     { 
     'id': 1, 
     name: 'test outer', 
     inner: [{ 
      'id': 1, 
      name: 'test inner'}]}] 
}; 

function OuterModel(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 

    self.fullText = ko.computed(function() { 
     return self.id() + ". " + self.name(); 
    }); 
} 

function InnerModel(data, parent) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 

    self.fullText = ko.computed(function() { 
     return self.id() + ". " + self.name() + "(" + parent + ")"; 
    }); 
} 

function PageModel() { 
    var self = this; 
    this.data = null; 
} 

var mapping = { 
    'outer': { 
     key: function(data) { 
      return ko.utils.unwrapObservable(data.id); 
     }, 
     create: function(options) { 
      var thisModel = new OuterModel(options.data); 
      return thisModel; 
     } 
    }, 
    'inner': { 
     key: function(data) { 
      return ko.utils.unwrapObservable(data.id); 
     }, 
     create: function(options) { 
      var thisModel = new InnerModel(options.data); 
      return thisModel; 
     } 
    } 
}; 

var model = new PageModel(); 
model.data = ko.mapping.fromJS(data, mapping); 

(Đây là một nhỏ của một repo Tôi có thể làm cho điều này. Fiddle có sẵn ở đây: http://jsfiddle.net/msieker/6Wx3s/)

Tóm lại, hàm tạo InnerModel không bao giờ được gọi. Tôi đã thử điều này với các 'InnerModel' cả hai nơi nó là trong đoạn này, và trong ánh xạ 'inner'. Từ hầu hết các tài khoản của những gì tôi đã nhìn thấy, điều này chỉ nên làm việc, nhưng rõ ràng là tôi đang thiếu một cái gì đó.

Bất kỳ ai có kinh nghiệm với điều này có thể đưa tôi đi đúng hướng?

EDIT: Dựa trên @ John Earles câu trả lời, tôi đã nhận được này một chút gần gũi hơn với những gì tôi cần:

var data = { 
    outer: [ 
     { 
     'id': 1, 
     name: 'test outer', 
     inner: [{ 
      'id': 1, 
      name: 'test inner'}]}] 
}; 

var outerMapping = { 
    'outer': { 
     key: function(data) { 
      return ko.utils.unwrapObservable(data.id); 
     }, 
     create: function(options) { 
      var thisModel = new OuterModel(options.data); 
      return thisModel; 
     } 
    } 
}; 

function OuterModel(data) { 
    var self = this; 
    ko.mapping.fromJS(data, innerMapping, this); 

    self.fullText = ko.computed(function() { 
     return self.id() + ". " + self.name(); 
    }); 
} 

var innerMapping = { 
    'inner': { 
     key: function(data) { 
      return ko.utils.unwrapObservable(data.id); 
     }, 
     create: function(options) { 
      console.log(options); 
      var thisModel = new InnerModel(options.data, options.parent()); 
      return thisModel; 
     } 
    } 
}; 

function InnerModel(data, parent) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 

    self.fullText = ko.computed(function() { 
     return self.id() + ". " + self.name() + "(" + parent + ")"; 
    }); 
} 

function PageModel() { 
    var self = this; 
    this.data = null; 
} 

var model = new PageModel(); 
model.data = ko.mapping.fromJS(data, outerMapping); 
ko.applyBindings(model);? 

Tuy nhiên, parent đó được truyền cho InnerModel là null, mà nhận được đó là toàn bộ lý do tôi theo đuổi plugin bản đồ. Các tài liệu dẫn tôi tin rằng điều này sẽ được chuyển thông số options đến hàm create, nhưng thay vào đó tôi nhận được một observable có giá trị là null. Bất kỳ con trỏ bổ sung nào theo hướng này?

+0

Thật không may cha mẹ sẽ không làm những gì bạn muốn. Cha mẹ trong trường hợp này cung cấp cho mảng của bạn rằng mục mới là một phần của, không phải là đối tượng có chứa mảng đó. Bạn sẽ cần tự tạo liên kết gốc. Như thế này: http://jsfiddle.net/jearles/6Wx3s/5/ –

+0

bạn có thể thử http://stackoverflow.com/questions/9951521/map-json-data-to-knockout-observablearray-with-specific- view-model-type Điều này giải quyết được vấn đề của tôi với ánh xạ con-cha mẹ – Naveen

Trả lời

2

Bạn không chuyển tùy chọn ánh xạ (xác định cách ánh xạ bên trong) vào cuộc gọi lập bản đồ OuterModel.

function OuterModel(data) { 
    var self = this; 
    ko.mapping.fromJS(data, mapping, this); 

    self.fullText = ko.computed(function() { 
     return self.id() + ". " + self.name(); 
    }); 
} 

EDIT: Cập nhật fiddle để hiển thị tập tin đính kèm nhãn hiệu của công ty mẹ:

http://jsfiddle.net/jearles/6Wx3s/5/

1

Tôi đã có một kịch bản rất giống nhau một thời gian trở lại, hãy kiểm tra Hỏi & Một ở đây: Map JSON data to Knockout observableArray with specific view model type

Trong ví dụ của tôi, tôi có một StateViewModel trong đó chứa một ObservableArray dân cư với 2 CityViewModels, và mỗi CityViewModel chứa một observableArray dân cư với 2 StreetViewModels.

Sau đó tôi muốn cấu trúc mô hình chế độ xem này được xây dựng từ dữ liệu json phân cấp của tôi bằng cách sử dụng plugin ánh xạ loại trực tiếp.

Fiddle này vạch ra câu trả lời: http://jsfiddle.net/KodeKreachor/pTEbA/2/

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