JSFiddle - React, Tailwind, and code Playground

by sureyyauslu

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<p data-bind="foreach:sentences">
        <span data-bind="text:id"></span>
        <p data-bind="with:words">
            <span data-bind="text:text"></span>                   
        </p>
</p>

JavaScript

var data = {
    name: 'Scot',
    sentences: [
        {
        id: 1,
        words: [{
            text: 'Alicw'},
        {
            text: 'Alice'}]},
    {
        id: 2,
        words: [{
            text: 'eeee'},
        {
            text: 'yyyyy'}]}
    ]
};

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

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

var mapping = {
    'sentences': {
        create: function(options) {
            return new mySentenceModel(options.data);
            
        }
    }
}

var wordMapping = {
    'words': {
        create: function(options) {
            return new myWordModel(options.data);
        }
    }
}

var viewModel = ko.mapping.fromJS(data, mapping);

ko.applyBindings(viewModel);