knockout_example

by MKGaru

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar-full.min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<script src="https://rawgit.com/mbest/knockout-switch-case/master/knockout-switch-case.js"></script>
<ul data-bind="
    foreach: {
        data:browsers.filter(function(browser){return browser.version>10}) , 
        as: 'browser'
    }
">
    <li data-bind="on.click:$parent.edit=browser">{{browser.name}} ({{browser.version}})</li>
</ul>

<section>
    <header>
        <h3>Add Browser</h3>
    </header>
    <dl>
        <dt>Name:</dt>
        <dd>
            <input type="text" size="4" data-bind="value:edit.name" />
        </dd>
        
        <dt>Version:</dt>
        <dd>
            <input type="text" size="2" data-bind="value:edit.version" />
        </dd>
    </dl>
    {{#switch: browsers.indexOf(edit)!=-1 }}
        {{#case: true}}
            <button data-bind="click:add">Edit</button>
            <button data-bind="click:cancel">Cancel</button>
        {{/case}}
        {{#case: false}}
            <button data-bind="click:add">Add</button>
        {{/case}}
    {{/switch}}
</section>

CSS

ul li:hover{
    cursor:pointer;
    text-decoration:underline;
}

JavaScript

function Browser(name,version){
    this.name = name;
    this.version = version;
    ko.track(this);
}
function AppViewModel() {
    this.edit = new Browser();
    this.browsers= [
        new Browser('Firefox',32),
        new Browser('Internet Explorer',10),
        new Browser('Chrome',38),
        new Browser('Safari',8),
        new Browser('Opera',25)
    ];
    ko.track(this);
}
AppViewModel.prototype.add = function(){
    this.browsers.push(this.edit);
    this.edit = new Browser();
}
AppViewModel.prototype.cancel= function(){
    this.edit = new Browser();
}

ko.punches.enableAll();
ko.applyBindings(new AppViewModel());