bjeto JS hierárquico de mapeamento KnockOut

Estou tentando criar modelos de exibição usando o plug-in de mapeamento KnockOut,

Este é o objeto, basicamente abaixo está uma frase com palavra

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

Gostaria de ter três modelos de visualização,

O artigo deve conter frases, uma Sentença deve conter palavras

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

Gostaria de colocar isso no modo de exibição como abaixo;

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

Nem tenho certeza do que estou tentando alcançar é factível, mas acho que preciso de mapeamentos, mas não consigo fazer isso funcionar,

existe algum teste meu, talvez ajude a entender melhor o meu problema,http: //jsfiddle.net/sureyyauslu/2wTjy/6

Muito obrigado antecipadamente ...

questionAnswers(2)

yourAnswerToTheQuestion