DomChanger Example

This is the React.JS example ported to DomChanger

HTML

<script src="https://rawgit.com/creationix/domchanger/master/domchanger.js"></script>

JavaScript

domChanger(FilterableProductTable, document.body).update([
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
]);

function FilterableProductTable(emit, refresh) {
  var filterText = '';
  var inStockOnly = false;
  return {
    render: render,
    on: { userInput: onUserInput }
  };
  function render(products) {
    return ["div",
      [SearchBar, filterText, inStockOnly],
      [ProductTable, products, filterText, inStockOnly]
    ];
  }
  function onUserInput(text, checked) {
    filterText = text;
    inStockOnly = checked;
    refresh();
  }
}

function SearchBar(emit, refresh, refs) {
  return { render: render };
  function render(filterText, inStockOnly) {
    return ["form", { onsubmit: cancel },
      ["input$filterText", {
        type: "text",
        placeholder: "Search...",
        onkeyup: handleChange,
        value: filterText
      }],
      ["p",
        ["input$inStockOnly", {
          type: "checkbox",
          onchange: handleChange,
          checked: !!inStockOnly
        }],
        "Only show products in stock"
      ]
    ];
  }
  function cancel(evt) {
    evt.preventDefault();
  }
  function handleChange() {
    emit("userInput",
      refs.filterText.value,
      refs.inStockOnly.checked
    );
  }
}

function ProductTable() {
  return { render: render };
  function render(products, filterText, inStockOnly) {
    var rows = [];
    var lastCategory = null;
    products.forEach(function(product) {
      if (product.name.indexOf(filterText) === -1 ||
          (!product.stocked && inStockOnly)) {
       ...