JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<span>test</span><div id="storyBody" data-bind="foreach: CurrentStory.Paragraphs">
    <p data-bind="text: $data">

    </p>
</div>

JavaScript

var currentUser = "";

var nm={};

    nm.Story = function()
    {
        var story=ko.observable({
            Paragraphs:ko.observableArray()
        });
        
        console.log('story123',story().Paragraphs);
        return story;
    };

    nm.StoryPreview = function()
    {

        this.Preview = "";
        this.documentId = 0;


    };

    nm.vm = function ()
    {

        var UserStoryList = ko.observableArray([]),
            CurrentStory = ko.observable(),
            GetCurrentStory = function (data) {
                UserStoryList()[0];
            },
            LoadUserStoriesList = function() {
                for (y=0;y<3;y++){
                    var story = nm.Story();
                    console.log('new story',story);
                    console.log(typeof story);
                    story.Title = ko.observable("test story");
                    
                    var paras = ko.observableArray([]);
                    for(i=0;i<4;i++){
                        var para = {
                            paraid:ko.observable(i),
                            para:ko.observable('para ' + i)
                        }
                        console.log(para);
                       console.log(story.Paragraphs); story.Paragraphs.push(para);
                    }
                    console.log(paras);
                    
                    console.log('story.Paragraphs',story().Paragraphs);
                   console.log(story,this); this.UserStoryList.push(story);
                    console.log('this.UserStoryList',this.UserStoryList);
                }
                ;
            };
   
           

        return {

            UserStoryList: UserStoryList,
            CurrentStory: CurrentStory,
            LoadUserStoriesList : LoadUserStoriesList,
            GetCurrentStory: GetCurrentStory

        }

    }();


    nm.vm.LoadUserStoriesList();
console.log(nm.vm.UserStoryList);
    ko.applyBindings(nm.vm);