Select List - Part 1

Knockout Select List blog post

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="unstyled" data-bind="foreach: apps">
    <li>
        <label>
            <input type="checkbox" data-bind="checked: selected"/>
            <span data-bind="text: name"></span>
        </label>
    </li>
</ul>

<hr/>

<p>Display the results from our selectedItems functions</p>
<button onclick="displayResults();">Display Results</button>

CSS

.unstyled
{
    list-style:none;
    margin:0;
    padding:0;
}

label
{
    cursor:pointer;
}

JavaScript

var viewModel = function(){
    var self = this;
    self.apps = [
        {name:'Freckle',selected:false},
        {name:'Beanstalk',selected:true},
        {name:'DropBox',selected:false},
        {name:'Postmark',selected:false}
    ];
    
    //using javascript
    self.selectedItems = function(){
        var selectedItems = [];
        for(var i = 0, len = self.apps.length; i < len; i++) {
            if(self.apps[i].selected){
                selectedItems.push(self.apps[i]);
            }
        }
        return selectedItems;
    }
    
    //using knockout utils
    self.selectedItemsKO = function(){
        return ko.utils.arrayFilter(self.apps, function(app){
            return app.selected;
        });
    };
    
    //using jquery
    self.selectedItemsJQ = function(){
        return $.grep(self.apps, function(app){
            return app.selected;
        });
    };
    
    //using underscore
    self.selectedItems_ = function(){
        return _.filter(self.apps, function(app){
            return app.selected;
        });
    };    
}

var vm = new viewModel();
ko.applyBindings(vm);

window.displayResults = function(){
    var selectedNames = vm.selectedItems().map(function(app){return app.name}).join(', ');
    alert('JS function : ' + selectedNames);
    
    var selectedNames = vm.selectedItemsKO().map(function(app){return app.name}).join(', ');
    alert('KO function : ' + selectedNames);
    
    var selectedNames = vm.selectedItemsJQ().map(function(app){return app.name}).join(', ');
    alert('jQuery function : ' + selectedNames);
    
    var selectedNames = vm.selectedItems_().map(function(app){return app.name}).join(', ');
    alert('Underscore function : ' + selectedNames);
    
};