-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
751 lines (594 loc) · 62.8 KB
/
atom.xml
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Just Enough To Be Dangerous]]></title>
<link href="http://mheggeseth.github.io/atom.xml" rel="self"/>
<link href="http://mheggeseth.github.io/"/>
<updated>2013-11-17T20:17:44-06:00</updated>
<id>http://mheggeseth.github.io/</id>
<author>
<name><![CDATA[Michael Heggeseth]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[ThatConference Session List 2: Knockout My Bootstrap!]]></title>
<link href="http://mheggeseth.github.io/blog/2013/11/17/conference-sessions-2/"/>
<updated>2013-11-17T13:42:00-06:00</updated>
<id>http://mheggeseth.github.io/blog/2013/11/17/conference-sessions-2</id>
<content type="html"><![CDATA[<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># REMEMBER: follow along with these examples by cloning the</span>
</span><span class='line'><span class="c"># repository and checking out the tag for each step</span>
</span><span class='line'><span class="nv">$ </span>git clone https://github.com/mheggeseth/ThatSessions.git
</span><span class='line'><span class="nv">$ </span>git checkout -f <span class="o">[</span>tag-name-for-step<span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p><a href="http://mheggeseth.github.io/blog/2013/10/13/conference-sessions-1/">Last time</a>, we used <a href="http://jquery.com/">jQuery</a>, JSONP, and <a href="http://www.odata.org/">OData</a> to load a list of conference sessions into some HTML <a href="http://getbootstrap.com/getting-started/">Bootstrap</a> boilerplate. We got loading to work, but our page isn’t very pretty or useful yet so we’re going to fix that (at least part way).</p>
<p><img src="http://mheggeseth.github.io/images/posts/load-session-list.jpg"></p>
<h2>Enter KnockoutJS</h2>
<pre><code>git checkout -f knockoutjs
</code></pre>
<p>Obviously, we’ll add the <a href="http://knockoutjs.com">KnockoutJS</a> library.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"js/knockout-2.3.0.js"</span><span class="nt">></script></span>
</span></code></pre></td></tr></table></div></figure>
<p>Next, we’ll make a few simple changes to our JavaScript.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">viewModel</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">sessions</span><span class="o">:</span> <span class="nx">ko</span><span class="p">.</span><span class="nx">observableArray</span><span class="p">()</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
</span><span class='line'> <span class="nx">url</span><span class="o">:</span> <span class="s2">"http://www.thatconference.com/odata/api.svc/Sessions?$format=json&$callback=?"</span><span class="p">,</span>
</span><span class='line'> <span class="nx">dataType</span><span class="o">:</span> <span class="s2">"jsonp"</span><span class="p">,</span>
</span><span class='line'> <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">viewModel</span><span class="p">.</span><span class="nx">sessions</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">d</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p> First, we defined a <code>viewModel</code> object containing a single <a href="http://knockoutjs.com/documentation/observableArrays.html">observableArray</a> to be a container for our sessions. Then we set the <code>sessions</code> observable to the array of sessions returned by the AJAX request.</p>
<p>Notice that our JavaScript has now lost any notion of HTML or the DOM. This is a good thing. A nice benefit of using Knockout’s MVVM pattern is separating your data (the view model) from how the data is presented in HTML markup (the view). This allows the HTML to accurately describe, to a great extent, the behavior of the page. This is a distinct advantage over jQuery, whose behavior is generally defined in JavaScript and you are left to guess what role markup elements play based on context clues in their IDs or CSS class names.</p>
<p>Let’s update our HTML using Knockout’s <code>data-bind</code> attribute to bind our session list to the page.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><span</span> <span class="na">data-bind=</span><span class="s">"visible: !sessions().length"</span><span class="nt">></span>Loading sessions...<span class="nt"></span></span>
</span><span class='line'> <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span> <span class="na">data-bind=</span><span class="s">"foreach: sessions"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><li</span> <span class="na">data-bind=</span><span class="s">"text: Title"</span><span class="nt">></li></span>
</span><span class='line'> <span class="nt"></ul></span>
</span><span class='line'><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>The <code>foreach: sessions</code> binding tells Knockout to repeat the element’s inner HTML for each object in the <code>sessions</code> array. The binding context of the inner HTML of <code><ul data-bind="foreach: sessions"></code> then becomes the current element of <code>sessions</code>. So <code><li data-bind="text: Title"></li></code> will add a list item for each session whose value is the <code>Title</code> property of the session.</p>
<p>Notice that we added another element in there: <code><span data-bind="visible: !sessions().length">Loading sessions...</span></code>. Knockout’s <code>visible</code> binding shows the current element if its value is truthy and hides it when its value is falsey. This allows us to easily provide a friendly loading message before sessions are loaded and then take it away once we’ve loaded at least one session.</p>
<p>We forgot to do one thing, probably the most important thing. We need to tell Knockout to apply the bindings in the HTML to a view model. We add a call to <code>ko.applyBindings</code> to the end of our JavaScript after we’ve defined our view model. Without this, the <code>data-bind</code> attributes we added to the markup are about as useless as a white crayon.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">//find KO binding declarations and associate them with target viewModel members</span>
</span><span class='line'><span class="nx">ko</span><span class="p">.</span><span class="nx">applyBindings</span><span class="p">(</span><span class="nx">viewModel</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>So this is all fine and good, but you’ve probably noticed that with the exception of the loading indicator, we haven’t changed the look and feel of our page at all. However, the addition of Knockout to manage data and its application to the DOM should pay big dividends in the future. For one, because <code>sessions</code> is not just any array but an observable array, if we added or removed a session, Knockout would automatically update the view: a task that would have required significantly more code with our previous jQuery setup.</p>
<p>For reference, here’s the diff for our latest set of changes to <code>index.html</code>.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class='diff'><span class='line'> <div class="container">
</span><span class='line'><span class="gd">- <ul id="sessionList" class="list-unstyled"></ul></span>
</span><span class='line'><span class="gi">+ <span data-bind="visible: !sessions().length">Loading sessions...</span></span>
</span><span class='line'><span class="gi">+ <ul class="list-unstyled" data-bind="foreach: sessions"></span>
</span><span class='line'><span class="gi">+ <li data-bind="text: Title"></li></span>
</span><span class='line'><span class="gi">+ </ul></span>
</span><span class='line'> </div>
</span><span class='line'>
</span><span class='line'> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</span><span class='line'><span class="gi">+ <script type="text/javascript" src="js/knockout-2.3.0.js"></script></span>
</span><span class='line'> <script type="text/javascript" src="js/bootstrap.min.js"></script>
</span><span class='line'> <script type="text/javascript">
</span><span class='line'><span class="gi">+ var viewModel = {</span>
</span><span class='line'><span class="gi">+ sessions: ko.observableArray()</span>
</span><span class='line'><span class="gi">+ };</span>
</span><span class='line'><span class="gi">+</span>
</span><span class='line'> $.ajax({
</span><span class='line'> url: "http://www.thatconference.com/odata/api.svc/Sessions?$format=json&$callback=?",
</span><span class='line'> dataType: "jsonp",
</span><span class='line'> success: function (data) {
</span><span class='line'><span class="gd">- var sessions = data.d;</span>
</span><span class='line'><span class="gd">- var $sessionList = $("#sessionList");</span>
</span><span class='line'><span class="gd">- $.each(sessions, function(index, session) {</span>
</span><span class='line'><span class="gd">- $("<li></li>").text(session.Title).appendTo($sessionList);</span>
</span><span class='line'><span class="gd">- });</span>
</span><span class='line'><span class="gi">+ viewModel.sessions(data.d);</span>
</span><span class='line'> }
</span><span class='line'> });
</span><span class='line'><span class="gi">+</span>
</span><span class='line'><span class="gi">+ //find KO binding declarations and associate them with target viewModel members</span>
</span><span class='line'><span class="gi">+ ko.applyBindings(viewModel);</span>
</span><span class='line'> </script>
</span><span class='line'> </body>
</span></code></pre></td></tr></table></div></figure>
<h2>Bootstrap Window Dressing</h2>
<pre><code>git checkout -f bootstrap-style
</code></pre>
<p>So now that we have the beginnings of an application, let’s use Bootstrap to make it look a little bit nicer. First, we’ll give the navigation bar fixed layout so that it stays at the top of the screen as we scroll. This is as easy as adding the <code>navbar-fixed-top</code> style to the <code>navbar</code> tag. Bootstrap requires us to add 70px of padding to the top of the <code>body</code> tag to facilitate the fixed navbar behavior so we’ll do that too.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><head></span>
</span><span class='line'>...
</span><span class='line'> <span class="nt"><style </span><span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span>
</span><span class='line'> <span class="nt">body</span> <span class="p">{</span> <span class="k">padding-top</span><span class="o">:</span> <span class="m">70px</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'> <span class="nt"></style></span>
</span><span class='line'><span class="nt"></head></span>
</span><span class='line'><span class="nt"><body></span>
</span><span class='line'> ...
</span><span class='line'> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-inverse navbar-fixed-top"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>...<span class="nt"></nav></span>
</span><span class='line'> ...
</span><span class='line'><span class="nt"></body></span>
</span></code></pre></td></tr></table></div></figure>
<p>Now, let’s add some style to our list. First, we’ll give our loading indicator a little flare by adding the <a href="http://getbootstrap.com/components/#alerts">alert</a> style (in a non-threatening way).</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">data-bind=</span><span class="s">"visible: !sessions().length"</span><span class="nt">></span>Loading sessions...<span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p><img src="http://mheggeseth.github.io/images/posts/loading-indicator.png"></p>
<p>Then we’ll turn our list into a <a href="http://getbootstrap.com/components/#list-group">list group</a> and use <a href="http://getbootstrap.com/components/#labels">labels</a> to highlight some useful information about the session like scheduled time (with a little help from <a href="http://momentjs.com">Moment.js</a>), location, category, and level.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">data-bind=</span><span class="s">"foreach: sessions"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-primary"</span> <span class="na">data-bind=</span><span class="s">"text: new moment(ScheduledDateTime).format('ddd M/D/YY h:mm a') + ' | ' + ScheduledRoom"</span><span class="nt">></span></span>
</span><span class='line'> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"label label-default"</span> <span class="na">data-bind=</span><span class="s">"text: Category + ' | ' + Level"</span><span class="nt">></span></span>
</span><span class='line'> <span class="nt"><h4</span> <span class="na">class=</span><span class="s">"list-group-item-heading"</span> <span class="na">style=</span><span class="s">"margin-top:5px"</span> <span class="na">data-bind=</span><span class="s">"text: Title"</span><span class="nt">></h4></span>
</span><span class='line'> <span class="nt"></li></span>
</span><span class='line'><span class="nt"></ul></span>
</span></code></pre></td></tr></table></div></figure>
<p><img src="http://mheggeseth.github.io/images/posts/styled-list.png"></p>
<p>Here are all the changes we just made:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
</pre></td><td class='code'><pre><code class='diff'><span class='line'><span class="gu">@@ -4,13 +4,15 @@</span>
</span><span class='line'> <title>That Conference / Sessions</title>
</span><span class='line'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</span><span class='line'> <!-- Bootstrap -->
</span><span class='line'><span class="gd">- <!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> --></span>
</span><span class='line'> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</span><span class='line'><span class="gd">- <!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> --></span>
</span><span class='line'> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</span><span class='line'><span class="gi">+ <style type="text/css"></span>
</span><span class='line'><span class="gi">+ /* Necessary for fixed header http://getbootstrap.com/components/#navbar-fixed-top */</span>
</span><span class='line'><span class="gi">+ body { padding-top: 70px; }</span>
</span><span class='line'><span class="gi">+ </style></span>
</span><span class='line'> </head>
</span><span class='line'> <body>
</span><span class='line'><span class="gd">- <nav class="navbar navbar-inverse" role="navigation"></span>
</span><span class='line'><span class="gi">+ <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"></span>
</span><span class='line'> <div class="navbar-header">
</span><span class='line'> <a class="navbar-brand visible-xs" href="#">That / Sessions</a>
</span><span class='line'> <a class="navbar-brand hidden-xs" href="#">That Conference / Sessions</a>
</span><span class='line'><span class="gu">@@ -18,17 +20,20 @@</span>
</span><span class='line'> </nav>
</span><span class='line'>
</span><span class='line'> <div class="container">
</span><span class='line'><span class="gd">- <span data-bind="visible: !sessions().length">Loading sessions...</span></span>
</span><span class='line'><span class="gd">- <ul class="list-unstyled" data-bind="foreach: sessions"></span>
</span><span class='line'><span class="gd">- <li data-bind="text: Title"></li></span>
</span><span class='line'><span class="gi">+ <div class="alert alert-info" data-bind="visible: !sessions().length">Loading sessions...</div></span>
</span><span class='line'><span class="gi">+ <ul class="list-group" data-bind="foreach: sessions"></span>
</span><span class='line'><span class="gi">+ <li class="list-group-item"></span>
</span><span class='line'><span class="gi">+ <span class="label label-primary" data-bind="text: new moment(ScheduledDateTime).format('ddd M/D/YY h:mm a') + ' | ' + ScheduledRoom"></span></span>
</span><span class='line'><span class="gi">+ <span class="label label-default" data-bind="text: Category + ' | ' + Level"></span></span>
</span><span class='line'><span class="gi">+ <h4 class="list-group-item-heading" style="margin-top:5px" data-bind="text: Title"></h4></span>
</span><span class='line'><span class="gi">+ </li></span>
</span><span class='line'> </ul>
</span><span class='line'> </div>
</span><span class='line'>
</span><span class='line'><span class="gd">- <!--<script src="//code.jquery.com/jquery.js"></script>--></span>
</span><span class='line'> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</span><span class='line'> <script type="text/javascript" src="js/knockout-2.3.0.js"></script>
</span><span class='line'><span class="gd">- <!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>--></span>
</span><span class='line'> <script type="text/javascript" src="js/bootstrap.min.js"></script>
</span><span class='line'><span class="gi">+ <script type="text/javascript" src="js/moment.min.js"></script></span>
</span><span class='line'> <script type="text/javascript">
</span><span class='line'> var viewModel = {
</span><span class='line'> sessions: ko.observableArray()
</span></code></pre></td></tr></table></div></figure>
<h2>Next Time: Making it Useful</h2>
<p>So now that we have a session list that’s marginally pretty and functional, we should probably make it useful too. Next time, we’ll organize the sessions in a relevant way and make it easy to track favorites.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[A Simple, Responsive Conference Session List: Part 1]]></title>
<link href="http://mheggeseth.github.io/blog/2013/10/13/conference-sessions-1/"/>
<updated>2013-10-13T22:55:00-05:00</updated>
<id>http://mheggeseth.github.io/blog/2013/10/13/conference-sessions-1</id>
<content type="html"><![CDATA[<p>August 2012 was the inaugural <a href="http://thatconference.com">That Conference</a>. It was an awesome conference (one that I will attend as long as it keeps going), but having just my iPhone with me, it was a challenge to peruse upcoming sessions using the conference’s less-than-mobile-friendly website. So before I geared up to attend That Conference 2013, I built a mobile-friendly page for browsing sessions.</p>
<h3>What I wanted</h3>
<ul>
<li>View sessions as simply as possible. Minimize cruft.</li>
<li>Hide or diminish irrelevant information. Specifically, hide sessions that have already happened.</li>
<li>Track favorite sessions without accounts.</li>
<li>Tolerate inconsistent connectivity and bandwidth (it’s a conference, after all).</li>
<li>Provide a usable, consistent experience at any screen width.</li>
</ul>
<p><strong>To be clear,</strong> the That Conference organizers did a great job creating a mobile app for 2013 (which I didn’t know about when I wrote my page). I tried it and liked it, but there were a couple features my page had that were important to me so I ended up using my page for most of the conference. I’m looking forward to seeing how the mobile app improves for 2014. It will probably have useful features that I haven’t even thought of.</p>
<h3>Part 1 of N…</h3>
<p>To keep this post from becoming <em>The Odyssey</em>, I’m breaking down the construction and evolution of the page into a series of posts. I’m not sure how many there will be yet. My intention is to go step-by-step through my “process” of building the page, paying special attention to the tools and techniques I used along the way as well as well as pointing out difficulties and areas for improvement. Let’s get started!</p>
<p><em>Want to follow along? <a href="http://git-scm.com/downloads">Install Git</a>, clone the repo below, then checkout the specified tag to get the full code state for that step.</em></p>
<pre><code>git clone https://github.com/mheggeseth/ThatSessions.git
</code></pre>
<h2>Bootstrap boilerplate</h2>
<pre><code>git checkout -f bootstrap-boilerplate
</code></pre>
<p>We’ll start with the HTML boilerplate provided by <a href="http://getbootstrap.com/getting-started/">Bootstrap</a>. If you aren’t famliar with Bootstrap, you’re at least familiar with its style (<a href="http://twitter.com">Twitter</a>, <a href="http://angularjs.org">Angular</a>, and the web sites for many other open source frameworks). As a nice-looking, easy-to-use, responsive-by-default front-end library, it’s an easy win for small projects.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp"><!DOCTYPE html></span>
</span><span class='line'><span class="nt"><html></span>
</span><span class='line'> <span class="nt"><head></span>
</span><span class='line'> <span class="nt"><title></span>That Conference / Sessions<span class="nt"></title></span>
</span><span class='line'> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span>
</span><span class='line'> <span class="c"><!-- Bootstrap --></span>
</span><span class='line'> <span class="nt"><link</span> <span class="na">href=</span><span class="s">"css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">media=</span><span class="s">"screen"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"></head></span>
</span><span class='line'> <span class="nt"><body></span>
</span><span class='line'> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-inverse"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand visible-xs"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>That / Sessions<span class="nt"></a></span>
</span><span class='line'> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand hidden-xs"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>That Conference / Sessions<span class="nt"></a></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"></nav></span>
</span><span class='line'>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><h1></span>Hello, world!<span class="nt"></h1></span>
</span><span class='line'> <span class="nt"><p></span>Do you think we should write some code to load the sessions? Yes.<span class="nt"></p></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'>
</span><span class='line'> <span class="c"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></span>
</span><span class='line'> <span class="nt"><script </span><span class="na">src=</span><span class="s">"//code.jquery.com/jquery.js"</span><span class="nt">></script></span>
</span><span class='line'> <span class="c"><!-- Include all compiled plugins (below), or include individual files as needed --></span>
</span><span class='line'> <span class="nt"><script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">></script></span>
</span><span class='line'> <span class="nt"></body></span>
</span><span class='line'><span class="nt"></html></span>
</span></code></pre></td></tr></table></div></figure>
<p><img src="http://mheggeseth.github.io/images/posts/bootstrap-boilerplate-screenshot.png"></p>
<p>I’ve already made one nice customization to the boilerplate, taking advantage of the <a href="http://getbootstrap.com/css/#responsive-utilities">responsive utility classes</a> that come with Bootstrap. When the browser width is narrow (i.e. mobile devices) shorten the header title to save space. The <code>visible-xs</code> class ensures an element will only be visible when the browser width is “extra small”. <code>hidden-xs</code> ensures an element is always hidden when the browser width is narrow.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>...
</span><span class='line'><span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand visible-xs"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>That / Sessions<span class="nt"></a></span>
</span><span class='line'><span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand hidden-xs"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>That Conference / Sessions<span class="nt"></a></span>
</span><span class='line'>...
</span></code></pre></td></tr></table></div></figure>
<p><img src="http://mheggeseth.github.io/images/posts/bootstrap-boilerplate-screenshot-xs.png"></p>
<p>This will come in handy later in case we want to add other controls to the page header and keep them tidy on mobile devices.</p>
<h3>Tangent: Ad-Hoc HTTP Server with Node and <code>http-server</code></h3>
<p>If you have a favorite way of spinning up ad-hoc local HTTP servers, vaya con dios. For me, I turn to the <a href="https://github.com/nodeapps/http-server">http-server</a> package for <a href="http://nodejs.org">Node</a>. Install it globally and you can fire up an HTTP server from any location with <code>http-server</code>. It even gives you a unique port if you spin up multiple servers. Not too bad.</p>
<h2>Get me some sessions (with help from OData, jQuery, & JSONP)</h2>
<pre><code>git checkout -f load-sessions
</code></pre>
<p>So we have a fairly nice-looking page that does exactly nothing. Let’s get some sessions.</p>
<p>First I have to figure out how to do that. I’m somewhat familiar with <a href="http://www.odata.org/">OData</a> so that’s what I’ll sniff out first. If you aren’t familiar, OData is short-hand for the Open Data Protocol: an effort to document and encourage a standard for data APIs on the web.</p>
<p>And I think I might be in luck. Taking a look at the kind of AJAX-y stuff the That Conference home page is accessing using the Chrome Developer Tools, it looks like the site exposes an OData API.</p>
<p><img src="http://mheggeseth.github.io/images/posts/odata-discovery.jpg"></p>
<p>Let’s see what we get at <code>thatconference.com/odata/api.svc/?$format=json</code>.</p>
<p><img src="http://mheggeseth.github.io/images/posts/odata-discovery-1.jpg"></p>
<p>Mmmm, <code>Sessions</code>. That sounds good. I’ll have that. Let’s see what’s behind <code>thatconference.com/odata/api.svc/Sessions?$format=json</code>.</p>
<p><img src="http://mheggeseth.github.io/images/posts/odata-discovery-sessions.jpg"></p>
<p>Data. Just as I thought. Let’s get this sweet, sweet data in our page using our old friend jQuery.</p>
<p>We replace our “hello world” hero box with</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"sessionList"</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></ul></span>
</span></code></pre></td></tr></table></div></figure>
<p>and get the sessions using a jQuery <code>$.ajax</code> call with JSONP:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
</span><span class='line'> <span class="nx">url</span><span class="o">:</span> <span class="s2">"http://www.thatconference.com/odata/api.svc/Sessions?$format=json&$callback=?"</span><span class="p">,</span>
</span><span class='line'> <span class="nx">dataType</span><span class="o">:</span> <span class="s2">"jsonp"</span><span class="p">,</span>
</span><span class='line'> <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">sessions</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">d</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">$sessionList</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#sessionList"</span><span class="p">);</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">sessions</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">session</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"<li></li>"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">session</span><span class="p">.</span><span class="nx">Title</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$sessionList</span><span class="p">);</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="nt"></script></span>
</span></code></pre></td></tr></table></div></figure>
<h3>Tangent: JSONP</h3>
<p>For security reasons, browsers don’t allow AJAX requests to different domains than the current page. This is a good thing, but what if you want to do something legit like show recent tweets or load some conference sessions. JSONP is a clever trick for doing that. While you can’t do AJAX requests to any old domain, you can load JavaScript from any old domain.</p>
<p>JSONP says, “If I add a <code><script></code> tag to this page with the URL of a remote API I want to call and I also provide it the name of a callback function, you (the remote API) promise to return valid JavaScript invoking that function with the data I’ve requested.”</p>
<h3>JSONP/OData Caveat</h3>
<p>JSONP is not part of the OData spec, however JSONP support can easily be added to a WCF Data Service which natively supports OData. It just so happens that <code>thatconference.com/odata/api.svc</code> is one of these.</p>
<h2>Result</h2>
<p><img src="http://mheggeseth.github.io/images/posts/load-session-list.jpg"></p>
<p>It’s a pretty bland and useless list of sessions. But we’ll change that.</p>
<p>In the next post, we’ll add a proper view model with <a href="http://knockoutjs.com">KnockoutJS</a> and see what we can do with Bootstrap to improve our style.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[AngularJS-ish filters in KnockoutJS]]></title>
<link href="http://mheggeseth.github.io/blog/2013/10/02/angularjs-filters-in-knockoutjs/"/>
<updated>2013-10-02T22:00:00-05:00</updated>
<id>http://mheggeseth.github.io/blog/2013/10/02/angularjs-filters-in-knockoutjs</id>
<content type="html"><![CDATA[<p>As I learn more about <a href="http://angularjs.org">AnuglarJS</a>, I find <a href="http://docs.angularjs.org/guide/dev_guide.templates.filters">filters</a> to be one of the most exciting features of the framework. Filters allow common, mostly-simple display-level modifications to expressions in a view without having to include that logic in the model (i.e. <code>$scope</code>).</p>
<p>Applying a filter to an expression in an Angular view is super easy: <code>{{ expression | filter }}</code> and you’re done. Angular comes with a handful of filters for scalar values (<a href="http://docs.angularjs.org/api/ng.filter:number">number</a>, <a href="http://docs.angularjs.org/api/ng.filter:currency">currency</a>, <a href="http://docs.angularjs.org/api/ng.filter:date">date</a>) and arrays (<a href="http://docs.angularjs.org/api/ng.filter:filter">filter</a>, <a href="http://docs.angularjs.org/api/ng.filter:limitTo">limit</a>, <a href="http://docs.angularjs.org/api/ng.filter:orderBy">order</a>) but it’s also pretty easy to write your own.</p>
<p>In addition to “write once, use everywhere” convenience, filters are also chainable. This is particularly useful with Angular’s array filters: <code>{{ customerList | filter:searchText | orderBy:'earnings' }}</code> works just like it reads (only show customers with a property value containing the value of the model property <code>searchText</code> and then order those customers by the <code>earnings</code> property). And of course it live-updates when you change <code>searchText</code>.</p>
<p>OK, so Angular is awesome. But what if I’ve already done a bunch of stuff using another library (<a href="http://knockoutjs.com">KnockoutJS</a> in my case)? Can I do something like a filter in Knockout? <strong>Hint: yes.</strong></p>
<p>Knockout has two ways that this could work: <a href="http://knockoutjs.com/documentation/fn.html">“fn” functions</a> and <a href="http://knockoutjs.com/documentation/extenders.html">extenders</a>.</p>
<h2>How <code>fn</code> works</h2>
<p>Each of Knockout’s subscribable types exposes a public <code>fn</code> object to which you can add new functions to extend that type with cool new stuff. From then on, that stuff will be available on any new instance of that type. You can add new functions to any of the following:</p>
<ul>
<li><code>ko.subscribable.fn</code></li>
<li><code>ko.observable.fn</code></li>
<li><code>ko.observableArray.fn</code></li>
<li><code>ko.computed.fn</code></li>
</ul>
<p>And because of inheritance, functions that you add to a type will be usable by objects of any of its derived types. We’ll see why this is great for filters in a second.</p>
<p><img src="http://mheggeseth.github.io/images/posts/type-hierarchy.png"></p>
<h2>Filters with <code>fn</code></h2>
<p>So how do we turn this into something like filters? Take a look at this fiddle.</p>
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/Mp5jw/embedded/js,html,resources,result/light/"></iframe>
<p>You can see that I’ve added 4 functions to <code>ko.subscribable.fn</code>:</p>
<ul>
<li><code>filter</code> to filter an array by a string value</li>
<li><code>orderBy</code> to order an array by an element property value</li>
<li><code>currency</code> to format a number as currency</li>
<li><code>date</code> to format a date</li>
</ul>
<h3>Why <code>ko.subscribable.fn</code>?</h3>
<p>Why not put <code>filter</code> and <code>orderBy</code> on <code>ko.observableArray.fn</code> and put <code>currency</code> and <code>date</code> on <code>ko.observable.fn</code>? Simple: adding these functions to <code>ko.subscribable</code> maximizes chainability.</p>
<p>Let me explain. First, you want to return a <code>ko.computed</code> from filter functions. This ensures automatic UI updates because Knockout tracks subscribables accessed in the function body of a <code>ko.computed</code> and automatically re-evaluates the function when any of those values changes. But a <code>ko.computed</code> is not an observable or an observableArray. It is a <code>ko.subscribable</code>, though. So adding these functions to <code>ko.subscribable.fn</code> allows the inclusion of clear, chainable filters in data bindings like this one: <code>data-bind="foreach: dudes.filter(search, 'name').orderBy(orderBy)"</code>.</p>
<p>It even makes sense to put the scalar (<code>currency</code> and <code>date</code>) filters on <code>ko.subscribable.fn</code> in case you ever add a filter (or filters) that whittles an array to a single value (i.e. <code>first</code>, <code>last</code>, <code>findOne</code>, <code>imFeelingLucky</code>, etc.).</p>
<p>By putting filter functions on <code>ko.subscribable.fn</code>, they are available to <strong>all</strong> subscribable types, giving you lots and lots of flexibility.</p>
<h2>How extenders work</h2>
<p>Extenders and <code>fn</code> are really similar. To create and use an extender, throw in some code like this:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">ko</span><span class="p">.</span><span class="nx">extenders</span><span class="p">.</span><span class="nx">awesomeSauce</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">//target is the subscribable object you are extending</span>
</span><span class='line'> <span class="c1">// add stuff to it and you can use it in your viewModel and bindings</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">//options is the object provided to the initialization of the extender</span>
</span><span class='line'> <span class="c1">// use it to control what to add or how those additions behave</span>
</span><span class='line'>
</span><span class='line'> <span class="k">return</span> <span class="nx">target</span><span class="p">;</span> <span class="c1">//if you don't return target, you might lose track of it</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">foo</span> <span class="o">=</span> <span class="nx">ko</span><span class="p">.</span><span class="nx">observable</span><span class="p">().</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">awesomeSauce</span><span class="o">:</span> <span class="p">{</span> <span class="nx">thing1</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">thing2</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Ultimately, there’s little difference between <code>fn</code> and extenders as far as the end result is concerned. They both allow you to extend a subscribable. These are really the only differences:</p>
<ul>
<li>You have to (or “can be”) be more explicit when you want to add extenders to a subscribable by calling <code>.extend()</code>. No automatic inclusion as with <code>fn</code>.</li>
<li>You can (or “have to”) provide options when you add an extender. This allows you to be more precise about what exactly your subscribable is extended with or how that stuff behaves.</li>
</ul>
<h2>Filters with extenders</h2>
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/ubpS7/embedded/js,html,resources,result/light/"></iframe>
<p>In the fiddle above, instead of putting all the filter functions I might want to use into the same bag, they are separated by extender name.</p>
<p><code>ko.extenders.arrayExtensions</code> is used to extend an <code>observableArray</code> with the filter functions <code>filter</code> and <code>orderBy</code>. These functions work exactly the same as in the <code>fn</code> example. However, in order to make the <code>arrayExtensions</code> methods chainable, I have to return a <code>subscribable</code> extended with <code>arrayExtensions</code>. This could be easy to forget to do when writing your own filter function. Also, this approach to chainability is not a frugal use of memory since two <em>new</em> functions are added to the target each time you call <code>extend({ arrayExtensions: true })</code>.</p>
<p><code>ko.extenders.formatting</code> is used to extend an <code>observable</code> with filter functions that are appropriate to its data type (either <code>"date"</code> or <code>"currency"</code>, provided as the extender option). Due to their simplicity, I did not make these filter functions chainable. I suppose they could be, but I couldn’t think of a good reason to do that here.</p>
<p>To reiterate, in order to take advantage of these filter functions, I have to call <code>.extend()</code> for my <code>amount</code>, <code>date</code>, and <code>dudes</code> observables.</p>
<h2>Discussion and Gotchas</h2>
<p>You can see that there is no difference between the <code>fn</code> and the extender approach in how the <code>data-bind</code> attributes in the HTML consume our filter functions. That’s pretty cool.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">data-bind=</span><span class="s">"value: search, valueUpdate: 'afterkeydown'"</span> <span class="nt">/></span>
</span><span class='line'><span class="nt"><select</span> <span class="na">data-bind=</span><span class="s">"value: orderBy"</span><span class="nt">></span>...<span class="nt"></select></span>
</span><span class='line'>
</span><span class='line'><span class="nt"><table</span> <span class="na">class=</span><span class="s">"table"</span><span class="nt">></span>
</span><span class='line'> ...
</span><span class='line'> <span class="nt"><tbody</span> <span class="na">data-bind=</span><span class="s">"foreach: dudes.filter(search, 'name').orderBy(orderBy)"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td</span> <span class="na">data-bind=</span><span class="s">"text: name"</span><span class="nt">></td></span>
</span><span class='line'> <span class="nt"><td</span> <span class="na">data-bind=</span><span class="s">"text: amount.currency()"</span><span class="nt">></td></span>
</span><span class='line'> <span class="nt"><td</span> <span class="na">data-bind=</span><span class="s">"text: date.date('dddd MMMM Do YYYY')"</span><span class="nt">></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"></tbody></span>
</span><span class='line'><span class="nt"></table></span>
</span></code></pre></td></tr></table></div></figure>
<p>While it’s convenient for all functions you add to <code>fn</code> to be available to all subsequent instances of that type, <em>ALL</em> functions you add will be available to instances of that type. In the examples above, I added all my functions to <code>ko.subscribable.fn</code> to maximize chainability, but that small set of functions is already mutually-exclusive. <code>filter</code> and <code>orderBy</code> only make sense for observable arrays, <code>currency</code> only makes sense for numbers, and <code>date</code> only makes sense for dates. They are all there whether they make sense to be or not. Fortunately this is not a big concern for performance or scalability because each <code>fn</code> function object is shared by every <code>subscribable</code>.</p>
<p>Also, with the <code>fn</code> approach, putting everything in the same bucket is nice for availability, but if you start defining lots of <code>fn</code> functions in multiple files and possibly loading different subsets of those files on each page, you need to be pretty good at keeping those things straight, using unique function names, and keeping function names meaningful as to which date type they should be used for.</p>
<p>Chainability is powerful, but it can lead to long filter chains. In life, as in Knockout, you don’t get money for nothing and chicks for free. Because we have used <code>ko.computed</code> at each step of the way, a change at a point in the filter chain will cause re-evaluation of the remainder of the chain. If you have 10 filters chained together and you’re wondering why your page is sluggish, look there first.</p>
<p>I mentioned this above, but I wanted to reiterate it. Using the extender approach can be costly for memory consumption. Each time you <code>.extend()</code> a <code>subscribable</code>, new functions are added to the target. If you end up extending hundreds or thousands of objects on your page, you might start feeling the pain.</p>
<p>You may have noticed that <code>arrayExtensions</code> does not use its <code>options</code> parameter so it does not matter what the value is, but in order to call <code>.extend()</code> with valid JSON, a value must be provided. For no particular reason, I chose to provide <code>true</code>.</p>
<h2>Conclusion</h2>
<p>I hope this was a useful demonstration of the power of <code>fn</code> and extender functions in KnockoutJS. In summary, if you are looking for simplicity and ease of use with respect to filtering, I’d say go with <code>fn</code> functions. If you need more precision but perhaps don’t care as much about convenience, try extenders.</p>
<p>Enjoy, and let me know what you think!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[I Have A Blog?]]></title>
<link href="http://mheggeseth.github.io/blog/2013/09/07/i-have-a-blog/"/>
<updated>2013-09-07T19:34:00-05:00</updated>
<id>http://mheggeseth.github.io/blog/2013/09/07/i-have-a-blog</id>
<content type="html"><![CDATA[<p>Somebody: “Hey, look over there. It’s a blog.”<br/>
Everybody: “Oooohhhhh!”<br/>
Somebody (maybe somebody else): “A developer blog!”<br/>
Everybody (again): “Wooowwwww!”</p>
<p>Notwithstanding the widespread, public fanfare that accompanies the debut of a developer blog, it’s my first day and I really don’t know what I’m doing here. So to get started I went to the font of blogging wisdom, Scott Hanselman, and found <a href="http://www.hanselman.com/blog/YourBlogIsTheEngineOfCommunity.aspx">“Your Blog is the Engine of Community”</a> which made me feel like:<br/>
<img src="http://mheggeseth.github.io/images/posts/anchorman-excited.jpg"></p>
<p>Then I found <a href="http://kencenerelli.wordpress.com/2012/03/20/personal-branding-for-software-developers/">“Personal Branding for Software Developers”</a> and it made me feel a little like:<br/>
<img src="http://mheggeseth.github.io/images/posts/bored-dog.jpg"></p>
<p>Building my personal brand? Maybe. I did make a sweet logo in Paint.NET and brought in some snazzy web fonts. <em>Incidentally, <a href="http://www.google.com/fonts">Google Fonts</a> is a great way to waste several hours.</em> Let’s stick with the hippy-dippy, free-love blogging advertized by Mr. Hanselman.</p>
<p>My goals for this blog are these:</p>
<ul>
<li><strong>Be helpful.</strong> While I want this blog to be a container for my passion for software development, I also want what I put out there to be useful to somebody (maybe even somebodies). If I can solve a problem, that means another developer doesn’t have to. Everybody wins and it’s good karma.</li>
<li><strong>Get better.</strong> I know some things, but I don’t know a lot of things. Aside from the personal and technical growth that will come from the process of preparing my words and bits for all to see, I love collaborating with and learning from people who know more than I do.</li>
<li><strong>Avoid TL;DR.</strong> No matter how interesting a post is, it’s frustrating to read for 10 minutes, only to realize you still have a ways to go. I’ll try to blow your mind, but keep it quick.</li>
</ul>
<p>I hope you read and enjoy what is to come and I encourage your feedback!</p>
<p><small>Thanks to <a href="http://www.knockmeout.net">Ryan Niemeyer</a> for the help in getting this set up.</small></p>
<h4>A Little About Me</h4>
<p>I’ve been a software developer for 9 years, doing web development for most of that time. For a number of years I worked on an application using ASP.NET, C#, and SQL Server. Since the emergence of JavaScript in recent years, I’ve done a lot more work on that front, especially with <a href="http://jquery.com">jQuery</a> (obvious, right?), <a href="http://knockoutjs.com">KnockoutJS</a>, and even <a href="http://vanilla-js.com/">Vanilla JS</a>. There are many more frameworks and libraries that are interesting to me, but for which I have yet to scratch the surface, so I’m excited to use this blog as a venue for those adventures.</p>
<p>I’m also lucky to be a husband and father to two special ladies and one furry one.<br/>
<img class="inline" src="http://mheggeseth.github.io/images/posts/kirsten-emma.jpg" width="350"><img src="http://mheggeseth.github.io/images/posts/emma-izzy.jpg" width="350"></p>
]]></content>
</entry>
</feed>