AngularJS Example:
by mhevery
HTML
<div ng-app="todo" ng-controller="TodoCtrl">
<div>
<span id="debug"></span> ms. Count: {{items.length}}
</div>
<div>
[ <a href ng-click="add(0)">+0</a>
| <a href ng-click="add(1)">+1</a>
| <a href ng-click="add(10)">+10</a>
| <a href ng-click="add(100)">+100</a>
| <a href ng-click="add(1000)">+1000</a>
]
</div>
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<input type="text" ng-model="item.text">
</li>
</ul>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc4.js"></script>
<style>
JavaScript
angular.module('todo', []).run(function($rootScope){
var ScopeProto = $rootScope.__proto__;
var delegate = ScopeProto.$apply;
var debug = $('#debug');
ScopeProto.$apply = function() {
var start = new Date().getTime();
var value = delegate.apply(this, arguments);
var end = new Date().getTime();
debug.text(end-start);
return value;
}
});
function TodoCtrl($scope) {
$scope.items = [];
$scope.add = function(count) {
while(count--) {
$scope.items.push({done: true, text:'text'});
}
};
}