2012-03-21 1 views
6

у меня возникают проблемы с knockout.js и отображение плагин не создавая модели для дочерних массивов в исходных данныхKnockout.js отображение не является обязательным детей моделей

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); 

(Это небольшой по репо Я могу это сделать. Fiddle доступен здесь: http://jsfiddle.net/msieker/6Wx3s/)

Короче говоря, конструктор InnerModel никогда не вызывается. Я пробовал это с 'InnerModel' и там, где он находится в этом фрагменте, и в пределах отображения 'inner'. Из большинства сообщений о том, что я видел, это должно просто работать, но, очевидно, я что-то упускаю.

У кого-нибудь есть опыт с этим, который может указывать на меня в правильном направлении?

EDIT: на основе @John Earles ответа, я получил это немного ближе к тому, что мне нужно:

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);? 

Однако parent, который переходит в руки InnerModel является null, которые получают вот и вся причина, по которой я занимаюсь картографическим плагином. Документы заставляют меня думать, что это должно быть передано в параметре options функции create, но вместо этого я получаю observable, значение которого равно null. Любые дополнительные указатели в этом направлении?

+0

К сожалению, родитель не собирается делать то, что вы хотите. Родитель в этом случае дает вашему массиву, что новый элемент является частью, а не объектом, который содержит этот массив. Вам нужно будет создать родительскую ассоциацию самостоятельно. Например: http://jsfiddle.net/jearles/6Wx3s/5/ –

+0

вы можете попробовать это http://stackoverflow.com/questions/9951521/map-json-data-to-knockout-observablearray-with-specific- view-model-type Это решило мои проблемы с отображением дочернего родителя – Naveen

ответ

2

Вы не передаете свои параметры сопоставления (который определяет, как отображать внутренние) в вызов сопоставления OuterModel.

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

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

EDIT: обновление скрипку, чтобы показать ручное крепление родителя:

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

1

у меня был очень похожий сценарий некоторое время назад, проверить Q & А здесь: Map JSON data to Knockout observableArray with specific view model type

В моем примере у меня есть StateViewModel, который содержит наблюдаемый массив, заполненный двумя CityViewModels, и каждый CityViewModel содержит наблюдаемый массив, заполненный 2-мя объектами StreetViewModels.

Я тогда хотел, чтобы эта структура модели представления была построена из моих иерархических данных json с использованием плагина отображения нокаута.

Это скрипку вырисовывает ответ: http://jsfiddle.net/KodeKreachor/pTEbA/2/

 Смежные вопросы

  • Нет связанных вопросов^_^