StoreIt! Grocery List Demo

by Donavon West

HTML

<script src="http://wzrd.in/bundle/consoleit"></script>
<script src="http://wzrd.in/bundle/storeit"></script>
<script src="http://wzrd.in/bundle/storeit-provider-webstorage"></script>
<script src="http://wzrd.in/bundle/storeit-serializer-json"></script>

<h2>StoreIt! Grocery List Demo</h2>
<p>
    A simple MVVM app that used StoreIt to persist the data to HTML5 sessionStorage.
    Add some items, remove some items, then refresh your browser. Notice that they are
    still there in the UI.
</p>

<div class='liveExample'> 
    
    <form data-bind="submit:addItem">
        Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    </form>
     
    <p>Your values:</p>
    <select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select>
     
    <div>
        <button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
    </div>
    
</div>

<div id="logs"></div>

CSS

.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

#logs {
    background-color:#eeeeee;
    height:200px;
    overflow:auto;
}

JavaScript

// -------------------------------------
// Setup logging.
var console = require("consoleit")("logs");
console.log("Setting up Logging");

// -------------------------------------
// Setup StoreIt.
console.log("Setting up StoreIt!");

var Storeit = require("storeit");
var StoreitProvider = require("storeit-provider-webstorage");
var StoreitSerializer = require("storeit-serializer-json");

// Create a JSON serializer.
var jsonSerializer = new StoreitSerializer();

// Create a WebStorage provider that uses sessionStorage. 
var providerOptions = {
    localOrSessionStorage: window.sessionStorage,
    preferredItemSerializerName: jsonSerializer.name,
    metadataSerializerName: jsonSerializer.name,
    allSerializers: [jsonSerializer]
};
var sessionStorageProvider = new StoreitProvider(providerOptions);

// Create a store.
var groceryStore = new Storeit("grocery", sessionStorageProvider);

window.onload = function () {
    console.log("window.onload fired");
    // -------------------------------------
    // Setup the UI.
    console.log("Setting up the UI");
    
    // Based on Knockout "Better List Demo".
    // http://knockoutjs.com/examples/betterList.html
    var BetterListModel = function () {
        this.itemToAdd = ko.observable("");
        this.allItems = ko.observableArray([]); // Initial items
        this.selectedItems = ko.observableArray([]); // Initial selection
    
        // Here when Add button clicked.
        this.addItem = function () {
            var item = this.itemToAdd(); // Get item from textbox.
            if (item) { // Don't add blank items.
                console.log('Calling groceryStore.set("%s", "%s")', item, item);
                groceryStore.set(item, item);
                this.itemToAdd(""); // Clear the text box.
            }
        };

        // Here when Remove button clicked.
        this.removeSelected = function () {
            var items = this.selectedItems(); // Get array of selected items.
           ...