JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-sortable/0.8.1/knockout-sortable.min.js"></script>
<h2>Shelf</h2>
<ul data-bind="foreach: productArray">
    <li data-bind="draggable: $data"><span data-bind="text: productName"></span></li>
</ul>
<h2>Cart</h2>
<ul data-bind="sortable: listArray">
    <li data-bind="text: $root.calculatedName($data)"></li><!--  -->
</ul>
<h2>Debug</h2>
<div data-bind="text: ko.toJSON($root, null, 2)"></div>

CSS

ul {
    min-height:40px;
    border: 1px solid black;
    width: 100px;
}

JavaScript

var myData = {
    productArray: [
        {"productID": 1, "productName": "bike", "someOtherData": "bleh" },
        {"productID": 2, "productName": "car", "someOtherData": "bleh" },
        {"productID": 3, "productName": "train", "someOtherData": "bleh" },
        {"productID": 4, "productName": "tank", "someOtherData": "bleh" }
    ],
    listArray : []
};

var options = {
    productArray: {
        create: function(mappingData) {
            var result = ko.mapping.fromJS(mappingData.data);

            result.clone = function() {
                return { productID: result.productID() };
            };
            
            return result;
        }
    }
};


var logicModel = function(){ 
    var self = this;

    self.calculatedName = function (arg) {
        var x = ko.utils.unwrapObservable(arg.productID);

        for (var i = self.productArray().length - 1; i >= 0; i--) {
            if (self.productArray()[i].productID() == x) {
                return self.productArray()[i].productName();
            }
        };
        return "*ahem*"; //if something went wrong!
    };
};

//create an instance of the logic
var viewModel = new logicModel();
// map the model
var actualViewModel = ko.mapping.fromJS(myData, options, viewModel);
//hook up the viewmodel
ko.applyBindings(actualViewModel);