Cobblestone

Branching

We’ll start with a simple example that illustrates the if-block, with a form to change things.

<script>

var foods = {
    pizza: true,
    ramen: true
};

</script>
<script type="text/x-cob" data-key="foods">

<form>
    <label>
        <input type=checkbox checked={pizza} onchange="pizza = this.checked">
        pizza
    </label>
    <label>
        <input type=checkbox checked={ramen} onchange="ramen = this.checked">
        ramen 
    </label>
</form>

{if pizza}
    <p>Pizza party!</p>
{elif ramen}
    <p>I guess we're having ramen tonight.</p>
{else}
    <p>Time to go to the store.</p>
{/if}

</script>

Address Book

This example demonstrates several features:

• The each-block
• Adding an element to an array
• Deleting an element from an array
• Synchronizing a dependent variable with a getter
• Synchronizing a dependent variable in the event handler, with the help of a method

<script>

var contacts = {
    makeEntry: (form) => {

            let entry = {
                name: form.elements.name.value,
                phone: form.elements.phone.value,
                cool: form.elements.cool.checked,
                deleting: false,
                editing: false
            };

            entry.classes = (entry.cool) ? 'cool' : '';

            return entry;
    },
    adding: false,
    entries: [
        {
            name: 'Jennifer',
            phone: '555-4823',
            editing: false,
            cool: true,
            deleting: false,
            classes: 'cool'
        },
        {
            name: 'Doc',
            phone: '555-4385',
            cool: true,
            deleting: false,
            editing: false,
            classes: 'cool'
        }
    ]
};

Object.defineProperty(contacts, 'any', {
    enumerable: true,
    get() { return (0 !== this.entries.length); }
});

</script>

<script type="text/x-cob" data-key="contacts">

{if any}
    <ul>
    {each entries as e}
        <li>
            {if e.editing}
                <form onsubmit="
                    event.preventDefault();
                    e = makeEntry(this);
                    this.reset();
                ">
                    <table>
                        <tr>
                            <th>Name:</th>
                            <td colspan=2><input name=name value={e.name} required></td>
                        </tr>
                        <tr>
                            <th>Phone:</th>
                            <td colspan=2><input type=tel name=phone value={e.phone} required></td>
                        </tr>
                        <tr>
                            <th>Cool:</th>
                            <td><input type=checkbox name=cool checked={e.cool}></td>
                            <td class=controls>
                                <span class="control cancel" onclick="e.editing = false">cancel</span>
                                <input type=submit value=Save>
                            </td>
                        </tr>
                    </table>
                </form>
            {else}
                <span class={e.classes}>{e.name}: {e.phone}</span>
                <span class=controls>
                    <span class="control edit" onclick="e.editing = true; e.deleting = false;">edit</span>
                    {if e.deleting}
                        Really?
                        <button onclick="e = undefined">Delete</button>
                        <span class="control cancel" onclick="e.deleting = false">cancel</span>
                    {else}
                        <span class="control delete" onclick="e.deleting = true">delete</span>
                    {/if}
                </span>
            {/if}
        </li>
    {/each}
    </ul>
{else}
    <p class=none>&mdash; none &mdash;</p>
{/if}
{if adding}
    <form onsubmit="
        event.preventDefault();
        let entry = makeEntry(this);
        entries.push(entry);
        adding = false;
    ">
        <table>
            <tr>
                <th>Name:</th>
                <td colspan=2><input name=name required></td>
            </tr>
            <tr>
                <th>Phone:</th>
                <td colspan=2><input type=tel name=phone required></td>
            </tr>
            <tr>
                <th>Cool:</th>
                <td><input type=checkbox name=cool></td>
                <td class=controls>
                    <span class="control cancel" onclick="adding = false;">cancel</span>
                    <input type=submit value=Add>
                </td>
            </tr>
        </table>
    </form>
{else}
    <p class="control add" onclick="adding = true;">Add</p>
{/if}

</script>