KO Bitwise Example

by Isaac Vargas

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0beta.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.css">
<input type="checkbox" data-bind="checked: checkedList, value: 1" />
<label>Value 1</label>
<input type="checkbox" data-bind="checked: checkedList, value: 2" />
<label>Value 2</label>
<input type="checkbox" data-bind="checked: checkedList, value: 4" />
<label>Value 4</label>
<input type="checkbox" data-bind="checked: checkedList, value: 8" />
<label>Value 8</label>
<hr/>
<input data-bind="value: bitwiseValue, valueUpdate: 'input'" />

JavaScript

$(function () {
    var vm = function () {
        var vm = this;

        this.checkedList = ko.observableArray();
        this.bitwiseValue = ko.computed({
            read: function () {
                return vm.checkedList().reduce(function (prev, curr) {
                    return prev | curr;
                }, 0);
            },
            write: function (myVal) {
                vm.checkedList.removeAll();
                var placeValue = 1;
                
                while(myVal > 0) {
                    if((myVal % 2) == 1) {
                        //alert(placeValue);
                        vm.checkedList.push(placeValue.toString());
                    }
                    
                    myVal = myVal >>> 1;                    
                    placeValue = placeValue * 2;
                }
            }
        }, this);
    };
    //Must instance the vm
    var instance = new vm;
    instance.bitwiseValue(6);
    ko.applyBindings(instance);
});