nathanpalmer

var PersonCollection = Spine.Model.setup("Person", [ 
  "firstName", 
  "lastName" 
]);

PersonCollection.include({
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
});

nathanpalmer

<p>First name: <input name="firstName" /></p>
<p>Last name: <input name="lastName" /></p>
<h2>Hello, <span id="fullName"> </span>!</h2>

nathanpalmer

var ClickCollection = Spine.Model.setup("Click", [ 
    "numberOfClicks" 
]);

ClickCollection.include({
    hasClickedTooManyTimes: function() {
        return this.numberOfClicks >= 3;
    },
    canClick: function() {
        return !this.hasClickedTooManyTimes();

nathanpalmer

<div>You've clicked <span id="clicks">&nbsp;</span> times</div>

<button id="clicker">Click me</button>

<div id="reset">
    That's too many clicks! Please stop before you wear out your fingers.
    <button id="resetter">Reset clicks</button>
</div>

nathanpalmer

var ItemCollection = Spine.Model.setup("Item", [ "itemToAdd", "items" ]);
ItemCollection.extend(DataBind);

ItemCollection.include({
    addItem: function() {
        if (this.itemToAdd != "") { 
            this.items.push(this.itemToAdd);
            this.itemToAdd = "";
            this.save();
        }

nathanpalmer

<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd.length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>

nathanpalmer

<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>

nathanpalmer

var ItemCollection = Spine.Model.setup("Item", [ "itemToAdd", "allItems", "selectedItems" ]);
ItemCollection.extend(DataBind);

ItemCollection.include({
    addItem: function() {
        if (this.itemToAdd != "") { 
            this.allItems.push(this.itemToAdd);
            this.itemToAdd = "";
            this.save();
        }

nathanpalmer

var ItemCollection = Spine.Model.setup("Item", [ "stringValue", "passwordValue", "booleanValue", "optionValues", "selectedOptionValue", "multipleSelectedOptionValues", "radioSelectedOptionValue" ]);
ItemCollection.extend(DataBind);

ItemCollection.include({
     
});

var Item = ItemCollection.create({ stringValue: "Hello", passwordValue: "mypass", booleanValue: true, optionValues: ["Alpha","Beta","Gamma"], selectedOptionValue: "Gamma", multipleSelectedOptionValues: ["Alpha"], radioSelectedOptionValue: "Beta" });

nathanpalmer

var ItemCollection = Spine.Model.setup("Item", [ "stringValue", "passwordValue", "booleanValue", "optionValues", "selectedOptionValue", "multipleSelectedOptionValues", "radioSelectedOptionValue" ]);
ItemCollection.extend(DataBind);

ItemCollection.include({
     
});

var Item = ItemCollection.create({ stringValue: "Hello", passwordValue: "mypass", booleanValue: true, optionValues: ["Alpha","Beta","Gamma"], selectedOptionValue: "Gamma", multipleSelectedOptionValues: ["Alpha"], radioSelectedOptionValue: "Beta" });