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="angular" ng-app="app" ng-controller="VM as vm">
    Angular:{{vm.title}}
    <ul>
        <li ng-repeat="one in vm.data">{{vm.getDate()|  date:'EEE MMM d y H:mm:ss Z'}}</li>
    </ul>
    <button ng-click="vm.addData()">Add Data</button>
</div>
<p>↑　データを追加すると、すべての要素が再生成される</p>
<p>↓　データを追加すると、追加した要素のみが生成される</p>
<div id="knockout">
    Knockout:{{title}}
    <ul data-bind="foreach:data">
        <li>{{$root.getDate()}}</li>
    </ul>
    <button data-bind="click:addData">Add Data</button>
</div>

CSS

#angular{
    border-color: red;
}
#knockout{
    border-color: darkorange;
}

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

JavaScript

// Common VModel
function VM(){
    this.title = "Re-Rendering Test";
    this.data = [];
}
VM.prototype.getDate = function(){
    return new Date();
}
VM.prototype.addData = function(){
    this.data.push({});
}

// for Angular;
angular.module('app',[])
    .controller('VM',VM);

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