Reactive demos

shopping_cart.opa

basket = Reactive.List.cloud([], Template.table_item, Template.table_empty)
basket_summary = Reactive.List.clone(basket, Template.list_item, Template.list_empty)

items_initial = [ "item1", "item2" ]
items = items_initial ++ [ "item3", "item4 ]

function fill(_) { List.iteri({ function(i,v) basket.add(make_item(i,v), i) }, items_initial) }

function random() {
    cart_pos = Random.int(List.length(items_initial))
    item_pos = Random.int(List.length(items))
    item = { _id : "{cart_pos}", value : List.unsafe_get(item_pos, items) }
    basket.change(item, cart_pos)
}

html =
    <div class="row-fluid">
        <div class="span8">
            <h4>Shopping Cart</h4>
            <table class="table table-striped">{basket}</table>
        </div>
        <div class="span4">
            <h4>Summary</h4>
            <ul>{basket_summary}</ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="form-actions">
            <button class="btn" onclick={fill}><i class="icon-circle-arrow-down"></i> Fill my cart</button>
            <button class="btn" onclick={ function(_) random() }><i class="icon-refresh"></i> Random updates</button>
        </div>
    </div>

template.opa

module Template {
    function table_empty() { <tr><td>Empty</td></tr> }
    function table_item(item) { <tr><td class="highlight">{item.value}</td></tr> }
    function list_empty() { <li>No item</li> }
    function list_item(item) { <li class="highlight">{item.value}</li> }
}

thermostat.opa

temp = Reactive.value("50")

function updated(_) {
    temp.set(#slider.val)
}

html =
    <h2>The current temperature is <code>{temp}</code> C</h2>
    <input id=#slider type="range" onchange={updated} />

wiki.opa

wiki = Reactive.value("Enter some text...")
wiki.sync(true) // or wiki = Reactive.sync(wiki)

function updated(_) {
    wiki.set(#text.val)
}

html =
    <h4>Edit</h4>
    <textarea id=#text onkeyup={updated}>{wiki}</textarea>
    <h4>Preview</h4>
    <div class="well">{wiki}</div>