KnockOut Mapping Иерархическая JS объект

Question

Я пытаюсь создать вид модели, используя KNOCKOUT отображение плагин,

Это объект, в основном ниже предложение со словами в нем.

var data = { 
name: 'Example Title', 
sentences: [ 
    {id: 1, words: [{text: 'word1'}, {text: 'word2'}]}, 
    {id: 2, words: [{text: 'word3'}, {text: 'word4'}]} 
      ]}; 

Я хотел бы иметь три вид модели,

Статья должна содержать предложения, Предложение должно содержать слова

var ArticleViewModel = function(data) 
{ 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.sentences = ko.observableArray([]); 
} 

var SentenceViewModel = function(data) 
{ 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.words = ko.observableArray([]); 
} 

var WordViewModel = function(data) 
{ 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.text = ko.observable(data.text); 
} 

Я хотел бы поставить это в виду, как показано ниже;

<p data-bind="foreach:sentences"> 
    <span data-bind="foreach:words"> 
    <span data-bind="text:text"> 
    </span> 
</p> 

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

здесь некоторое испытание моего, может быть, поможет чтобы лучше понять мою проблему, http://jsfiddle.net/sureyyauslu/2wTjy/6/

спасибо много заранее ...

Answer 1

проблема заключалась в том, что вы имели ар тег вложен в другой. Механизм шаблонов не смог разобрать эту неправильную разметку.

Вы также использовали привязку, когда я думаю, что вам нужен другой foreach.

<p data-bind="foreach:sentences"> 
     <span data-bind="text:id"></span> 
     <span data-bind="foreach:words"> 
      <span data-bind="text:text"></span>     
     </span> 
</p> 

Наконец модель предложения может быть сведена к

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

Вам не нужно определить Ид и т.д., как это все заботятся отображение плагина.

http://jsfiddle.net/madcapnmckay/6hMA3/

Надеется, что это помогает.