JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<script src="https://rawgit.com/mikeric/rivets/v0.6.8/dist/rivets.js"></script>
<div id="template" style="display: none;">
    <li rv-each-item="items">
        <input type="checkbox" rv-checked="item.inCart" rv-on-click="controller.updateCart">{item.name}</input>
    </li>
</div>

<div id="shop">
    <p>All Items</p>
    <div class="items"></div>
</div>

<div id="cart">
    <p>Cart</p>
    <div class="cart"></div>
</div>

<p>The cart starts out hidden, click the button to simulate hide/show.  After the first click, the cart will be bound correctly.  Checking/Unchecking an item will update both views.</p>
<p>After the second click, simulating a user going back and forth from the items to the cart, the list under <b>All Items</b> no longer receives updates as items in the cart are added/removed.</p>
<button id="hideshow" rv-on-click="controller.simulateShowHideCart">Simulate hide/show Cart</button>

JavaScript

var template = document.querySelector("#template > li");
var itemsEl  = document.querySelector(".items");
var cartEl   = document.querySelector(".cart");

var items = [{ name: "one",   inCart: true  }, 
             { name: "two",   inCart: true  },
             { name: "three", inCart: true  },
             { name: "four",  inCart: false },
             { name: "five",  inCart: false }];

var cart = items.filter(function (item) {
    return item.inCart;
});

var controller = {
    updateCart: function (evt, context) {
        if (context.item.inCart) {
            cart.push(context.item);
        } else {
            var idx = 0;

            for (; idx < cart.length; ++idx) {
                if (cart[idx].name === context.item.name) break;
            }

            cart.splice(idx, 1);
        }
    }
}

itemsEl.appendChild(template.cloneNode(true));

var rvItems = rivets.bind(itemsEl, {
    items: items,
    controller: controller
});

var rvCart;

function simulateShowHideCart() {
    // Unbinding any cart view if it is already bound.
    if(rvCart) rvCart.unbind();
    else {    
       // Reset the cart to just the template
       cartEl.innerHTML = "";
       cartEl.appendChild(template.cloneNode(true));
    }
    
    // Now rebind the cart
    if(rvCart) rvCart.bind();
    else {
        rvCart = rivets.bind(cartEl, {
            items: cart,
            controller: controller
        });
    }
}

var rvHideShow = rivets.bind(document.querySelector("#hideshow"), {
    controller: { simulateShowHideCart: simulateShowHideCart }
});

//simulateShowHideCart();
//simulateShowHideCart();