JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script id="tplAuthor" type="text/html">
    <div class="author">
        <h3 data-bind="text: 'Победитель ' + ($index() + 1)"></h3>
    <input type="text" data-bind="textInput: nickname" placeholder="Nickname or URL" />
        <textarea data-bind="textInput: comment" placeholder="Comment"/>
    </div>
</script>
<script id="tplMonth" type="text/html">
    <div class="month">
    <h3 data-bind="text: date"></h3>
    <div data-bind="template: { name: 'tplAuthor', foreach: authors }"></div>
    </div>
</script>

<div data-bind="template: { name: 'tplMonth', foreach: months}">
</div>
<input type="submit" value="Сохранить" />

CSS

.month {
  border: solid 1px #e00;
    padding: 10px;
    margin-bottom: 10px;
}

.author {
width: 200px;
    display: inline-block;
    margin-right: 20px;
}

.author input, .author textarea {
    display: block;
    margin-bottom: 10px;
    width: 100%;
}
.author textarea {
    height: 80px;
}
}

JavaScript

var AuthorVM = function() {
    this.nickname = ko.observable();
    this.comment = ko.observable();
}

var MonthVM = function(date) {
    this.authors = [new AuthorVM(), new AuthorVM(), new AuthorVM()];
    this.date = date;
}

MonthVM.create = function(date) {
    return new MonthVM(date);
}

var RootViewModel = function (initalData) {
    var months = [
        'Октябрь 2015',
                
                'Сентябрь 2015',
                        'Август 2015',
        ];

    this.months = ko.utils.arrayMap(months, MonthVM.create);
}
var vm = new RootViewModel();
console.log(vm);
ko.applyBindings(vm);