JSFiddle - React, Tailwind, and code Playground

by Jorgelig

HTML

<div id="contener">
    <div id="productListView">
        <select multiple="multiple" id="MyproductListView" size="10" style="min-width: 120px;" data-bind="options: productCollection, value: listViewSelectedItem, optionsText: 'description'"></select>
    </div>
    <div id="productView" data-bind="with: selectedProduct">
        <p>SKU: <span data-bind="text: sku"></span>

        </p>
        <p>Description: <span data-bind="text: description"></span>

        </p>
        <p>SKU: <span data-bind="text: price"></span>

        </p>
        <p>Description: <span data-bind="text: cost"></span>

        </p>
        <p>Description: <span data-bind="text: quantity"></span>

        </p>
    </div>
    <div id="NewProduct" data-bind="with: selectedProduct">
        <form>
            <fieldset>
                <legend>Product Details</legend>
                <label>SKU :
                    <input type="text" data-bind="value:sku" />
                </label>
                <br />
                <label>Description :
                    <input type="text" data-bind="value:description" />
                </label>
                <br />
                <label>Price :
                    <input type="text" data-bind="value:price" />
                </label>
                <br />
                <label>Cost :
                    <input type="text" data-bind="value:cost" />
                </label>
                <br />
                <label>Quantity :
                    <input type="text" data-bind="value:quantity" />
                </label>
            </fieldset>
        </form>
    </div>
    <div id="buttonContainer">
        <button type="button" data-bind="click:addNewProduct">Add</button>
        <button type="button" data-bind="click:RemoveProduct">Remove</button>
        <button type="button" data-bind="click:DoneEditingProduct">Done</button>
    </div>
</div>

JavaScript

window.myapp = {};

 (function (myapp) {

     var self = this;

     function product() {
         this.sku = ko.observable("");

         this.description = ko.observable("");

         this.price = ko.observable(0.00);

         this.cost = ko.observable(0.00);

         this.quantity = ko.observable(0);
     }

     myapp.Product = product;

 }(window.myapp));

 (function (myApp) {

     function productsViewModel() {
         var self = this;

         self.selectedProduct = ko.observable();

         self.productCollection = ko.observableArray([{
             sku: 'sku',
             description: 'des',
             price: '5.0',
             cost: '8.0',
             quantity: '1'
         }]);

         self.listViewSelectedItem = ko.observable(null);

         self.addNewProduct = function () {

             var p = new myApp.Product();

             self.selectedProduct(p);
         }.bind(self);

         self.DoneEditingProduct = function () {
             debugger;
             var p = self.selectedProduct();

             if (!p) return;

             if (self.productCollection.indexOf(p) > -1) return;

             self.productCollection.push(p);

             self.selectedProduct(null);
             self.productCollection.valueHasMutated();

         }.bind(self);

         self.RemoveProduct = function () {

             var p = self.selectedProduct();

             if (!p) return;

             return self.productCollection.remove(p);
         };

         self.listViewSelectedItem.subscribe(function (product) {
             if (product) {
                 self.selectedProduct(product);
             }


         });

     }

     myApp.ProductsViewModel = productsViewModel;

 }(window.myapp));

 (function (myApp) {

     function app() {
         this.run = function () {
             var vm = new myApp.ProductsViewModel();
             ko.applyBindings(vm);
         };
     }

     myApp.App = app;
 }(window.myapp));



 var app = new...