ko-superScroll/example.html at master · skaggmannen/ko-superScroll · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html style="height: 100%">
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="knockout-3.2.0.js"></script>
	<script type="text/javascript" src="ko-superScroll.js"></script>
	<title>SuperScroll Example</title>
</head>
<body style="height: 100%">
	<h1>SuperScroll Example</h1>
	<input type="range" value="120" min="40" max="200" step="1" data-bind="value: myChildWidth" />
	<p data-bind="text: myChildWidth"></p>
	<div style="width: 1000px; height: 70%; overflow: auto" data-bind="superScroll: { template: myTemplate, resource: myResource, childSize: myChildSize }"></div>
	<script type="text/javascript">
	$(document).ready(function () {
		function Child(aPhrase) {
			var self = this;

			self.myPhrase = aPhrase;
		}

		function ViewModel() {
			var self = this;

			self.myTemplate = "child-template";
			self.myPhrase = "Hello";
			self.myChildWidth = ko.observable(120);

			self.myChildSize = ko.pureComputed(function() {
				return {
					myWidth: self.myChildWidth(),
					myHeight: self.myChildWidth(),
				}
			});

			self.myChildren = new Array(100);

			for (var i = 0; i < self.myChildren.length; i++) {
				self.myChildren[i] = new Child(" World " + i);
			}

			var count = 10000;

			self.myResource = {
				getCount: function() {
					var deferred = $.Deferred();

					deferred.resolve(count);

					return deferred.promise();
				},
				get: function(aOffset, aLimit) {
					var deferred = $.Deferred();

					var children = [];
					for (var i = aOffset; i < aOffset + aLimit; i++) {
						if (i >= count) {
							break;
						}

						var child = new Child("World " + i);
						children.push(child);
					}

					deferred.resolve(children);

					return deferred.promise();
				},
			}

		}

		ko.applyBindings(new ViewModel());
	});
	</script>

	<script type="text/html" id="child-template">
		<div style="width: 100%; height: 100%" data-bind="text: $parent.myPhrase + myPhrase"></div>
	</script>
</body>
</html>