JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.2.1/lodash.min.js"></script>
<h3>Fruits</h3>

<table>
    <thead>
        <tr>
            <th>Cart</th>
            <th>Fruit</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: fruits">
        <tr>
            <td>
                <select data-bind="options: carts, optionsCaption: 'Select cart', value: cart"></select>
            </td>
            <td><span data-bind="text: fruit"></span>

            </td>
        </tr>
    </tbody>
</table>

<h3>Available carts</h3>

<ul data-bind="foreach: cartList">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

var vm = function () {
    var fruits = ko.observableArray([{
        cart: ko.observable(1),
        fruit: 'Apple',
        carts: ko.computed(function () {
            var tempCartList = [];
            if ( !! this.cart) tempCartList.push(this.cart());
            else console.log("Couldnot reference");
            return tempCartList;
        },this)
    }]);

    var initCartList = ko.observableArray([1, 2, 3]);
    var cartList = ko.computed(function () {
        var tempCartList = [];
        _.each(initCartList(), function (cart_item) {
            var matched = false;
            _.each(fruits(), function (fruit_item) {
                if (fruit_item.cart() === cart_item) matched = true;
            });
            if (!matched) tempCartList.push(cart_item);
        });
        return tempCartList;
    });

    return {
        fruits: fruits,
        cartList: cartList
    }

};

ko.applyBindings(new vm());