34 |
35 |
36 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/lessons/binding/binding.js:
--------------------------------------------------------------------------------
1 | (function (root, factory) {
2 | var freeExports = typeof exports == 'object' && exports,
3 | freeModule = typeof module == 'object' && module && module.exports == freeExports && module,
4 | freeGlobal = typeof global == 'object' && global;
5 | if (freeGlobal.global === freeGlobal) {
6 | window = freeGlobal;
7 | }
8 |
9 | // Because of build optimizers
10 | if (typeof define === 'function' && define.amd) {
11 | define(['rx', 'exports'], function (Rx, exports) {
12 | root.tko = factory(root, exports, Rx);
13 | return root.tko;
14 | });
15 | } else if (typeof module === 'object' && module && module.exports === freeExports) {
16 | module.exports = factory(root, module.exports, require('rx'));
17 | } else {
18 | root.tko = factory(root, {}, root.Rx);
19 | }
20 | }(this, function (global, exp, Rx, undefined) {
21 |
22 | var Observer = Rx.Observer,
23 | Observable = Rx.Observable,
24 | observableCreate = Rx.Observable.create,
25 | fromEvent = Rx.Observable.fromEvent,
26 | BehaviorSubject = Rx.BehaviorSubject,
27 | Subject = Rx.Subject,
28 | CompositeDisposable = Rx.CompositeDisposable,
29 | disposableCreate = Rx.Disposable.create,
30 | disposableEmpty = Rx.Disposable.empty,
31 | timeoutScheduler = Rx.Scheduler.timeout,
32 | inherits = Rx.Internals.inherits,
33 | splice = Array.prototype.splice;
34 |
35 | var sub = 'subscribe',
36 | fn = 'function',
37 | onNext = 'onNext';
38 |
39 | function noop () { }
40 |
41 | var tko = { };
42 |
43 | var ObservableArray = (function (_super) {
44 |
45 | function ObservableArray(items) {
46 | this.values = [];
47 | this.lifetimes = [];
48 | for (var i = 0, len = items.length; i < len; i++) {
49 | this.push(items[i]);
50 | }
51 |
52 | _super.call(this);
53 | }
54 |
55 | inherits(ObservableArray, _super);
56 |
57 | var observableArrayPrototype = ObservableArray.prototype;
58 |
59 | observableArrayPrototype.subscribe = function (observerOrOnNext) {
60 | observerOrOnNext || (observerOrOnNext = noop);
61 | var subscription = _super.prototype.subscribe.apply(this, arguments);
62 |
63 | this.purge();
64 | var obsFunc = typeof observerOrOnNext === fn ?
65 | observerOrOnNext :
66 | observerOrOnNext.onNext;
67 |
68 | for(var i = 0, len = this.lifetimes.length; i < len; i++) {
69 | obsFunc(this.lifetimes[i]);
70 | }
71 |
72 | return subscription;
73 | };
74 |
75 | observableArrayPrototype.push = function (item) {
76 | this.values.push(value);
77 | var lifetime = new BehaviorSubject(value);
78 | this.lifetimes.push(lifetime);
79 | this.onNext(lifetime);
80 |
81 | return this.values.length;
82 | };
83 |
84 | observableArrayPrototype.remove = function (value) {
85 | var index = this.values.indexOf(value);
86 |
87 | this.splice(index, 1);
88 |
89 | return index !== -1;
90 | };
91 |
92 | observableArrayPrototype.splice = function () {
93 | splice.apply(this.values, arguments);
94 | var removed = spliced.apply(this.lifetimes, arguments);
95 |
96 | for (var i = 0, len = removed.length; i < len; i++) {
97 | removed[i].onCompleted();
98 | }
99 | };
100 |
101 | observableArrayPrototype.dispose = function () {
102 | for (var i = 0, len = this.lifetimes.length; i < len; i++) {
103 | this.lifetimes[i].onCompleted();
104 | }
105 | };
106 |
107 | observableArrayPrototype.purge = function () {
108 | for (var i = 0, len = this.lifetimes.length; i < len; i++) {
109 | var lifetime = this.lifetimes[i];
110 | if (lifetime.isCompleted) {
111 | this.remove(lifetime);
112 | }
113 | }
114 | };
115 |
116 | return ObservableArray;
117 | }(Subject));
118 |
119 | tko.binders = {
120 | attr: function (target, context, options) {
121 | var disposable = new CompositeDisposable();
122 |
123 | for (var key in options) {
124 | (function (key) {
125 | var obsOrValue = options[key];
126 | disposable.add(tko.utils.applyBindings(obsOrValue, function (x) {
127 | target.attr(key, x);
128 | }));
129 | }(key));
130 | }
131 |
132 | return disposable;
133 | },
134 | checked: function (target, context, obsOrValue) {
135 | var disposable = new CompositeDisposable();
136 | if (onNext in obsOrValue) {
137 | var observer = obsOrValue;
138 |
139 | disposable.add(fromEvent(target, 'change')
140 | .map(function () {
141 | return target.prop('checked');
142 | })
143 | .subscribe(observer.onNext.bind(observer)));
144 | }
145 | disposable.add(tko.utils.applyBindings(obsOrValue, function (x) {
146 | target.prop('checked', x);
147 | }));
148 |
149 | return disposable;
150 | },
151 | click: function (target, context, options) {
152 | return tko.binders.event(target, context, options, 'click');
153 | },
154 | css: function (target, context, options) {
155 | var disposable = new CompositeDisposable();
156 |
157 | for (var key in options) {
158 | (function (key) {
159 | disposable.add(tko.utils.applyBindings(options[key], function (x) {
160 | target.toggleClass(css, x);
161 | }));
162 | }(key));
163 | }
164 |
165 | return disposable;
166 | },
167 | event: function (target, context, options, type) {
168 | type || (type = options.type);
169 | var obs = fromEvent(target, type);
170 |
171 | return obs.subscribe(function (e) {
172 | var opts = {
173 | target: target,
174 | context: context,
175 | e: e
176 | };
177 | if (typeof options === fn) {
178 | options(opts);
179 | } else {
180 | options.onNext(opts);
181 | }
182 | });
183 | },
184 | foreach: function (target, context, obsArray) {
185 | var disposable = new CompositeDisposable();
186 |
187 | var template = target.html().trim();
188 |
189 | disposable.add(disposableCreate(function () {
190 | target.empty().append(template);
191 | }));
192 |
193 | timeoutScheduler.schedule(function () {
194 | disposable.add(obsArray.subscribe(function (lifetime) {
195 | var sub,
196 | disposer,
197 | child = $(template).appendTo(target),
198 | binding = tko.internal.applyBindings(child, {
199 | viewModel: lifetime.value,
200 | viewModelRoot: context. viewModelRoot,
201 | viewModelParent: context.viewModel
202 | }),
203 |
204 | dispose = function () {
205 | child.remove();
206 | disposable.remove(binding);
207 | disposable.remove(disposer);
208 | disposable.remove(sub);
209 | },
210 |
211 | disposer = disposableCreate(dispose),
212 |
213 | sub = lifetime.subscribe(noop, dispose, dispose);
214 |
215 | disposable.add(binding);
216 | disposable.add(disposer);
217 | disposable.add(sub);
218 | }));
219 | });
220 |
221 | return disposable;
222 | },
223 | html: function (target, context, obsOrValue) {
224 | return tko.utils.applyBindings(obsOrValue, target.html.bind(target));
225 | },
226 | text: function (target, context, obsOrValue) {
227 | return tko.utils.applyBindings(obsOrValue, target.text.bind(target));
228 | },
229 | value: function (target, context, options) {
230 | var disposable = new CompositeDisposable();
231 |
232 | var options = tko.utils.parseBindingOptions(options);
233 | if (options.on && options.on.indexOf('after') === 0) {
234 | options.on = options.on.slice(5);
235 | options.delay = true;
236 | }
237 | if (typeof options.source.onNext === fn) {
238 | var observer = options.source,
239 | getObs = fromEvent(target, options.on || 'change');
240 |
241 | if (options.delay) {
242 | getObs = getObs.delay(0);
243 | }
244 |
245 | disposable.add(getObs
246 | .map(function () {
247 | return target.val();
248 | })
249 | .subscribe(observer.onNext.bind(observer))
250 | );
251 | }
252 |
253 | if (options.source instanceof Observable) {
254 | var focus = fromEvent(target, 'focus'),
255 | blur = fromEvent(target,'blur');
256 |
257 | options.source = options.source.takeUntil(focus).concat(blur.take(1)).repeat();
258 | }
259 |
260 | disposable.add(tko.utils.applyBindings(options.source, target.val.bind(target)));
261 |
262 | return disposable;
263 | },
264 | visible: function (target, context, options) {
265 | return tko.utils.applyBindings(obsOrValue, function (x) {
266 | taget.css(x ? '' : 'none');
267 | });
268 | }
269 | };
270 |
271 | tko.utils = {
272 | applyBindings: function (obsOrValue, cb) {
273 | if (sub in obsOrValue) {
274 | return obsOrValue.subscribe(cb);
275 | }
276 | cb(obsOrValue);
277 | return disposableEmpty;
278 | },
279 | wrap: function (valueOrBehavior) {
280 | return sub in valueOrBehavior ?
281 | valueOrBehavior :
282 | new BehaviorSubject(valueOrBehavior);
283 | },
284 | parseBindingOptions: function (param, options) {
285 | options || (options = {});
286 | if (typeof param === sub || onNext in param || sub in param) {
287 | options.source = param;
288 | return options;
289 | }
290 | for (var prop in param) {
291 | options[prop] = param[prop];
292 | }
293 | return options;
294 | },
295 | toJSON: function (obj) {
296 | return JSON.stringify(function (s, field) {
297 | if (field instanceof ObservableArray) {
298 | return field.values;
299 | }
300 | if (field instanceof Observable) {
301 | return field.value;
302 | }
303 | if (field instanceof Observer) {
304 | return undefined;
305 | }
306 | return field;
307 | });
308 | },
309 | unwrap: function (valueOrBehavior) {
310 | return 'value' in valueOrBehavior && sub in valueOrBehavior ?
311 | valueOrBehavior.value :
312 | valueOrBehavior;
313 | }
314 | };
315 |
316 | tko.internal = {
317 | applyBindings: function (target, context) {
318 | var bindings = tko.internal.parseBindings(target, context),
319 | disposable = new CompositeDisposable();
320 | for (var binder in bindings) {
321 | disposable.add(tko.binders[binder](target, context, bindings[binder]));
322 | }
323 |
324 | target.children().each(function () {
325 | disposable.add(tko.internal.applyBindings($(this), context));
326 | });
327 |
328 | return disposable;
329 | },
330 | parseBindings: function (target, context) {
331 | var binding = target.attr('data-tko');
332 | if (!binding) {
333 | return null;
334 | }
335 | var keys = ['$data', '$root', '$parent'],
336 | values = [context.viewModel, context.viewModelRoot, context.viewModelParent];
337 | for (var key in context.viewModel) {
338 | keys.push(key);
339 | values.push(context.viewModel[key]);
340 | }
341 |
342 | return new Function(keys, 'return { ' + binding + ' };').apply(null, values);
343 | }
344 | };
345 |
346 | tko.applyBindings = function (vm, target) {
347 | target || (target = $(window.document.body));
348 | return tko.internal.applyBindings(target, {
349 | viewModel: vm,
350 | viewModelRoot: vm,
351 | viewModelParent: null
352 | });
353 | };
354 |
355 | tko.observableArray = function (items) {
356 | if (!arguments.length) {
357 | items = [];
358 | }
359 | return new ObservableArray(items);
360 | };
361 |
362 | tko.behavior = function (value) {
363 | return new Rx.BehaviorSubject(value);
364 | };
365 |
366 | /**
367 | * var obs = tko.computed({
368 | * params: {
369 | * a: Rx.Observable.interval(100),
370 | * b: Rx.Observable.interval(250),
371 | * c: Rx.Observable.interval(75),
372 | * d: Rx.Observable.interval(650)
373 | * },
374 | * read: function (params) {
375 | * return params.a + ":" + params.b + ":" + params.c + ":" + params.d;
376 | * }
377 | * });
378 | *
379 | * obs.subscribe(function (x) {
380 | * console.log(x);
381 | * });
382 | */
383 | tko.computed = function (options) {
384 | var keys = [], values = [];
385 | for (var prop in options.params) {
386 | keys.push(prop);
387 | values.push(tko.utils.wrap(options.params[prop]));
388 | }
389 |
390 | var source = Rx.Observable.combineLatest(values, function () {
391 | var args = arguments,
392 | params = {};
393 | for (var i = 0, len = keys.length; i < len; i++) {
394 | params[keys[i]] = args[i];
395 | }
396 | return params;
397 | });
398 |
399 | return observableCreate(function (o) {
400 | return source.map(options.read).subscribe(o);
401 | });
402 | };
403 |
404 | return tko;
405 |
406 | }));
--------------------------------------------------------------------------------
/lessons/schedulers/draw.css:
--------------------------------------------------------------------------------
1 | html { background: #000; }
2 | canvas { display: block; }
--------------------------------------------------------------------------------
/lessons/schedulers/finish.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |