JSFiddle - React, Tailwind, and code Playground

by tomas_eklund

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<p>Company: <input data-bind="value: company" /></p>
<p>Articles:</p>
<ul data-bind="foreach: articles">
    <li>
        <span data-bind="click: $parent.selectArticle, 
            css: {clickable: $parent.selectedArticle() != $data}">Article</span>:
        <input data-bind="value: article" />
    </li>
</ul>
<p>Options for selected article: <b><span data-bind="text: selectedArticle().article"></span></b></p>
<div data-bind="with: selectedArticle">
    <ul>
        <!-- ko foreach: options -->
        <li>Option #<span data-bind="text: 1+$index()"></span>
            <input data-bind="value: option" />
        </li>
        <!-- /ko -->
        <li><a href="#" data-bind="click: addOption">add option</a></li>
    </ul>
</div>

CSS

.clickable {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

var testData = {
    company: 'Acme Inc',
    articles: [{
        article: 'Evil Anvil',
        options: [{
            option: 'Real steel'
        }, {
            option: 'Fantastic plastic'
        }]
    }, {
        article: 'Perfect Poison',
        options: [{
            option: 'Vanilla'
        }, {
            option: 'Cherry'
        }]
    }, ]
};

function Option(data) {
    this.option = ko.observable(data.option);
}

function Article(data) {
    this.article = ko.observable(data.article);
    this.options = ko.observableArray();
    for (var i = 0; i < data.options.length; i++)
    this.options.push(new Option(data.options[i]));
    this.addOption = function () {
        this.options.push(new Option({
            option: 'new option'
        }));
    }
}

function Inventory(data) {
    var self = this;
    self.company = ko.observable(data.company);
    self.articles = ko.observableArray();
    for (var i = 0; i < data.articles.length; i++)
    self.articles().push(new Article(data.articles[i]));
    self.selectedArticle = ko.observable(self.articles()[0]);
    self.selectArticle = function(item) {
        self.selectedArticle(item);
    }
}

var viewModel = new Inventory(testData);
ko.applyBindings(viewModel);