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 ...