KnockoutVisitor

by Richard Hunter

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="container">
    
    <button data-bind="click: red">move to red</button>  
    <button data-bind="click: orange">move to orange</button> 
    <button data-bind="click: blue">move to blue</button> 
    <button data-bind="click: green">move to green</button> 
    <div data-bind="text: foo"></div>
    <div class="blocks">
    <div class="red">
        <div id="visitor">
            <button data-bind="click: pressButton">press</button>
        </div>
    </div>
    <!-- ko with: nestedModel -->
        <div class="blue" data-bind="text: bar"></div>
    <!-- /ko -->
    <div class="orange"></div>
    <div class="green"></div>
    </div>
    
    
    
    
</div>

CSS

#container {
    background : yellow;
    padding : 12px;
    
}
.blocks {
    box-sizing : border-box;
    width : 200px;
    height : 200px;
    background : pink;
    overflow : hidden;
}
.red, .blue, .orange, .green {
    float : left;
    box-sizing : border-box;
    padding : 20px;
    height : 100px;
    width : 100px;
}
.red { background : red; }
.blue { background : blue; }
.orange { background : orange; }
.green { background : green; }



#visitor {
    
    background : pink;
    padding : 12px;
    height : 50px;
    width : 50px;
}

JavaScript

var model = {
    
    red : function () {
        setTimeout(function () {
            $('.red').append($('#visitor'));
        }, 0);
    },
    
    orange : function () {
        setTimeout(function () {
            $('.orange').append($('#visitor'));
        }, 0);
    },
    
    blue : function () {
        setTimeout(function () {
            $('.blue').append($('#visitor'));
        }, 0);
    },
    
    green : function () {
        setTimeout(function () {
        $('.green').append($('#visitor'));
         }, 0);
    },

    foo : ko.observable("foo"),
    
    pressButton : function () {
    
        console.log("you have pressed this button");
    
    },
    
    nestedModel : {
    
        bar : "this is bar"
    }

}

ko.applyBindings(model);