Angular and Knockout Test

Angular and Knockout Test

by MKGaru

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.debug.js"></script>
<script src="http://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<div id="knockout">
    {{title}}
    <ul>
        {{#foreach:{data:timestamps,as:'timestamp'}}}
        <li>{{timestamp}}</li>
        {{/foreach}}
    </ul>
</div>

CSS

#knockout{
    border-color: darkorange;
}

#knockout{
    width: 500px;
    height: 250px;
    border-style:solid;
    margin: 10px;
    overflow: auto;
}

JavaScript

// Common VModel
function VM($interval){
    this.title = "Re-Rendering Test";
    this.timestamps = [new Date()];
    
    var vm = this;
}

// for Knockout;
(function(){
    var koVM = new VM(setInterval);
    ko.track(koVM);
    ko.punches.enableAll();
    ko.applyBindings(koVM,document.querySelector("#knockout"));
})();