issue List

by Graham Walsh

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class='issuelist'> 
    
    <form data-bind="submit:addIssue">
        Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
    </form>
     
    <p>Your Issues:</p>
    <select multiple="multiple" height="5" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
     
    <div>
        <button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
        <button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
    </div>
    
</div>

CSS

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

JavaScript

var Issuelist = function () {
    this.issueToAdd = ko.observable("");
    this.allIssues = ko.observableArray(["test"]); 
    this.selectedIssues = ko.observableArray(["test"]);                        
 
    this.addIssue= function () {
        if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0)) 
            this.allIssues.push(this.issueToAdd());
        this.issueToAdd(""); 
    };
 
    this.removeSelected = function () {
        this.allIssues.removeAll(this.selectedIssues());
        this.selectedIssues([]); 
    };
 
    this.sortIssues = function() {
        this.allIssues.sort();
    };
};
 
ko.applyBindings(new Issuelist());