[{"data":1,"prerenderedAt":3570},["ShallowReactive",2],{"article_list_backbone-js_":3},[4,151,1783],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"publishDate":11,"tags":12,"excerpt":10,"body":17,"_type":142,"_id":143,"_source":144,"_file":145,"_stem":146,"_extension":147,"author":148},"/rbrubaker/2012-06/coffee-backbone-3","2012-06",false,"","Fun with CoffeeScript and Backbone.js : Part 3","In this post I’ll discuss my thoughts on CoffeeScript and Backbone.js.","2012-06-08",[13,14,15,16],"backbone-js","coffeescript","html5","series",{"type":18,"children":19,"toc":139},"root",[20,48,69,81,103,120,129,134],{"type":21,"tag":22,"props":23,"children":24},"element","p",{},[25,28,37,39,46],{"type":26,"value":27},"text","In this post I’ll discuss my thoughts on ",{"type":21,"tag":29,"props":30,"children":34},"a",{"href":31,"rel":32},"http://coffeescript.org/",[33],"nofollow",[35],{"type":26,"value":36},"CoffeeScript",{"type":26,"value":38}," and ",{"type":21,"tag":29,"props":40,"children":43},{"href":41,"rel":42},"http://backbonejs.org/",[33],[44],{"type":26,"value":45},"Backbone.js",{"type":26,"value":47},".",{"type":21,"tag":22,"props":49,"children":50},{},[51,53,60,62,68],{"type":26,"value":52},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":21,"tag":29,"props":54,"children":57},{"href":55,"rel":56},"https://github.com/rmb177/MorseCode",[33],[58],{"type":26,"value":59},"here",{"type":26,"value":61}," and the running code can be seen ",{"type":21,"tag":29,"props":63,"children":66},{"href":64,"rel":65},"http://www.ryan-brubaker.com/code/MorseCode",[33],[67],{"type":26,"value":59},{"type":26,"value":47},{"type":21,"tag":22,"props":70,"children":71},{},[72,74,80],{"type":26,"value":73},"See the ",{"type":21,"tag":29,"props":75,"children":77},{"href":76},"/search/fun/coffeescript/user:rmb",[78],{"type":26,"value":79},"rest of this series",{"type":26,"value":47},{"type":21,"tag":22,"props":82,"children":83},{},[84,86,93,95,101],{"type":26,"value":85},"JavaScript has slowly become my favorite programming language as I've done more web development. As you learn its ",{"type":21,"tag":29,"props":87,"children":90},{"href":88,"rel":89},"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1339122559&sr=8-1",[33],[91],{"type":26,"value":92},"Good Parts",{"type":26,"value":94},", you start to realize how powerful of a language it is. I'll never forget the ",{"type":21,"tag":96,"props":97,"children":98},"em",{},[99],{"type":26,"value":100},"Aha",{"type":26,"value":102},"! moment I had when I wrote my first closure.",{"type":21,"tag":22,"props":104,"children":105},{},[106,118],{"type":21,"tag":29,"props":107,"children":110},{"href":108,"rel":109},"https://artandlogic.com/wp-content/uploads/2012/06/coffeescript-logo1.png",[33],[111],{"type":21,"tag":112,"props":113,"children":117},"img",{"alt":114,"src":115,"title":116},"Coffeescript logo","assets/images/coffeescript-logo1.png","CoffeeScript-logo",[],{"type":26,"value":119},"CoffeeScript takes a great language and makes it even better. It hides the bad parts of JavaScript and adds the expressiveness of Ruby and Python. The addition of classes shields the developer from JavaScript's prototypal inheritance and is much easier to understand for developers used to class-based inheritance. Admittedly, this was a small demo, but tracking runtime errors in the JavaScript code back to the CoffeeScript code was trivial. I definitely plan to use CoffeeScript as much as possible in future projects.",{"type":21,"tag":22,"props":121,"children":122},{},[123],{"type":21,"tag":112,"props":124,"children":128},{"alt":125,"src":126,"title":127},"Backbone js","assets/images/backbone.png","backbone",[],{"type":21,"tag":22,"props":130,"children":131},{},[132],{"type":26,"value":133},"This demo only scratched the surface of Backbone.js. Views can be initialized with templates, making complex models easier to render. Backbone.js also provides functionality to automatically synch your objects to/from a server, provides support for collections and also provides routing functionality to ensure the back button works in single-page applications. I'm very interested in learning more about Backbone.js and using it to reduce the amount of front-end code I need to write.",{"type":21,"tag":22,"props":135,"children":136},{},[137],{"type":26,"value":138},"In general, I think the combination of CoffeeScript and Backbone.js results in a much cleaner application. View code is segregated from the model code and developers are forced into keeping things more modular. This style would also make unit testing easier. I'm anxious to continue experimenting with both of these technologies to see how they boost my productivity and allow me to develop larger web-apps in a more controlled manner.",{"title":8,"searchDepth":140,"depth":140,"links":141},3,[],"markdown","content:rbrubaker:2012-06:coffee-backbone-3.md","content","rbrubaker/2012-06/coffee-backbone-3.md","rbrubaker/2012-06/coffee-backbone-3","md",{"user":149,"name":150},"rbrubaker","Ryan Brubaker",{"_path":152,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":153,"description":154,"publishDate":155,"tags":156,"excerpt":154,"body":157,"_type":142,"_id":1779,"_source":144,"_file":1780,"_stem":1781,"_extension":147,"author":1782},"/rbrubaker/2012-06/coffee-backbone-2","Fun with CoffeeScript and Backbone.js : Part 2","In this post I’ll discuss the code that handles updating the UI.","2012-06-07",[13,14,15,16],{"type":18,"children":158,"toc":1777},[159,163,172,188,200,393,414,425,1002,1021,1032,1760,1771],{"type":21,"tag":22,"props":160,"children":161},{},[162],{"type":26,"value":154},{"type":21,"tag":22,"props":164,"children":165},{},[166,167,171],{"type":26,"value":73},{"type":21,"tag":29,"props":168,"children":169},{"href":76},[170],{"type":26,"value":79},{"type":26,"value":47},{"type":21,"tag":22,"props":173,"children":174},{},[175,176,181,182,187],{"type":26,"value":52},{"type":21,"tag":29,"props":177,"children":179},{"href":55,"rel":178},[33],[180],{"type":26,"value":59},{"type":26,"value":61},{"type":21,"tag":29,"props":183,"children":185},{"href":64,"rel":184},[33],[186],{"type":26,"value":59},{"type":26,"value":47},{"type":21,"tag":22,"props":189,"children":190},{},[191],{"type":21,"tag":192,"props":193,"children":194},"strong",{},[195],{"type":21,"tag":96,"props":196,"children":197},{},[198],{"type":26,"value":199},"Communication Line View",{"type":21,"tag":201,"props":202,"children":206},"pre",{"className":203,"code":204,"language":205,"meta":8,"style":8},"language-coffee shiki shiki-themes github-light github-dark","class DecoderView extends Backbone.View\n   initialize: ->\n      @model.bind('parsedCharacter', @render)\n\n   render: (token) =>\n      messageBox = $('#messageBox')\n      messageBox.val(messageBox.val() + token)\n","coffee",[207],{"type":21,"tag":208,"props":209,"children":210},"code",{"__ignoreMap":8},[211,239,258,288,298,321,355],{"type":21,"tag":212,"props":213,"children":216},"span",{"class":214,"line":215},"line",1,[217,223,229,234],{"type":21,"tag":212,"props":218,"children":220},{"style":219},"--shiki-default:#D73A49;--shiki-dark:#F97583",[221],{"type":26,"value":222},"class",{"type":21,"tag":212,"props":224,"children":226},{"style":225},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[227],{"type":26,"value":228}," DecoderView",{"type":21,"tag":212,"props":230,"children":231},{"style":219},[232],{"type":26,"value":233}," extends",{"type":21,"tag":212,"props":235,"children":236},{"style":225},[237],{"type":26,"value":238}," Backbone.View\n",{"type":21,"tag":212,"props":240,"children":242},{"class":214,"line":241},2,[243,248,253],{"type":21,"tag":212,"props":244,"children":245},{"style":225},[246],{"type":26,"value":247},"   initialize",{"type":21,"tag":212,"props":249,"children":250},{"style":219},[251],{"type":26,"value":252},":",{"type":21,"tag":212,"props":254,"children":255},{"style":219},[256],{"type":26,"value":257}," ->\n",{"type":21,"tag":212,"props":259,"children":260},{"class":214,"line":140},[261,267,272,277,283],{"type":21,"tag":212,"props":262,"children":264},{"style":263},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[265],{"type":26,"value":266},"      @model.",{"type":21,"tag":212,"props":268,"children":269},{"style":225},[270],{"type":26,"value":271},"bind",{"type":21,"tag":212,"props":273,"children":274},{"style":263},[275],{"type":26,"value":276},"(",{"type":21,"tag":212,"props":278,"children":280},{"style":279},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[281],{"type":26,"value":282},"'parsedCharacter'",{"type":21,"tag":212,"props":284,"children":285},{"style":263},[286],{"type":26,"value":287},", @render)\n",{"type":21,"tag":212,"props":289,"children":291},{"class":214,"line":290},4,[292],{"type":21,"tag":212,"props":293,"children":295},{"emptyLinePlaceholder":294},true,[296],{"type":26,"value":297},"\n",{"type":21,"tag":212,"props":299,"children":301},{"class":214,"line":300},5,[302,307,311,316],{"type":21,"tag":212,"props":303,"children":304},{"style":225},[305],{"type":26,"value":306},"   render",{"type":21,"tag":212,"props":308,"children":309},{"style":219},[310],{"type":26,"value":252},{"type":21,"tag":212,"props":312,"children":313},{"style":263},[314],{"type":26,"value":315}," (token) ",{"type":21,"tag":212,"props":317,"children":318},{"style":219},[319],{"type":26,"value":320},"=>\n",{"type":21,"tag":212,"props":322,"children":324},{"class":214,"line":323},6,[325,331,336,341,345,350],{"type":21,"tag":212,"props":326,"children":328},{"style":327},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[329],{"type":26,"value":330},"      messageBox",{"type":21,"tag":212,"props":332,"children":333},{"style":219},[334],{"type":26,"value":335}," =",{"type":21,"tag":212,"props":337,"children":338},{"style":225},[339],{"type":26,"value":340}," $",{"type":21,"tag":212,"props":342,"children":343},{"style":263},[344],{"type":26,"value":276},{"type":21,"tag":212,"props":346,"children":347},{"style":279},[348],{"type":26,"value":349},"'#messageBox'",{"type":21,"tag":212,"props":351,"children":352},{"style":263},[353],{"type":26,"value":354},")\n",{"type":21,"tag":212,"props":356,"children":358},{"class":214,"line":357},7,[359,364,369,374,378,383,388],{"type":21,"tag":212,"props":360,"children":361},{"style":263},[362],{"type":26,"value":363},"      messageBox.",{"type":21,"tag":212,"props":365,"children":366},{"style":225},[367],{"type":26,"value":368},"val",{"type":21,"tag":212,"props":370,"children":371},{"style":263},[372],{"type":26,"value":373},"(messageBox.",{"type":21,"tag":212,"props":375,"children":376},{"style":225},[377],{"type":26,"value":368},{"type":21,"tag":212,"props":379,"children":380},{"style":263},[381],{"type":26,"value":382},"() ",{"type":21,"tag":212,"props":384,"children":385},{"style":219},[386],{"type":26,"value":387},"+",{"type":21,"tag":212,"props":389,"children":390},{"style":263},[391],{"type":26,"value":392}," token)\n",{"type":21,"tag":22,"props":394,"children":395},{},[396,398,405,407,412],{"type":26,"value":397},"The CommunicationLineView class is a Backbone.js view class that handles the animation of signals sent across the communication line. In ",{"type":21,"tag":29,"props":399,"children":402},{"href":400,"rel":401},"http://blog.artlogic.com/2012/06/06/fun-with-coffeescript-and-backbone-js-part-1/",[33],[403],{"type":26,"value":404},"Part 1",{"type":26,"value":406},", I mentioned that the model representing the communication line fires a ",{"type":21,"tag":96,"props":408,"children":409},{},[410],{"type":26,"value":411},"hasNewData",{"type":26,"value":413}," event each time the tokens progress one step through the line. As you can see above, this view is bound to that event and rerenders itself every time it receives the event. The render method iterates over the current tokens and draws the appropriate token shape for each line position.",{"type":21,"tag":22,"props":415,"children":416},{},[417],{"type":21,"tag":96,"props":418,"children":419},{},[420],{"type":21,"tag":192,"props":421,"children":422},{},[423],{"type":26,"value":424},"Decoder Model",{"type":21,"tag":201,"props":426,"children":428},{"className":203,"code":427,"language":205,"meta":8,"style":8},"class MorseDecoder extends Backbone.Model\n\n   initializeKey: =>\n      \"\"\"\n      Omitting code that initializes the morse code key \n      dictionary.\n      \"\"\"\n\n   initialize: =>\n      @inputTokens = []\n      @numEmptyTokensInARow = 0\n      @initializeKey()\n\n   processToken: (token) =>\n      if token == ''\n         @parseTokens() if \n          ++@numEmptyTokensInARow >= 10\n      else if token == kWordStopToken\n         @parseTokens() if @inputTokens.length > 0\n         @trigger('parsedCharacter', ' ')\n      else\n         @inputTokens.push(token)\n         @numEmptyTokensInARow = 0\n\n   parseTokens: =>\n      if @inputTokens.length > 0\n         token = @key[@inputTokens.join('')]\n         @trigger('parsedCharacter', token) if \n          token != undefined\n      @numEmptyTokensInARow = 0\n      @inputTokens.length = 0\n",[429],{"type":21,"tag":208,"props":430,"children":431},{"__ignoreMap":8},[432,453,460,477,485,493,501,508,516,532,551,570,589,597,618,642,670,694,721,755,790,799,818,835,843,860,880,917,950,969,985],{"type":21,"tag":212,"props":433,"children":434},{"class":214,"line":215},[435,439,444,448],{"type":21,"tag":212,"props":436,"children":437},{"style":219},[438],{"type":26,"value":222},{"type":21,"tag":212,"props":440,"children":441},{"style":225},[442],{"type":26,"value":443}," MorseDecoder",{"type":21,"tag":212,"props":445,"children":446},{"style":219},[447],{"type":26,"value":233},{"type":21,"tag":212,"props":449,"children":450},{"style":225},[451],{"type":26,"value":452}," Backbone.Model\n",{"type":21,"tag":212,"props":454,"children":455},{"class":214,"line":241},[456],{"type":21,"tag":212,"props":457,"children":458},{"emptyLinePlaceholder":294},[459],{"type":26,"value":297},{"type":21,"tag":212,"props":461,"children":462},{"class":214,"line":140},[463,468,472],{"type":21,"tag":212,"props":464,"children":465},{"style":225},[466],{"type":26,"value":467},"   initializeKey",{"type":21,"tag":212,"props":469,"children":470},{"style":219},[471],{"type":26,"value":252},{"type":21,"tag":212,"props":473,"children":474},{"style":219},[475],{"type":26,"value":476}," =>\n",{"type":21,"tag":212,"props":478,"children":479},{"class":214,"line":290},[480],{"type":21,"tag":212,"props":481,"children":482},{"style":279},[483],{"type":26,"value":484},"      \"\"\"\n",{"type":21,"tag":212,"props":486,"children":487},{"class":214,"line":300},[488],{"type":21,"tag":212,"props":489,"children":490},{"style":279},[491],{"type":26,"value":492},"      Omitting code that initializes the morse code key \n",{"type":21,"tag":212,"props":494,"children":495},{"class":214,"line":323},[496],{"type":21,"tag":212,"props":497,"children":498},{"style":279},[499],{"type":26,"value":500},"      dictionary.\n",{"type":21,"tag":212,"props":502,"children":503},{"class":214,"line":357},[504],{"type":21,"tag":212,"props":505,"children":506},{"style":279},[507],{"type":26,"value":484},{"type":21,"tag":212,"props":509,"children":511},{"class":214,"line":510},8,[512],{"type":21,"tag":212,"props":513,"children":514},{"emptyLinePlaceholder":294},[515],{"type":26,"value":297},{"type":21,"tag":212,"props":517,"children":519},{"class":214,"line":518},9,[520,524,528],{"type":21,"tag":212,"props":521,"children":522},{"style":225},[523],{"type":26,"value":247},{"type":21,"tag":212,"props":525,"children":526},{"style":219},[527],{"type":26,"value":252},{"type":21,"tag":212,"props":529,"children":530},{"style":219},[531],{"type":26,"value":476},{"type":21,"tag":212,"props":533,"children":535},{"class":214,"line":534},10,[536,541,546],{"type":21,"tag":212,"props":537,"children":538},{"style":263},[539],{"type":26,"value":540},"      @inputTokens ",{"type":21,"tag":212,"props":542,"children":543},{"style":219},[544],{"type":26,"value":545},"=",{"type":21,"tag":212,"props":547,"children":548},{"style":263},[549],{"type":26,"value":550}," []\n",{"type":21,"tag":212,"props":552,"children":554},{"class":214,"line":553},11,[555,560,564],{"type":21,"tag":212,"props":556,"children":557},{"style":263},[558],{"type":26,"value":559},"      @numEmptyTokensInARow ",{"type":21,"tag":212,"props":561,"children":562},{"style":219},[563],{"type":26,"value":545},{"type":21,"tag":212,"props":565,"children":567},{"style":566},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[568],{"type":26,"value":569}," 0\n",{"type":21,"tag":212,"props":571,"children":573},{"class":214,"line":572},12,[574,579,584],{"type":21,"tag":212,"props":575,"children":576},{"style":263},[577],{"type":26,"value":578},"      @",{"type":21,"tag":212,"props":580,"children":581},{"style":225},[582],{"type":26,"value":583},"initializeKey",{"type":21,"tag":212,"props":585,"children":586},{"style":263},[587],{"type":26,"value":588},"()\n",{"type":21,"tag":212,"props":590,"children":592},{"class":214,"line":591},13,[593],{"type":21,"tag":212,"props":594,"children":595},{"emptyLinePlaceholder":294},[596],{"type":26,"value":297},{"type":21,"tag":212,"props":598,"children":600},{"class":214,"line":599},14,[601,606,610,614],{"type":21,"tag":212,"props":602,"children":603},{"style":225},[604],{"type":26,"value":605},"   processToken",{"type":21,"tag":212,"props":607,"children":608},{"style":219},[609],{"type":26,"value":252},{"type":21,"tag":212,"props":611,"children":612},{"style":263},[613],{"type":26,"value":315},{"type":21,"tag":212,"props":615,"children":616},{"style":219},[617],{"type":26,"value":320},{"type":21,"tag":212,"props":619,"children":621},{"class":214,"line":620},15,[622,627,632,637],{"type":21,"tag":212,"props":623,"children":624},{"style":219},[625],{"type":26,"value":626},"      if",{"type":21,"tag":212,"props":628,"children":629},{"style":263},[630],{"type":26,"value":631}," token ",{"type":21,"tag":212,"props":633,"children":634},{"style":219},[635],{"type":26,"value":636},"==",{"type":21,"tag":212,"props":638,"children":639},{"style":279},[640],{"type":26,"value":641}," ''\n",{"type":21,"tag":212,"props":643,"children":645},{"class":214,"line":644},16,[646,651,656,660,665],{"type":21,"tag":212,"props":647,"children":648},{"style":263},[649],{"type":26,"value":650},"         @",{"type":21,"tag":212,"props":652,"children":653},{"style":225},[654],{"type":26,"value":655},"parseTokens",{"type":21,"tag":212,"props":657,"children":658},{"style":263},[659],{"type":26,"value":382},{"type":21,"tag":212,"props":661,"children":662},{"style":219},[663],{"type":26,"value":664},"if",{"type":21,"tag":212,"props":666,"children":667},{"style":263},[668],{"type":26,"value":669}," \n",{"type":21,"tag":212,"props":671,"children":673},{"class":214,"line":672},17,[674,679,684,689],{"type":21,"tag":212,"props":675,"children":676},{"style":219},[677],{"type":26,"value":678},"          ++",{"type":21,"tag":212,"props":680,"children":681},{"style":263},[682],{"type":26,"value":683},"@numEmptyTokensInARow ",{"type":21,"tag":212,"props":685,"children":686},{"style":219},[687],{"type":26,"value":688},">=",{"type":21,"tag":212,"props":690,"children":691},{"style":566},[692],{"type":26,"value":693}," 10\n",{"type":21,"tag":212,"props":695,"children":697},{"class":214,"line":696},18,[698,703,708,712,716],{"type":21,"tag":212,"props":699,"children":700},{"style":219},[701],{"type":26,"value":702},"      else",{"type":21,"tag":212,"props":704,"children":705},{"style":219},[706],{"type":26,"value":707}," if",{"type":21,"tag":212,"props":709,"children":710},{"style":263},[711],{"type":26,"value":631},{"type":21,"tag":212,"props":713,"children":714},{"style":219},[715],{"type":26,"value":636},{"type":21,"tag":212,"props":717,"children":718},{"style":263},[719],{"type":26,"value":720}," kWordStopToken\n",{"type":21,"tag":212,"props":722,"children":724},{"class":214,"line":723},19,[725,729,733,737,741,746,751],{"type":21,"tag":212,"props":726,"children":727},{"style":263},[728],{"type":26,"value":650},{"type":21,"tag":212,"props":730,"children":731},{"style":225},[732],{"type":26,"value":655},{"type":21,"tag":212,"props":734,"children":735},{"style":263},[736],{"type":26,"value":382},{"type":21,"tag":212,"props":738,"children":739},{"style":219},[740],{"type":26,"value":664},{"type":21,"tag":212,"props":742,"children":743},{"style":263},[744],{"type":26,"value":745}," @inputTokens.length ",{"type":21,"tag":212,"props":747,"children":748},{"style":219},[749],{"type":26,"value":750},">",{"type":21,"tag":212,"props":752,"children":753},{"style":566},[754],{"type":26,"value":569},{"type":21,"tag":212,"props":756,"children":758},{"class":214,"line":757},20,[759,763,768,772,776,781,786],{"type":21,"tag":212,"props":760,"children":761},{"style":263},[762],{"type":26,"value":650},{"type":21,"tag":212,"props":764,"children":765},{"style":225},[766],{"type":26,"value":767},"trigger",{"type":21,"tag":212,"props":769,"children":770},{"style":263},[771],{"type":26,"value":276},{"type":21,"tag":212,"props":773,"children":774},{"style":279},[775],{"type":26,"value":282},{"type":21,"tag":212,"props":777,"children":778},{"style":263},[779],{"type":26,"value":780},", ",{"type":21,"tag":212,"props":782,"children":783},{"style":279},[784],{"type":26,"value":785},"' '",{"type":21,"tag":212,"props":787,"children":788},{"style":263},[789],{"type":26,"value":354},{"type":21,"tag":212,"props":791,"children":793},{"class":214,"line":792},21,[794],{"type":21,"tag":212,"props":795,"children":796},{"style":219},[797],{"type":26,"value":798},"      else\n",{"type":21,"tag":212,"props":800,"children":802},{"class":214,"line":801},22,[803,808,813],{"type":21,"tag":212,"props":804,"children":805},{"style":263},[806],{"type":26,"value":807},"         @inputTokens.",{"type":21,"tag":212,"props":809,"children":810},{"style":566},[811],{"type":26,"value":812},"push",{"type":21,"tag":212,"props":814,"children":815},{"style":263},[816],{"type":26,"value":817},"(token)\n",{"type":21,"tag":212,"props":819,"children":821},{"class":214,"line":820},23,[822,827,831],{"type":21,"tag":212,"props":823,"children":824},{"style":263},[825],{"type":26,"value":826},"         @numEmptyTokensInARow ",{"type":21,"tag":212,"props":828,"children":829},{"style":219},[830],{"type":26,"value":545},{"type":21,"tag":212,"props":832,"children":833},{"style":566},[834],{"type":26,"value":569},{"type":21,"tag":212,"props":836,"children":838},{"class":214,"line":837},24,[839],{"type":21,"tag":212,"props":840,"children":841},{"emptyLinePlaceholder":294},[842],{"type":26,"value":297},{"type":21,"tag":212,"props":844,"children":846},{"class":214,"line":845},25,[847,852,856],{"type":21,"tag":212,"props":848,"children":849},{"style":225},[850],{"type":26,"value":851},"   parseTokens",{"type":21,"tag":212,"props":853,"children":854},{"style":219},[855],{"type":26,"value":252},{"type":21,"tag":212,"props":857,"children":858},{"style":219},[859],{"type":26,"value":476},{"type":21,"tag":212,"props":861,"children":863},{"class":214,"line":862},26,[864,868,872,876],{"type":21,"tag":212,"props":865,"children":866},{"style":219},[867],{"type":26,"value":626},{"type":21,"tag":212,"props":869,"children":870},{"style":263},[871],{"type":26,"value":745},{"type":21,"tag":212,"props":873,"children":874},{"style":219},[875],{"type":26,"value":750},{"type":21,"tag":212,"props":877,"children":878},{"style":566},[879],{"type":26,"value":569},{"type":21,"tag":212,"props":881,"children":883},{"class":214,"line":882},27,[884,889,893,898,903,907,912],{"type":21,"tag":212,"props":885,"children":886},{"style":327},[887],{"type":26,"value":888},"         token",{"type":21,"tag":212,"props":890,"children":891},{"style":219},[892],{"type":26,"value":335},{"type":21,"tag":212,"props":894,"children":895},{"style":263},[896],{"type":26,"value":897}," @key[@inputTokens.",{"type":21,"tag":212,"props":899,"children":900},{"style":566},[901],{"type":26,"value":902},"join",{"type":21,"tag":212,"props":904,"children":905},{"style":263},[906],{"type":26,"value":276},{"type":21,"tag":212,"props":908,"children":909},{"style":279},[910],{"type":26,"value":911},"''",{"type":21,"tag":212,"props":913,"children":914},{"style":263},[915],{"type":26,"value":916},")]\n",{"type":21,"tag":212,"props":918,"children":920},{"class":214,"line":919},28,[921,925,929,933,937,942,946],{"type":21,"tag":212,"props":922,"children":923},{"style":263},[924],{"type":26,"value":650},{"type":21,"tag":212,"props":926,"children":927},{"style":225},[928],{"type":26,"value":767},{"type":21,"tag":212,"props":930,"children":931},{"style":263},[932],{"type":26,"value":276},{"type":21,"tag":212,"props":934,"children":935},{"style":279},[936],{"type":26,"value":282},{"type":21,"tag":212,"props":938,"children":939},{"style":263},[940],{"type":26,"value":941},", token) ",{"type":21,"tag":212,"props":943,"children":944},{"style":219},[945],{"type":26,"value":664},{"type":21,"tag":212,"props":947,"children":948},{"style":263},[949],{"type":26,"value":669},{"type":21,"tag":212,"props":951,"children":953},{"class":214,"line":952},29,[954,959,964],{"type":21,"tag":212,"props":955,"children":956},{"style":263},[957],{"type":26,"value":958},"          token ",{"type":21,"tag":212,"props":960,"children":961},{"style":219},[962],{"type":26,"value":963},"!=",{"type":21,"tag":212,"props":965,"children":966},{"style":566},[967],{"type":26,"value":968}," undefined\n",{"type":21,"tag":212,"props":970,"children":972},{"class":214,"line":971},30,[973,977,981],{"type":21,"tag":212,"props":974,"children":975},{"style":263},[976],{"type":26,"value":559},{"type":21,"tag":212,"props":978,"children":979},{"style":219},[980],{"type":26,"value":545},{"type":21,"tag":212,"props":982,"children":983},{"style":566},[984],{"type":26,"value":569},{"type":21,"tag":212,"props":986,"children":988},{"class":214,"line":987},31,[989,994,998],{"type":21,"tag":212,"props":990,"children":991},{"style":263},[992],{"type":26,"value":993},"      @inputTokens.length ",{"type":21,"tag":212,"props":995,"children":996},{"style":219},[997],{"type":26,"value":545},{"type":21,"tag":212,"props":999,"children":1000},{"style":566},[1001],{"type":26,"value":569},{"type":21,"tag":22,"props":1003,"children":1004},{},[1005,1007,1012,1014,1019],{"type":26,"value":1006},"The Decoder model is responsible for determining what characters the user has sent across the line. The ",{"type":21,"tag":96,"props":1008,"children":1009},{},[1010],{"type":26,"value":1011},"processToken",{"type":26,"value":1013}," function is called each time the tokens on the communication line progress one step through the line. The decoder processes the current tokens sent by the user anytime it sees 10 or more empty tokens in a row or receives a word-break token. If the decoder parses a known morse code sequence it fires a ",{"type":21,"tag":96,"props":1015,"children":1016},{},[1017],{"type":26,"value":1018},"parsedCharacter",{"type":26,"value":1020}," event letting the message field know it needs to rerender itself.",{"type":21,"tag":22,"props":1022,"children":1023},{},[1024],{"type":21,"tag":96,"props":1025,"children":1026},{},[1027],{"type":21,"tag":192,"props":1028,"children":1029},{},[1030],{"type":26,"value":1031},"Decoder View",{"type":21,"tag":201,"props":1033,"children":1035},{"className":203,"code":1034,"language":205,"meta":8,"style":8},"class CommunicationLineView extends Backbone.View\n   initialize: ->\n      @model.bind('hasNewData', @render)\n\n   render: (tokens) =>\n      context = document.getElementById(\n       \"communicationLineCanvas\").getContext('2d')\n\n      context.clearRect(0, 0, context.canvas.width, 29)\n      tokenNum = 0\n      for token in tokens\n         do (token) ->\n            if kDotToken == token\n               context.beginPath()\n               context.moveTo((50 * tokenNum) + 15, 15)\n\n               context.arc((50 * tokenNum) + 15, 15, 10, \n                0, Math.PI*2, false)\n\n               context.closePath()\n               context.fill()\n               context.stroke()\n            else if kDashToken == token\n               context.fillRect((50 * tokenNum) + 15, \n                15, 25, 10)\n            else if kWordStopToken == token\n               context.fillRect((50 * tokenNum) + 30, \n                5, 10, 20)\n            tokenNum += 1\n",[1036],{"type":21,"tag":208,"props":1037,"children":1038},{"__ignoreMap":8},[1039,1059,1074,1098,1105,1125,1156,1187,1194,1238,1254,1276,1293,1315,1332,1386,1393,1451,1500,1507,1523,1539,1555,1580,1620,1649,1673,1713,1742],{"type":21,"tag":212,"props":1040,"children":1041},{"class":214,"line":215},[1042,1046,1051,1055],{"type":21,"tag":212,"props":1043,"children":1044},{"style":219},[1045],{"type":26,"value":222},{"type":21,"tag":212,"props":1047,"children":1048},{"style":225},[1049],{"type":26,"value":1050}," CommunicationLineView",{"type":21,"tag":212,"props":1052,"children":1053},{"style":219},[1054],{"type":26,"value":233},{"type":21,"tag":212,"props":1056,"children":1057},{"style":225},[1058],{"type":26,"value":238},{"type":21,"tag":212,"props":1060,"children":1061},{"class":214,"line":241},[1062,1066,1070],{"type":21,"tag":212,"props":1063,"children":1064},{"style":225},[1065],{"type":26,"value":247},{"type":21,"tag":212,"props":1067,"children":1068},{"style":219},[1069],{"type":26,"value":252},{"type":21,"tag":212,"props":1071,"children":1072},{"style":219},[1073],{"type":26,"value":257},{"type":21,"tag":212,"props":1075,"children":1076},{"class":214,"line":140},[1077,1081,1085,1089,1094],{"type":21,"tag":212,"props":1078,"children":1079},{"style":263},[1080],{"type":26,"value":266},{"type":21,"tag":212,"props":1082,"children":1083},{"style":225},[1084],{"type":26,"value":271},{"type":21,"tag":212,"props":1086,"children":1087},{"style":263},[1088],{"type":26,"value":276},{"type":21,"tag":212,"props":1090,"children":1091},{"style":279},[1092],{"type":26,"value":1093},"'hasNewData'",{"type":21,"tag":212,"props":1095,"children":1096},{"style":263},[1097],{"type":26,"value":287},{"type":21,"tag":212,"props":1099,"children":1100},{"class":214,"line":290},[1101],{"type":21,"tag":212,"props":1102,"children":1103},{"emptyLinePlaceholder":294},[1104],{"type":26,"value":297},{"type":21,"tag":212,"props":1106,"children":1107},{"class":214,"line":300},[1108,1112,1116,1121],{"type":21,"tag":212,"props":1109,"children":1110},{"style":225},[1111],{"type":26,"value":306},{"type":21,"tag":212,"props":1113,"children":1114},{"style":219},[1115],{"type":26,"value":252},{"type":21,"tag":212,"props":1117,"children":1118},{"style":263},[1119],{"type":26,"value":1120}," (tokens) ",{"type":21,"tag":212,"props":1122,"children":1123},{"style":219},[1124],{"type":26,"value":320},{"type":21,"tag":212,"props":1126,"children":1127},{"class":214,"line":323},[1128,1133,1137,1142,1146,1151],{"type":21,"tag":212,"props":1129,"children":1130},{"style":327},[1131],{"type":26,"value":1132},"      context",{"type":21,"tag":212,"props":1134,"children":1135},{"style":219},[1136],{"type":26,"value":335},{"type":21,"tag":212,"props":1138,"children":1139},{"style":566},[1140],{"type":26,"value":1141}," document",{"type":21,"tag":212,"props":1143,"children":1144},{"style":263},[1145],{"type":26,"value":47},{"type":21,"tag":212,"props":1147,"children":1148},{"style":566},[1149],{"type":26,"value":1150},"getElementById",{"type":21,"tag":212,"props":1152,"children":1153},{"style":263},[1154],{"type":26,"value":1155},"(\n",{"type":21,"tag":212,"props":1157,"children":1158},{"class":214,"line":357},[1159,1164,1169,1174,1178,1183],{"type":21,"tag":212,"props":1160,"children":1161},{"style":279},[1162],{"type":26,"value":1163},"       \"communicationLineCanvas\"",{"type":21,"tag":212,"props":1165,"children":1166},{"style":263},[1167],{"type":26,"value":1168},").",{"type":21,"tag":212,"props":1170,"children":1171},{"style":566},[1172],{"type":26,"value":1173},"getContext",{"type":21,"tag":212,"props":1175,"children":1176},{"style":263},[1177],{"type":26,"value":276},{"type":21,"tag":212,"props":1179,"children":1180},{"style":279},[1181],{"type":26,"value":1182},"'2d'",{"type":21,"tag":212,"props":1184,"children":1185},{"style":263},[1186],{"type":26,"value":354},{"type":21,"tag":212,"props":1188,"children":1189},{"class":214,"line":510},[1190],{"type":21,"tag":212,"props":1191,"children":1192},{"emptyLinePlaceholder":294},[1193],{"type":26,"value":297},{"type":21,"tag":212,"props":1195,"children":1196},{"class":214,"line":518},[1197,1202,1207,1211,1216,1220,1224,1229,1234],{"type":21,"tag":212,"props":1198,"children":1199},{"style":263},[1200],{"type":26,"value":1201},"      context.",{"type":21,"tag":212,"props":1203,"children":1204},{"style":225},[1205],{"type":26,"value":1206},"clearRect",{"type":21,"tag":212,"props":1208,"children":1209},{"style":263},[1210],{"type":26,"value":276},{"type":21,"tag":212,"props":1212,"children":1213},{"style":566},[1214],{"type":26,"value":1215},"0",{"type":21,"tag":212,"props":1217,"children":1218},{"style":263},[1219],{"type":26,"value":780},{"type":21,"tag":212,"props":1221,"children":1222},{"style":566},[1223],{"type":26,"value":1215},{"type":21,"tag":212,"props":1225,"children":1226},{"style":263},[1227],{"type":26,"value":1228},", context.canvas.width, ",{"type":21,"tag":212,"props":1230,"children":1231},{"style":566},[1232],{"type":26,"value":1233},"29",{"type":21,"tag":212,"props":1235,"children":1236},{"style":263},[1237],{"type":26,"value":354},{"type":21,"tag":212,"props":1239,"children":1240},{"class":214,"line":534},[1241,1246,1250],{"type":21,"tag":212,"props":1242,"children":1243},{"style":327},[1244],{"type":26,"value":1245},"      tokenNum",{"type":21,"tag":212,"props":1247,"children":1248},{"style":219},[1249],{"type":26,"value":335},{"type":21,"tag":212,"props":1251,"children":1252},{"style":566},[1253],{"type":26,"value":569},{"type":21,"tag":212,"props":1255,"children":1256},{"class":214,"line":553},[1257,1262,1266,1271],{"type":21,"tag":212,"props":1258,"children":1259},{"style":219},[1260],{"type":26,"value":1261},"      for",{"type":21,"tag":212,"props":1263,"children":1264},{"style":263},[1265],{"type":26,"value":631},{"type":21,"tag":212,"props":1267,"children":1268},{"style":219},[1269],{"type":26,"value":1270},"in",{"type":21,"tag":212,"props":1272,"children":1273},{"style":263},[1274],{"type":26,"value":1275}," tokens\n",{"type":21,"tag":212,"props":1277,"children":1278},{"class":214,"line":572},[1279,1284,1288],{"type":21,"tag":212,"props":1280,"children":1281},{"style":219},[1282],{"type":26,"value":1283},"         do",{"type":21,"tag":212,"props":1285,"children":1286},{"style":263},[1287],{"type":26,"value":315},{"type":21,"tag":212,"props":1289,"children":1290},{"style":219},[1291],{"type":26,"value":1292},"->\n",{"type":21,"tag":212,"props":1294,"children":1295},{"class":214,"line":591},[1296,1301,1306,1310],{"type":21,"tag":212,"props":1297,"children":1298},{"style":219},[1299],{"type":26,"value":1300},"            if",{"type":21,"tag":212,"props":1302,"children":1303},{"style":263},[1304],{"type":26,"value":1305}," kDotToken ",{"type":21,"tag":212,"props":1307,"children":1308},{"style":219},[1309],{"type":26,"value":636},{"type":21,"tag":212,"props":1311,"children":1312},{"style":263},[1313],{"type":26,"value":1314}," token\n",{"type":21,"tag":212,"props":1316,"children":1317},{"class":214,"line":599},[1318,1323,1328],{"type":21,"tag":212,"props":1319,"children":1320},{"style":263},[1321],{"type":26,"value":1322},"               context.",{"type":21,"tag":212,"props":1324,"children":1325},{"style":225},[1326],{"type":26,"value":1327},"beginPath",{"type":21,"tag":212,"props":1329,"children":1330},{"style":263},[1331],{"type":26,"value":588},{"type":21,"tag":212,"props":1333,"children":1334},{"class":214,"line":620},[1335,1339,1344,1349,1354,1359,1364,1368,1373,1377,1382],{"type":21,"tag":212,"props":1336,"children":1337},{"style":263},[1338],{"type":26,"value":1322},{"type":21,"tag":212,"props":1340,"children":1341},{"style":566},[1342],{"type":26,"value":1343},"moveTo",{"type":21,"tag":212,"props":1345,"children":1346},{"style":263},[1347],{"type":26,"value":1348},"((",{"type":21,"tag":212,"props":1350,"children":1351},{"style":566},[1352],{"type":26,"value":1353},"50",{"type":21,"tag":212,"props":1355,"children":1356},{"style":219},[1357],{"type":26,"value":1358}," *",{"type":21,"tag":212,"props":1360,"children":1361},{"style":263},[1362],{"type":26,"value":1363}," tokenNum) ",{"type":21,"tag":212,"props":1365,"children":1366},{"style":219},[1367],{"type":26,"value":387},{"type":21,"tag":212,"props":1369,"children":1370},{"style":566},[1371],{"type":26,"value":1372}," 15",{"type":21,"tag":212,"props":1374,"children":1375},{"style":263},[1376],{"type":26,"value":780},{"type":21,"tag":212,"props":1378,"children":1379},{"style":566},[1380],{"type":26,"value":1381},"15",{"type":21,"tag":212,"props":1383,"children":1384},{"style":263},[1385],{"type":26,"value":354},{"type":21,"tag":212,"props":1387,"children":1388},{"class":214,"line":644},[1389],{"type":21,"tag":212,"props":1390,"children":1391},{"emptyLinePlaceholder":294},[1392],{"type":26,"value":297},{"type":21,"tag":212,"props":1394,"children":1395},{"class":214,"line":672},[1396,1400,1405,1409,1413,1417,1421,1425,1429,1433,1437,1441,1446],{"type":21,"tag":212,"props":1397,"children":1398},{"style":263},[1399],{"type":26,"value":1322},{"type":21,"tag":212,"props":1401,"children":1402},{"style":225},[1403],{"type":26,"value":1404},"arc",{"type":21,"tag":212,"props":1406,"children":1407},{"style":263},[1408],{"type":26,"value":1348},{"type":21,"tag":212,"props":1410,"children":1411},{"style":566},[1412],{"type":26,"value":1353},{"type":21,"tag":212,"props":1414,"children":1415},{"style":219},[1416],{"type":26,"value":1358},{"type":21,"tag":212,"props":1418,"children":1419},{"style":263},[1420],{"type":26,"value":1363},{"type":21,"tag":212,"props":1422,"children":1423},{"style":219},[1424],{"type":26,"value":387},{"type":21,"tag":212,"props":1426,"children":1427},{"style":566},[1428],{"type":26,"value":1372},{"type":21,"tag":212,"props":1430,"children":1431},{"style":263},[1432],{"type":26,"value":780},{"type":21,"tag":212,"props":1434,"children":1435},{"style":566},[1436],{"type":26,"value":1381},{"type":21,"tag":212,"props":1438,"children":1439},{"style":263},[1440],{"type":26,"value":780},{"type":21,"tag":212,"props":1442,"children":1443},{"style":566},[1444],{"type":26,"value":1445},"10",{"type":21,"tag":212,"props":1447,"children":1448},{"style":263},[1449],{"type":26,"value":1450},", \n",{"type":21,"tag":212,"props":1452,"children":1453},{"class":214,"line":696},[1454,1459,1463,1468,1472,1477,1482,1487,1491,1496],{"type":21,"tag":212,"props":1455,"children":1456},{"style":566},[1457],{"type":26,"value":1458},"                0",{"type":21,"tag":212,"props":1460,"children":1461},{"style":263},[1462],{"type":26,"value":780},{"type":21,"tag":212,"props":1464,"children":1465},{"style":566},[1466],{"type":26,"value":1467},"Math",{"type":21,"tag":212,"props":1469,"children":1470},{"style":263},[1471],{"type":26,"value":47},{"type":21,"tag":212,"props":1473,"children":1474},{"style":566},[1475],{"type":26,"value":1476},"PI",{"type":21,"tag":212,"props":1478,"children":1479},{"style":219},[1480],{"type":26,"value":1481},"*",{"type":21,"tag":212,"props":1483,"children":1484},{"style":566},[1485],{"type":26,"value":1486},"2",{"type":21,"tag":212,"props":1488,"children":1489},{"style":263},[1490],{"type":26,"value":780},{"type":21,"tag":212,"props":1492,"children":1493},{"style":566},[1494],{"type":26,"value":1495},"false",{"type":21,"tag":212,"props":1497,"children":1498},{"style":263},[1499],{"type":26,"value":354},{"type":21,"tag":212,"props":1501,"children":1502},{"class":214,"line":723},[1503],{"type":21,"tag":212,"props":1504,"children":1505},{"emptyLinePlaceholder":294},[1506],{"type":26,"value":297},{"type":21,"tag":212,"props":1508,"children":1509},{"class":214,"line":757},[1510,1514,1519],{"type":21,"tag":212,"props":1511,"children":1512},{"style":263},[1513],{"type":26,"value":1322},{"type":21,"tag":212,"props":1515,"children":1516},{"style":225},[1517],{"type":26,"value":1518},"closePath",{"type":21,"tag":212,"props":1520,"children":1521},{"style":263},[1522],{"type":26,"value":588},{"type":21,"tag":212,"props":1524,"children":1525},{"class":214,"line":792},[1526,1530,1535],{"type":21,"tag":212,"props":1527,"children":1528},{"style":263},[1529],{"type":26,"value":1322},{"type":21,"tag":212,"props":1531,"children":1532},{"style":225},[1533],{"type":26,"value":1534},"fill",{"type":21,"tag":212,"props":1536,"children":1537},{"style":263},[1538],{"type":26,"value":588},{"type":21,"tag":212,"props":1540,"children":1541},{"class":214,"line":801},[1542,1546,1551],{"type":21,"tag":212,"props":1543,"children":1544},{"style":263},[1545],{"type":26,"value":1322},{"type":21,"tag":212,"props":1547,"children":1548},{"style":225},[1549],{"type":26,"value":1550},"stroke",{"type":21,"tag":212,"props":1552,"children":1553},{"style":263},[1554],{"type":26,"value":588},{"type":21,"tag":212,"props":1556,"children":1557},{"class":214,"line":820},[1558,1563,1567,1572,1576],{"type":21,"tag":212,"props":1559,"children":1560},{"style":219},[1561],{"type":26,"value":1562},"            else",{"type":21,"tag":212,"props":1564,"children":1565},{"style":219},[1566],{"type":26,"value":707},{"type":21,"tag":212,"props":1568,"children":1569},{"style":263},[1570],{"type":26,"value":1571}," kDashToken ",{"type":21,"tag":212,"props":1573,"children":1574},{"style":219},[1575],{"type":26,"value":636},{"type":21,"tag":212,"props":1577,"children":1578},{"style":263},[1579],{"type":26,"value":1314},{"type":21,"tag":212,"props":1581,"children":1582},{"class":214,"line":837},[1583,1587,1592,1596,1600,1604,1608,1612,1616],{"type":21,"tag":212,"props":1584,"children":1585},{"style":263},[1586],{"type":26,"value":1322},{"type":21,"tag":212,"props":1588,"children":1589},{"style":225},[1590],{"type":26,"value":1591},"fillRect",{"type":21,"tag":212,"props":1593,"children":1594},{"style":263},[1595],{"type":26,"value":1348},{"type":21,"tag":212,"props":1597,"children":1598},{"style":566},[1599],{"type":26,"value":1353},{"type":21,"tag":212,"props":1601,"children":1602},{"style":219},[1603],{"type":26,"value":1358},{"type":21,"tag":212,"props":1605,"children":1606},{"style":263},[1607],{"type":26,"value":1363},{"type":21,"tag":212,"props":1609,"children":1610},{"style":219},[1611],{"type":26,"value":387},{"type":21,"tag":212,"props":1613,"children":1614},{"style":566},[1615],{"type":26,"value":1372},{"type":21,"tag":212,"props":1617,"children":1618},{"style":263},[1619],{"type":26,"value":1450},{"type":21,"tag":212,"props":1621,"children":1622},{"class":214,"line":845},[1623,1628,1632,1637,1641,1645],{"type":21,"tag":212,"props":1624,"children":1625},{"style":566},[1626],{"type":26,"value":1627},"                15",{"type":21,"tag":212,"props":1629,"children":1630},{"style":263},[1631],{"type":26,"value":780},{"type":21,"tag":212,"props":1633,"children":1634},{"style":566},[1635],{"type":26,"value":1636},"25",{"type":21,"tag":212,"props":1638,"children":1639},{"style":263},[1640],{"type":26,"value":780},{"type":21,"tag":212,"props":1642,"children":1643},{"style":566},[1644],{"type":26,"value":1445},{"type":21,"tag":212,"props":1646,"children":1647},{"style":263},[1648],{"type":26,"value":354},{"type":21,"tag":212,"props":1650,"children":1651},{"class":214,"line":862},[1652,1656,1660,1665,1669],{"type":21,"tag":212,"props":1653,"children":1654},{"style":219},[1655],{"type":26,"value":1562},{"type":21,"tag":212,"props":1657,"children":1658},{"style":219},[1659],{"type":26,"value":707},{"type":21,"tag":212,"props":1661,"children":1662},{"style":263},[1663],{"type":26,"value":1664}," kWordStopToken ",{"type":21,"tag":212,"props":1666,"children":1667},{"style":219},[1668],{"type":26,"value":636},{"type":21,"tag":212,"props":1670,"children":1671},{"style":263},[1672],{"type":26,"value":1314},{"type":21,"tag":212,"props":1674,"children":1675},{"class":214,"line":882},[1676,1680,1684,1688,1692,1696,1700,1704,1709],{"type":21,"tag":212,"props":1677,"children":1678},{"style":263},[1679],{"type":26,"value":1322},{"type":21,"tag":212,"props":1681,"children":1682},{"style":225},[1683],{"type":26,"value":1591},{"type":21,"tag":212,"props":1685,"children":1686},{"style":263},[1687],{"type":26,"value":1348},{"type":21,"tag":212,"props":1689,"children":1690},{"style":566},[1691],{"type":26,"value":1353},{"type":21,"tag":212,"props":1693,"children":1694},{"style":219},[1695],{"type":26,"value":1358},{"type":21,"tag":212,"props":1697,"children":1698},{"style":263},[1699],{"type":26,"value":1363},{"type":21,"tag":212,"props":1701,"children":1702},{"style":219},[1703],{"type":26,"value":387},{"type":21,"tag":212,"props":1705,"children":1706},{"style":566},[1707],{"type":26,"value":1708}," 30",{"type":21,"tag":212,"props":1710,"children":1711},{"style":263},[1712],{"type":26,"value":1450},{"type":21,"tag":212,"props":1714,"children":1715},{"class":214,"line":919},[1716,1721,1725,1729,1733,1738],{"type":21,"tag":212,"props":1717,"children":1718},{"style":566},[1719],{"type":26,"value":1720},"                5",{"type":21,"tag":212,"props":1722,"children":1723},{"style":263},[1724],{"type":26,"value":780},{"type":21,"tag":212,"props":1726,"children":1727},{"style":566},[1728],{"type":26,"value":1445},{"type":21,"tag":212,"props":1730,"children":1731},{"style":263},[1732],{"type":26,"value":780},{"type":21,"tag":212,"props":1734,"children":1735},{"style":566},[1736],{"type":26,"value":1737},"20",{"type":21,"tag":212,"props":1739,"children":1740},{"style":263},[1741],{"type":26,"value":354},{"type":21,"tag":212,"props":1743,"children":1744},{"class":214,"line":952},[1745,1750,1755],{"type":21,"tag":212,"props":1746,"children":1747},{"style":327},[1748],{"type":26,"value":1749},"            tokenNum",{"type":21,"tag":212,"props":1751,"children":1752},{"style":219},[1753],{"type":26,"value":1754}," +=",{"type":21,"tag":212,"props":1756,"children":1757},{"style":566},[1758],{"type":26,"value":1759}," 1\n",{"type":21,"tag":22,"props":1761,"children":1762},{},[1763,1765,1769],{"type":26,"value":1764},"The Decoder view is a Backbone.js view class that represents a simple text box to display the characters the user has sent across the line. Anytime the Decoder model emits a ",{"type":21,"tag":96,"props":1766,"children":1767},{},[1768],{"type":26,"value":1018},{"type":26,"value":1770}," event, the Decoder view appends the parsed character to the end of its text box.",{"type":21,"tag":1772,"props":1773,"children":1774},"style",{},[1775],{"type":26,"value":1776},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":8,"searchDepth":140,"depth":140,"links":1778},[],"content:rbrubaker:2012-06:coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2",{"user":149,"name":150},{"_path":1784,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1785,"description":1786,"publishDate":1787,"tags":1788,"excerpt":1786,"body":1789,"_type":142,"_id":3566,"_source":144,"_file":3567,"_stem":3568,"_extension":147,"author":3569},"/rbrubaker/2012-06/coffe-backbone-1","Fun with CoffeeScript and Backbone.js : Part 1","CoffeeScript has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen Backbone.js mentioned quite a bit and was even more intrigued after listening to this .NET Rocks podcast. I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.","2012-06-06",[13,14,15,16],{"type":18,"children":1790,"toc":3564},[1791,1818,1827,1845,1850,1861,2239,2250,2261,2506,2517,2522,3097,3102,3113,3550,3555,3560],{"type":21,"tag":22,"props":1792,"children":1793},{},[1794,1799,1801,1807,1809,1816],{"type":21,"tag":29,"props":1795,"children":1797},{"href":31,"rel":1796},[33],[1798],{"type":26,"value":36},{"type":26,"value":1800}," has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen ",{"type":21,"tag":29,"props":1802,"children":1805},{"href":1803,"rel":1804},"http://backbonejs.org",[33],[1806],{"type":26,"value":45},{"type":26,"value":1808}," mentioned quite a bit and was even more intrigued after listening to this ",{"type":21,"tag":29,"props":1810,"children":1813},{"href":1811,"rel":1812},"http://www.dotnetrocks.com/default.aspx?showNum=743",[33],[1814],{"type":26,"value":1815},".NET Rocks podcast",{"type":26,"value":1817},". I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.",{"type":21,"tag":22,"props":1819,"children":1820},{},[1821,1822,1826],{"type":26,"value":73},{"type":21,"tag":29,"props":1823,"children":1824},{"href":76},[1825],{"type":26,"value":79},{"type":26,"value":47},{"type":21,"tag":22,"props":1828,"children":1829},{},[1830,1832,1837,1839,1844],{"type":26,"value":1831},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":21,"tag":29,"props":1833,"children":1835},{"href":55,"rel":1834},[33],[1836],{"type":26,"value":59},{"type":26,"value":1838}," and the running code can be seen ",{"type":21,"tag":29,"props":1840,"children":1842},{"href":64,"rel":1841},[33],[1843],{"type":26,"value":59},{"type":26,"value":47},{"type":21,"tag":22,"props":1846,"children":1847},{},[1848],{"type":26,"value":1849},"In this post I'll discuss the code that handles the user input.",{"type":21,"tag":22,"props":1851,"children":1852},{},[1853],{"type":21,"tag":96,"props":1854,"children":1855},{},[1856],{"type":21,"tag":192,"props":1857,"children":1858},{},[1859],{"type":26,"value":1860},"Initialization",{"type":21,"tag":201,"props":1862,"children":1864},{"className":203,"code":1863,"language":205,"meta":8,"style":8},"init = ->\n   decoder = new MorseDecoder\n\n   communicationLine = new CommunicationLine(\n    'decoder': decoder)\n\n   straightKey = new StraightKeyInput(\n    'el': $('#straight-key-div'), \n    'model': communicationLine)\n\n   communicationLineView = new CommunicationLineView(\n    'el': $('#communication-line-div'), \n    'model': communicationLine)\n\n   decoderView = new DecoderView(\n    'el': $('messageBoxDiv'), \n    'model': decoder)\n\n   drawSignalLine()\n\n$(document).ready init\n",[1865],{"type":21,"tag":208,"props":1866,"children":1867},{"__ignoreMap":8},[1868,1884,1906,1913,1938,1955,1962,1987,2017,2034,2041,2065,2093,2108,2115,2139,2167,2182,2189,2201,2208],{"type":21,"tag":212,"props":1869,"children":1870},{"class":214,"line":215},[1871,1876,1880],{"type":21,"tag":212,"props":1872,"children":1873},{"style":225},[1874],{"type":26,"value":1875},"init",{"type":21,"tag":212,"props":1877,"children":1878},{"style":219},[1879],{"type":26,"value":335},{"type":21,"tag":212,"props":1881,"children":1882},{"style":219},[1883],{"type":26,"value":257},{"type":21,"tag":212,"props":1885,"children":1886},{"class":214,"line":241},[1887,1892,1896,1901],{"type":21,"tag":212,"props":1888,"children":1889},{"style":327},[1890],{"type":26,"value":1891},"   decoder",{"type":21,"tag":212,"props":1893,"children":1894},{"style":219},[1895],{"type":26,"value":335},{"type":21,"tag":212,"props":1897,"children":1898},{"style":219},[1899],{"type":26,"value":1900}," new",{"type":21,"tag":212,"props":1902,"children":1903},{"style":225},[1904],{"type":26,"value":1905}," MorseDecoder\n",{"type":21,"tag":212,"props":1907,"children":1908},{"class":214,"line":140},[1909],{"type":21,"tag":212,"props":1910,"children":1911},{"emptyLinePlaceholder":294},[1912],{"type":26,"value":297},{"type":21,"tag":212,"props":1914,"children":1915},{"class":214,"line":290},[1916,1921,1925,1929,1934],{"type":21,"tag":212,"props":1917,"children":1918},{"style":327},[1919],{"type":26,"value":1920},"   communicationLine",{"type":21,"tag":212,"props":1922,"children":1923},{"style":219},[1924],{"type":26,"value":335},{"type":21,"tag":212,"props":1926,"children":1927},{"style":219},[1928],{"type":26,"value":1900},{"type":21,"tag":212,"props":1930,"children":1931},{"style":225},[1932],{"type":26,"value":1933}," CommunicationLine",{"type":21,"tag":212,"props":1935,"children":1936},{"style":263},[1937],{"type":26,"value":1155},{"type":21,"tag":212,"props":1939,"children":1940},{"class":214,"line":300},[1941,1946,1950],{"type":21,"tag":212,"props":1942,"children":1943},{"style":279},[1944],{"type":26,"value":1945},"    'decoder'",{"type":21,"tag":212,"props":1947,"children":1948},{"style":219},[1949],{"type":26,"value":252},{"type":21,"tag":212,"props":1951,"children":1952},{"style":263},[1953],{"type":26,"value":1954}," decoder)\n",{"type":21,"tag":212,"props":1956,"children":1957},{"class":214,"line":323},[1958],{"type":21,"tag":212,"props":1959,"children":1960},{"emptyLinePlaceholder":294},[1961],{"type":26,"value":297},{"type":21,"tag":212,"props":1963,"children":1964},{"class":214,"line":357},[1965,1970,1974,1978,1983],{"type":21,"tag":212,"props":1966,"children":1967},{"style":327},[1968],{"type":26,"value":1969},"   straightKey",{"type":21,"tag":212,"props":1971,"children":1972},{"style":219},[1973],{"type":26,"value":335},{"type":21,"tag":212,"props":1975,"children":1976},{"style":219},[1977],{"type":26,"value":1900},{"type":21,"tag":212,"props":1979,"children":1980},{"style":225},[1981],{"type":26,"value":1982}," StraightKeyInput",{"type":21,"tag":212,"props":1984,"children":1985},{"style":263},[1986],{"type":26,"value":1155},{"type":21,"tag":212,"props":1988,"children":1989},{"class":214,"line":510},[1990,1995,1999,2003,2007,2012],{"type":21,"tag":212,"props":1991,"children":1992},{"style":279},[1993],{"type":26,"value":1994},"    'el'",{"type":21,"tag":212,"props":1996,"children":1997},{"style":219},[1998],{"type":26,"value":252},{"type":21,"tag":212,"props":2000,"children":2001},{"style":225},[2002],{"type":26,"value":340},{"type":21,"tag":212,"props":2004,"children":2005},{"style":263},[2006],{"type":26,"value":276},{"type":21,"tag":212,"props":2008,"children":2009},{"style":279},[2010],{"type":26,"value":2011},"'#straight-key-div'",{"type":21,"tag":212,"props":2013,"children":2014},{"style":263},[2015],{"type":26,"value":2016},"), \n",{"type":21,"tag":212,"props":2018,"children":2019},{"class":214,"line":518},[2020,2025,2029],{"type":21,"tag":212,"props":2021,"children":2022},{"style":279},[2023],{"type":26,"value":2024},"    'model'",{"type":21,"tag":212,"props":2026,"children":2027},{"style":219},[2028],{"type":26,"value":252},{"type":21,"tag":212,"props":2030,"children":2031},{"style":263},[2032],{"type":26,"value":2033}," communicationLine)\n",{"type":21,"tag":212,"props":2035,"children":2036},{"class":214,"line":534},[2037],{"type":21,"tag":212,"props":2038,"children":2039},{"emptyLinePlaceholder":294},[2040],{"type":26,"value":297},{"type":21,"tag":212,"props":2042,"children":2043},{"class":214,"line":553},[2044,2049,2053,2057,2061],{"type":21,"tag":212,"props":2045,"children":2046},{"style":327},[2047],{"type":26,"value":2048},"   communicationLineView",{"type":21,"tag":212,"props":2050,"children":2051},{"style":219},[2052],{"type":26,"value":335},{"type":21,"tag":212,"props":2054,"children":2055},{"style":219},[2056],{"type":26,"value":1900},{"type":21,"tag":212,"props":2058,"children":2059},{"style":225},[2060],{"type":26,"value":1050},{"type":21,"tag":212,"props":2062,"children":2063},{"style":263},[2064],{"type":26,"value":1155},{"type":21,"tag":212,"props":2066,"children":2067},{"class":214,"line":572},[2068,2072,2076,2080,2084,2089],{"type":21,"tag":212,"props":2069,"children":2070},{"style":279},[2071],{"type":26,"value":1994},{"type":21,"tag":212,"props":2073,"children":2074},{"style":219},[2075],{"type":26,"value":252},{"type":21,"tag":212,"props":2077,"children":2078},{"style":225},[2079],{"type":26,"value":340},{"type":21,"tag":212,"props":2081,"children":2082},{"style":263},[2083],{"type":26,"value":276},{"type":21,"tag":212,"props":2085,"children":2086},{"style":279},[2087],{"type":26,"value":2088},"'#communication-line-div'",{"type":21,"tag":212,"props":2090,"children":2091},{"style":263},[2092],{"type":26,"value":2016},{"type":21,"tag":212,"props":2094,"children":2095},{"class":214,"line":591},[2096,2100,2104],{"type":21,"tag":212,"props":2097,"children":2098},{"style":279},[2099],{"type":26,"value":2024},{"type":21,"tag":212,"props":2101,"children":2102},{"style":219},[2103],{"type":26,"value":252},{"type":21,"tag":212,"props":2105,"children":2106},{"style":263},[2107],{"type":26,"value":2033},{"type":21,"tag":212,"props":2109,"children":2110},{"class":214,"line":599},[2111],{"type":21,"tag":212,"props":2112,"children":2113},{"emptyLinePlaceholder":294},[2114],{"type":26,"value":297},{"type":21,"tag":212,"props":2116,"children":2117},{"class":214,"line":620},[2118,2123,2127,2131,2135],{"type":21,"tag":212,"props":2119,"children":2120},{"style":327},[2121],{"type":26,"value":2122},"   decoderView",{"type":21,"tag":212,"props":2124,"children":2125},{"style":219},[2126],{"type":26,"value":335},{"type":21,"tag":212,"props":2128,"children":2129},{"style":219},[2130],{"type":26,"value":1900},{"type":21,"tag":212,"props":2132,"children":2133},{"style":225},[2134],{"type":26,"value":228},{"type":21,"tag":212,"props":2136,"children":2137},{"style":263},[2138],{"type":26,"value":1155},{"type":21,"tag":212,"props":2140,"children":2141},{"class":214,"line":644},[2142,2146,2150,2154,2158,2163],{"type":21,"tag":212,"props":2143,"children":2144},{"style":279},[2145],{"type":26,"value":1994},{"type":21,"tag":212,"props":2147,"children":2148},{"style":219},[2149],{"type":26,"value":252},{"type":21,"tag":212,"props":2151,"children":2152},{"style":225},[2153],{"type":26,"value":340},{"type":21,"tag":212,"props":2155,"children":2156},{"style":263},[2157],{"type":26,"value":276},{"type":21,"tag":212,"props":2159,"children":2160},{"style":279},[2161],{"type":26,"value":2162},"'messageBoxDiv'",{"type":21,"tag":212,"props":2164,"children":2165},{"style":263},[2166],{"type":26,"value":2016},{"type":21,"tag":212,"props":2168,"children":2169},{"class":214,"line":672},[2170,2174,2178],{"type":21,"tag":212,"props":2171,"children":2172},{"style":279},[2173],{"type":26,"value":2024},{"type":21,"tag":212,"props":2175,"children":2176},{"style":219},[2177],{"type":26,"value":252},{"type":21,"tag":212,"props":2179,"children":2180},{"style":263},[2181],{"type":26,"value":1954},{"type":21,"tag":212,"props":2183,"children":2184},{"class":214,"line":696},[2185],{"type":21,"tag":212,"props":2186,"children":2187},{"emptyLinePlaceholder":294},[2188],{"type":26,"value":297},{"type":21,"tag":212,"props":2190,"children":2191},{"class":214,"line":723},[2192,2197],{"type":21,"tag":212,"props":2193,"children":2194},{"style":225},[2195],{"type":26,"value":2196},"   drawSignalLine",{"type":21,"tag":212,"props":2198,"children":2199},{"style":263},[2200],{"type":26,"value":588},{"type":21,"tag":212,"props":2202,"children":2203},{"class":214,"line":757},[2204],{"type":21,"tag":212,"props":2205,"children":2206},{"emptyLinePlaceholder":294},[2207],{"type":26,"value":297},{"type":21,"tag":212,"props":2209,"children":2210},{"class":214,"line":792},[2211,2216,2220,2225,2229,2234],{"type":21,"tag":212,"props":2212,"children":2213},{"style":225},[2214],{"type":26,"value":2215},"$",{"type":21,"tag":212,"props":2217,"children":2218},{"style":263},[2219],{"type":26,"value":276},{"type":21,"tag":212,"props":2221,"children":2222},{"style":566},[2223],{"type":26,"value":2224},"document",{"type":21,"tag":212,"props":2226,"children":2227},{"style":263},[2228],{"type":26,"value":1168},{"type":21,"tag":212,"props":2230,"children":2231},{"style":225},[2232],{"type":26,"value":2233},"ready",{"type":21,"tag":212,"props":2235,"children":2236},{"style":263},[2237],{"type":26,"value":2238}," init\n",{"type":21,"tag":22,"props":2240,"children":2241},{},[2242,2244,2248],{"type":26,"value":2243},"The ",{"type":21,"tag":96,"props":2245,"children":2246},{},[2247],{"type":26,"value":1875},{"type":26,"value":2249}," function sets up all of the Backbone.js model/view classes. Note that each Backbone view is initialized with both its corresponding HTML element and corresponding model object.",{"type":21,"tag":22,"props":2251,"children":2252},{},[2253,2255,2259],{"type":26,"value":2254},"The ",{"type":21,"tag":96,"props":2256,"children":2257},{},[2258],{"type":26,"value":1875},{"type":26,"value":2260}," function also draws the \"communication line\" in a canvas element.",{"type":21,"tag":201,"props":2262,"children":2264},{"className":203,"code":2263,"language":205,"meta":8,"style":8},"drawSignalLine = ->\n   context = document.getElementById(\n    \"communicationLineCanvas\").getContext('2d')\n\n   context.clearRect(0, 0, \n    context.canvas.width, context.canvas.height)\n\n   context.moveTo(0, 30)\n   context.lineTo(500, 30)\n   context.strokeStyle = \"#000\"\n   context.closePath()\n   context.stroke()\n",[2265],{"type":21,"tag":208,"props":2266,"children":2267},{"__ignoreMap":8},[2268,2284,2312,2340,2347,2379,2387,2394,2426,2459,2476,2491],{"type":21,"tag":212,"props":2269,"children":2270},{"class":214,"line":215},[2271,2276,2280],{"type":21,"tag":212,"props":2272,"children":2273},{"style":225},[2274],{"type":26,"value":2275},"drawSignalLine",{"type":21,"tag":212,"props":2277,"children":2278},{"style":219},[2279],{"type":26,"value":335},{"type":21,"tag":212,"props":2281,"children":2282},{"style":219},[2283],{"type":26,"value":257},{"type":21,"tag":212,"props":2285,"children":2286},{"class":214,"line":241},[2287,2292,2296,2300,2304,2308],{"type":21,"tag":212,"props":2288,"children":2289},{"style":327},[2290],{"type":26,"value":2291},"   context",{"type":21,"tag":212,"props":2293,"children":2294},{"style":219},[2295],{"type":26,"value":335},{"type":21,"tag":212,"props":2297,"children":2298},{"style":566},[2299],{"type":26,"value":1141},{"type":21,"tag":212,"props":2301,"children":2302},{"style":263},[2303],{"type":26,"value":47},{"type":21,"tag":212,"props":2305,"children":2306},{"style":566},[2307],{"type":26,"value":1150},{"type":21,"tag":212,"props":2309,"children":2310},{"style":263},[2311],{"type":26,"value":1155},{"type":21,"tag":212,"props":2313,"children":2314},{"class":214,"line":140},[2315,2320,2324,2328,2332,2336],{"type":21,"tag":212,"props":2316,"children":2317},{"style":279},[2318],{"type":26,"value":2319},"    \"communicationLineCanvas\"",{"type":21,"tag":212,"props":2321,"children":2322},{"style":263},[2323],{"type":26,"value":1168},{"type":21,"tag":212,"props":2325,"children":2326},{"style":566},[2327],{"type":26,"value":1173},{"type":21,"tag":212,"props":2329,"children":2330},{"style":263},[2331],{"type":26,"value":276},{"type":21,"tag":212,"props":2333,"children":2334},{"style":279},[2335],{"type":26,"value":1182},{"type":21,"tag":212,"props":2337,"children":2338},{"style":263},[2339],{"type":26,"value":354},{"type":21,"tag":212,"props":2341,"children":2342},{"class":214,"line":290},[2343],{"type":21,"tag":212,"props":2344,"children":2345},{"emptyLinePlaceholder":294},[2346],{"type":26,"value":297},{"type":21,"tag":212,"props":2348,"children":2349},{"class":214,"line":300},[2350,2355,2359,2363,2367,2371,2375],{"type":21,"tag":212,"props":2351,"children":2352},{"style":263},[2353],{"type":26,"value":2354},"   context.",{"type":21,"tag":212,"props":2356,"children":2357},{"style":225},[2358],{"type":26,"value":1206},{"type":21,"tag":212,"props":2360,"children":2361},{"style":263},[2362],{"type":26,"value":276},{"type":21,"tag":212,"props":2364,"children":2365},{"style":566},[2366],{"type":26,"value":1215},{"type":21,"tag":212,"props":2368,"children":2369},{"style":263},[2370],{"type":26,"value":780},{"type":21,"tag":212,"props":2372,"children":2373},{"style":566},[2374],{"type":26,"value":1215},{"type":21,"tag":212,"props":2376,"children":2377},{"style":263},[2378],{"type":26,"value":1450},{"type":21,"tag":212,"props":2380,"children":2381},{"class":214,"line":323},[2382],{"type":21,"tag":212,"props":2383,"children":2384},{"style":263},[2385],{"type":26,"value":2386},"    context.canvas.width, context.canvas.height)\n",{"type":21,"tag":212,"props":2388,"children":2389},{"class":214,"line":357},[2390],{"type":21,"tag":212,"props":2391,"children":2392},{"emptyLinePlaceholder":294},[2393],{"type":26,"value":297},{"type":21,"tag":212,"props":2395,"children":2396},{"class":214,"line":510},[2397,2401,2405,2409,2413,2417,2422],{"type":21,"tag":212,"props":2398,"children":2399},{"style":263},[2400],{"type":26,"value":2354},{"type":21,"tag":212,"props":2402,"children":2403},{"style":566},[2404],{"type":26,"value":1343},{"type":21,"tag":212,"props":2406,"children":2407},{"style":263},[2408],{"type":26,"value":276},{"type":21,"tag":212,"props":2410,"children":2411},{"style":566},[2412],{"type":26,"value":1215},{"type":21,"tag":212,"props":2414,"children":2415},{"style":263},[2416],{"type":26,"value":780},{"type":21,"tag":212,"props":2418,"children":2419},{"style":566},[2420],{"type":26,"value":2421},"30",{"type":21,"tag":212,"props":2423,"children":2424},{"style":263},[2425],{"type":26,"value":354},{"type":21,"tag":212,"props":2427,"children":2428},{"class":214,"line":518},[2429,2433,2438,2442,2447,2451,2455],{"type":21,"tag":212,"props":2430,"children":2431},{"style":263},[2432],{"type":26,"value":2354},{"type":21,"tag":212,"props":2434,"children":2435},{"style":225},[2436],{"type":26,"value":2437},"lineTo",{"type":21,"tag":212,"props":2439,"children":2440},{"style":263},[2441],{"type":26,"value":276},{"type":21,"tag":212,"props":2443,"children":2444},{"style":566},[2445],{"type":26,"value":2446},"500",{"type":21,"tag":212,"props":2448,"children":2449},{"style":263},[2450],{"type":26,"value":780},{"type":21,"tag":212,"props":2452,"children":2453},{"style":566},[2454],{"type":26,"value":2421},{"type":21,"tag":212,"props":2456,"children":2457},{"style":263},[2458],{"type":26,"value":354},{"type":21,"tag":212,"props":2460,"children":2461},{"class":214,"line":534},[2462,2467,2471],{"type":21,"tag":212,"props":2463,"children":2464},{"style":263},[2465],{"type":26,"value":2466},"   context.strokeStyle ",{"type":21,"tag":212,"props":2468,"children":2469},{"style":219},[2470],{"type":26,"value":545},{"type":21,"tag":212,"props":2472,"children":2473},{"style":279},[2474],{"type":26,"value":2475}," \"#000\"\n",{"type":21,"tag":212,"props":2477,"children":2478},{"class":214,"line":553},[2479,2483,2487],{"type":21,"tag":212,"props":2480,"children":2481},{"style":263},[2482],{"type":26,"value":2354},{"type":21,"tag":212,"props":2484,"children":2485},{"style":225},[2486],{"type":26,"value":1518},{"type":21,"tag":212,"props":2488,"children":2489},{"style":263},[2490],{"type":26,"value":588},{"type":21,"tag":212,"props":2492,"children":2493},{"class":214,"line":572},[2494,2498,2502],{"type":21,"tag":212,"props":2495,"children":2496},{"style":263},[2497],{"type":26,"value":2354},{"type":21,"tag":212,"props":2499,"children":2500},{"style":225},[2501],{"type":26,"value":1550},{"type":21,"tag":212,"props":2503,"children":2504},{"style":263},[2505],{"type":26,"value":588},{"type":21,"tag":22,"props":2507,"children":2508},{},[2509],{"type":21,"tag":96,"props":2510,"children":2511},{},[2512],{"type":21,"tag":192,"props":2513,"children":2514},{},[2515],{"type":26,"value":2516},"Input View",{"type":21,"tag":22,"props":2518,"children":2519},{},[2520],{"type":26,"value":2521},"The application processes user input using the StraighKeyInput class, a Backbone view class associated with an input button:",{"type":21,"tag":201,"props":2523,"children":2527},{"className":2524,"code":2525,"language":2526,"meta":8,"style":8},"language-javascript shiki shiki-themes github-light github-dark","class StraightKeyInput extends Backbone.View\n\n   initialize: ->\n      @dashTimer = null\n      @dashFlag = false\n      @wordStopTimer = null\n      @wordStopFlag = false\n\n   events:\n      'mousedown #straight-key': 'startTimers',\n      'mouseup #straight-key': 'sendUserInput'\n\n   startTimers: =>\n      @dashTimer = setTimeout(@dashTimerExpired, 250)\n      @wordStopTimer = setTimeout(\n       @wordStopTimerExpired, 1000)\n\n   dashTimerExpired: =>\n      @dashFlag = true\n\n   wordStopTimerExpired: =>\n      @wordStopFlag = true\n\n   sendUserInput: =>\n      if @wordStopFlag\n         @model.addToken(kWordStopToken)\n      else if @dashFlag\n         @model.addToken(kDashToken)\n      else\n         @model.addToken(kDotToken)\n\n      clearTimeout(@dashTimer)\n      clearTimeout(@wordStopTimer)\n      @dashFlag = false\n      @wordStopFlag = false\n","javascript",[2528],{"type":21,"tag":208,"props":2529,"children":2530},{"__ignoreMap":8},[2531,2560,2567,2583,2604,2625,2645,2665,2672,2685,2707,2724,2731,2747,2781,2804,2821,2828,2844,2864,2871,2887,2906,2913,2929,2946,2964,2984,3000,3007,3023,3030,3044,3057,3077],{"type":21,"tag":212,"props":2532,"children":2533},{"class":214,"line":215},[2534,2538,2542,2546,2551,2555],{"type":21,"tag":212,"props":2535,"children":2536},{"style":219},[2537],{"type":26,"value":222},{"type":21,"tag":212,"props":2539,"children":2540},{"style":225},[2541],{"type":26,"value":1982},{"type":21,"tag":212,"props":2543,"children":2544},{"style":219},[2545],{"type":26,"value":233},{"type":21,"tag":212,"props":2547,"children":2548},{"style":225},[2549],{"type":26,"value":2550}," Backbone",{"type":21,"tag":212,"props":2552,"children":2553},{"style":263},[2554],{"type":26,"value":47},{"type":21,"tag":212,"props":2556,"children":2557},{"style":225},[2558],{"type":26,"value":2559},"View\n",{"type":21,"tag":212,"props":2561,"children":2562},{"class":214,"line":241},[2563],{"type":21,"tag":212,"props":2564,"children":2565},{"emptyLinePlaceholder":294},[2566],{"type":26,"value":297},{"type":21,"tag":212,"props":2568,"children":2569},{"class":214,"line":140},[2570,2574,2579],{"type":21,"tag":212,"props":2571,"children":2572},{"style":225},[2573],{"type":26,"value":247},{"type":21,"tag":212,"props":2575,"children":2576},{"style":263},[2577],{"type":26,"value":2578},": ",{"type":21,"tag":212,"props":2580,"children":2581},{"style":219},[2582],{"type":26,"value":1292},{"type":21,"tag":212,"props":2584,"children":2585},{"class":214,"line":290},[2586,2590,2595,2599],{"type":21,"tag":212,"props":2587,"children":2588},{"style":263},[2589],{"type":26,"value":578},{"type":21,"tag":212,"props":2591,"children":2592},{"style":225},[2593],{"type":26,"value":2594},"dashTimer",{"type":21,"tag":212,"props":2596,"children":2597},{"style":219},[2598],{"type":26,"value":335},{"type":21,"tag":212,"props":2600,"children":2601},{"style":566},[2602],{"type":26,"value":2603}," null\n",{"type":21,"tag":212,"props":2605,"children":2606},{"class":214,"line":300},[2607,2611,2616,2620],{"type":21,"tag":212,"props":2608,"children":2609},{"style":263},[2610],{"type":26,"value":578},{"type":21,"tag":212,"props":2612,"children":2613},{"style":225},[2614],{"type":26,"value":2615},"dashFlag",{"type":21,"tag":212,"props":2617,"children":2618},{"style":219},[2619],{"type":26,"value":335},{"type":21,"tag":212,"props":2621,"children":2622},{"style":566},[2623],{"type":26,"value":2624}," false\n",{"type":21,"tag":212,"props":2626,"children":2627},{"class":214,"line":323},[2628,2632,2637,2641],{"type":21,"tag":212,"props":2629,"children":2630},{"style":263},[2631],{"type":26,"value":578},{"type":21,"tag":212,"props":2633,"children":2634},{"style":225},[2635],{"type":26,"value":2636},"wordStopTimer",{"type":21,"tag":212,"props":2638,"children":2639},{"style":219},[2640],{"type":26,"value":335},{"type":21,"tag":212,"props":2642,"children":2643},{"style":566},[2644],{"type":26,"value":2603},{"type":21,"tag":212,"props":2646,"children":2647},{"class":214,"line":357},[2648,2652,2657,2661],{"type":21,"tag":212,"props":2649,"children":2650},{"style":263},[2651],{"type":26,"value":578},{"type":21,"tag":212,"props":2653,"children":2654},{"style":225},[2655],{"type":26,"value":2656},"wordStopFlag",{"type":21,"tag":212,"props":2658,"children":2659},{"style":219},[2660],{"type":26,"value":335},{"type":21,"tag":212,"props":2662,"children":2663},{"style":566},[2664],{"type":26,"value":2624},{"type":21,"tag":212,"props":2666,"children":2667},{"class":214,"line":510},[2668],{"type":21,"tag":212,"props":2669,"children":2670},{"emptyLinePlaceholder":294},[2671],{"type":26,"value":297},{"type":21,"tag":212,"props":2673,"children":2674},{"class":214,"line":518},[2675,2680],{"type":21,"tag":212,"props":2676,"children":2677},{"style":225},[2678],{"type":26,"value":2679},"   events",{"type":21,"tag":212,"props":2681,"children":2682},{"style":263},[2683],{"type":26,"value":2684},":\n",{"type":21,"tag":212,"props":2686,"children":2687},{"class":214,"line":534},[2688,2693,2697,2702],{"type":21,"tag":212,"props":2689,"children":2690},{"style":279},[2691],{"type":26,"value":2692},"      'mousedown #straight-key'",{"type":21,"tag":212,"props":2694,"children":2695},{"style":263},[2696],{"type":26,"value":2578},{"type":21,"tag":212,"props":2698,"children":2699},{"style":279},[2700],{"type":26,"value":2701},"'startTimers'",{"type":21,"tag":212,"props":2703,"children":2704},{"style":263},[2705],{"type":26,"value":2706},",\n",{"type":21,"tag":212,"props":2708,"children":2709},{"class":214,"line":553},[2710,2715,2719],{"type":21,"tag":212,"props":2711,"children":2712},{"style":279},[2713],{"type":26,"value":2714},"      'mouseup #straight-key'",{"type":21,"tag":212,"props":2716,"children":2717},{"style":263},[2718],{"type":26,"value":2578},{"type":21,"tag":212,"props":2720,"children":2721},{"style":279},[2722],{"type":26,"value":2723},"'sendUserInput'\n",{"type":21,"tag":212,"props":2725,"children":2726},{"class":214,"line":572},[2727],{"type":21,"tag":212,"props":2728,"children":2729},{"emptyLinePlaceholder":294},[2730],{"type":26,"value":297},{"type":21,"tag":212,"props":2732,"children":2733},{"class":214,"line":591},[2734,2739,2743],{"type":21,"tag":212,"props":2735,"children":2736},{"style":225},[2737],{"type":26,"value":2738},"   startTimers",{"type":21,"tag":212,"props":2740,"children":2741},{"style":263},[2742],{"type":26,"value":2578},{"type":21,"tag":212,"props":2744,"children":2745},{"style":219},[2746],{"type":26,"value":320},{"type":21,"tag":212,"props":2748,"children":2749},{"class":214,"line":599},[2750,2754,2758,2762,2767,2772,2777],{"type":21,"tag":212,"props":2751,"children":2752},{"style":263},[2753],{"type":26,"value":578},{"type":21,"tag":212,"props":2755,"children":2756},{"style":225},[2757],{"type":26,"value":2594},{"type":21,"tag":212,"props":2759,"children":2760},{"style":219},[2761],{"type":26,"value":335},{"type":21,"tag":212,"props":2763,"children":2764},{"style":225},[2765],{"type":26,"value":2766}," setTimeout",{"type":21,"tag":212,"props":2768,"children":2769},{"style":263},[2770],{"type":26,"value":2771},"(@dashTimerExpired, ",{"type":21,"tag":212,"props":2773,"children":2774},{"style":566},[2775],{"type":26,"value":2776},"250",{"type":21,"tag":212,"props":2778,"children":2779},{"style":263},[2780],{"type":26,"value":354},{"type":21,"tag":212,"props":2782,"children":2783},{"class":214,"line":620},[2784,2788,2792,2796,2800],{"type":21,"tag":212,"props":2785,"children":2786},{"style":263},[2787],{"type":26,"value":578},{"type":21,"tag":212,"props":2789,"children":2790},{"style":225},[2791],{"type":26,"value":2636},{"type":21,"tag":212,"props":2793,"children":2794},{"style":219},[2795],{"type":26,"value":335},{"type":21,"tag":212,"props":2797,"children":2798},{"style":225},[2799],{"type":26,"value":2766},{"type":21,"tag":212,"props":2801,"children":2802},{"style":263},[2803],{"type":26,"value":1155},{"type":21,"tag":212,"props":2805,"children":2806},{"class":214,"line":644},[2807,2812,2817],{"type":21,"tag":212,"props":2808,"children":2809},{"style":263},[2810],{"type":26,"value":2811},"       @wordStopTimerExpired, ",{"type":21,"tag":212,"props":2813,"children":2814},{"style":566},[2815],{"type":26,"value":2816},"1000",{"type":21,"tag":212,"props":2818,"children":2819},{"style":263},[2820],{"type":26,"value":354},{"type":21,"tag":212,"props":2822,"children":2823},{"class":214,"line":672},[2824],{"type":21,"tag":212,"props":2825,"children":2826},{"emptyLinePlaceholder":294},[2827],{"type":26,"value":297},{"type":21,"tag":212,"props":2829,"children":2830},{"class":214,"line":696},[2831,2836,2840],{"type":21,"tag":212,"props":2832,"children":2833},{"style":225},[2834],{"type":26,"value":2835},"   dashTimerExpired",{"type":21,"tag":212,"props":2837,"children":2838},{"style":263},[2839],{"type":26,"value":2578},{"type":21,"tag":212,"props":2841,"children":2842},{"style":219},[2843],{"type":26,"value":320},{"type":21,"tag":212,"props":2845,"children":2846},{"class":214,"line":723},[2847,2851,2855,2859],{"type":21,"tag":212,"props":2848,"children":2849},{"style":263},[2850],{"type":26,"value":578},{"type":21,"tag":212,"props":2852,"children":2853},{"style":225},[2854],{"type":26,"value":2615},{"type":21,"tag":212,"props":2856,"children":2857},{"style":219},[2858],{"type":26,"value":335},{"type":21,"tag":212,"props":2860,"children":2861},{"style":566},[2862],{"type":26,"value":2863}," true\n",{"type":21,"tag":212,"props":2865,"children":2866},{"class":214,"line":757},[2867],{"type":21,"tag":212,"props":2868,"children":2869},{"emptyLinePlaceholder":294},[2870],{"type":26,"value":297},{"type":21,"tag":212,"props":2872,"children":2873},{"class":214,"line":792},[2874,2879,2883],{"type":21,"tag":212,"props":2875,"children":2876},{"style":225},[2877],{"type":26,"value":2878},"   wordStopTimerExpired",{"type":21,"tag":212,"props":2880,"children":2881},{"style":263},[2882],{"type":26,"value":2578},{"type":21,"tag":212,"props":2884,"children":2885},{"style":219},[2886],{"type":26,"value":320},{"type":21,"tag":212,"props":2888,"children":2889},{"class":214,"line":801},[2890,2894,2898,2902],{"type":21,"tag":212,"props":2891,"children":2892},{"style":263},[2893],{"type":26,"value":578},{"type":21,"tag":212,"props":2895,"children":2896},{"style":225},[2897],{"type":26,"value":2656},{"type":21,"tag":212,"props":2899,"children":2900},{"style":219},[2901],{"type":26,"value":335},{"type":21,"tag":212,"props":2903,"children":2904},{"style":566},[2905],{"type":26,"value":2863},{"type":21,"tag":212,"props":2907,"children":2908},{"class":214,"line":820},[2909],{"type":21,"tag":212,"props":2910,"children":2911},{"emptyLinePlaceholder":294},[2912],{"type":26,"value":297},{"type":21,"tag":212,"props":2914,"children":2915},{"class":214,"line":837},[2916,2921,2925],{"type":21,"tag":212,"props":2917,"children":2918},{"style":225},[2919],{"type":26,"value":2920},"   sendUserInput",{"type":21,"tag":212,"props":2922,"children":2923},{"style":263},[2924],{"type":26,"value":2578},{"type":21,"tag":212,"props":2926,"children":2927},{"style":219},[2928],{"type":26,"value":320},{"type":21,"tag":212,"props":2930,"children":2931},{"class":214,"line":845},[2932,2936,2941],{"type":21,"tag":212,"props":2933,"children":2934},{"style":225},[2935],{"type":26,"value":626},{"type":21,"tag":212,"props":2937,"children":2938},{"style":263},[2939],{"type":26,"value":2940}," @",{"type":21,"tag":212,"props":2942,"children":2943},{"style":225},[2944],{"type":26,"value":2945},"wordStopFlag\n",{"type":21,"tag":212,"props":2947,"children":2948},{"class":214,"line":862},[2949,2954,2959],{"type":21,"tag":212,"props":2950,"children":2951},{"style":263},[2952],{"type":26,"value":2953},"         @model.",{"type":21,"tag":212,"props":2955,"children":2956},{"style":225},[2957],{"type":26,"value":2958},"addToken",{"type":21,"tag":212,"props":2960,"children":2961},{"style":263},[2962],{"type":26,"value":2963},"(kWordStopToken)\n",{"type":21,"tag":212,"props":2965,"children":2966},{"class":214,"line":882},[2967,2971,2975,2979],{"type":21,"tag":212,"props":2968,"children":2969},{"style":225},[2970],{"type":26,"value":702},{"type":21,"tag":212,"props":2972,"children":2973},{"style":225},[2974],{"type":26,"value":707},{"type":21,"tag":212,"props":2976,"children":2977},{"style":263},[2978],{"type":26,"value":2940},{"type":21,"tag":212,"props":2980,"children":2981},{"style":225},[2982],{"type":26,"value":2983},"dashFlag\n",{"type":21,"tag":212,"props":2985,"children":2986},{"class":214,"line":919},[2987,2991,2995],{"type":21,"tag":212,"props":2988,"children":2989},{"style":263},[2990],{"type":26,"value":2953},{"type":21,"tag":212,"props":2992,"children":2993},{"style":225},[2994],{"type":26,"value":2958},{"type":21,"tag":212,"props":2996,"children":2997},{"style":263},[2998],{"type":26,"value":2999},"(kDashToken)\n",{"type":21,"tag":212,"props":3001,"children":3002},{"class":214,"line":952},[3003],{"type":21,"tag":212,"props":3004,"children":3005},{"style":225},[3006],{"type":26,"value":798},{"type":21,"tag":212,"props":3008,"children":3009},{"class":214,"line":971},[3010,3014,3018],{"type":21,"tag":212,"props":3011,"children":3012},{"style":263},[3013],{"type":26,"value":2953},{"type":21,"tag":212,"props":3015,"children":3016},{"style":225},[3017],{"type":26,"value":2958},{"type":21,"tag":212,"props":3019,"children":3020},{"style":263},[3021],{"type":26,"value":3022},"(kDotToken)\n",{"type":21,"tag":212,"props":3024,"children":3025},{"class":214,"line":987},[3026],{"type":21,"tag":212,"props":3027,"children":3028},{"emptyLinePlaceholder":294},[3029],{"type":26,"value":297},{"type":21,"tag":212,"props":3031,"children":3033},{"class":214,"line":3032},32,[3034,3039],{"type":21,"tag":212,"props":3035,"children":3036},{"style":225},[3037],{"type":26,"value":3038},"      clearTimeout",{"type":21,"tag":212,"props":3040,"children":3041},{"style":263},[3042],{"type":26,"value":3043},"(@dashTimer)\n",{"type":21,"tag":212,"props":3045,"children":3047},{"class":214,"line":3046},33,[3048,3052],{"type":21,"tag":212,"props":3049,"children":3050},{"style":225},[3051],{"type":26,"value":3038},{"type":21,"tag":212,"props":3053,"children":3054},{"style":263},[3055],{"type":26,"value":3056},"(@wordStopTimer)\n",{"type":21,"tag":212,"props":3058,"children":3060},{"class":214,"line":3059},34,[3061,3065,3069,3073],{"type":21,"tag":212,"props":3062,"children":3063},{"style":263},[3064],{"type":26,"value":578},{"type":21,"tag":212,"props":3066,"children":3067},{"style":225},[3068],{"type":26,"value":2615},{"type":21,"tag":212,"props":3070,"children":3071},{"style":219},[3072],{"type":26,"value":335},{"type":21,"tag":212,"props":3074,"children":3075},{"style":566},[3076],{"type":26,"value":2624},{"type":21,"tag":212,"props":3078,"children":3080},{"class":214,"line":3079},35,[3081,3085,3089,3093],{"type":21,"tag":212,"props":3082,"children":3083},{"style":263},[3084],{"type":26,"value":578},{"type":21,"tag":212,"props":3086,"children":3087},{"style":225},[3088],{"type":26,"value":2656},{"type":21,"tag":212,"props":3090,"children":3091},{"style":219},[3092],{"type":26,"value":335},{"type":21,"tag":212,"props":3094,"children":3095},{"style":566},[3096],{"type":26,"value":2624},{"type":21,"tag":22,"props":3098,"children":3099},{},[3100],{"type":26,"value":3101},"The class uses two timers to determine which \"token\" a user intends to send across the line. Using Backbone's declarative style for event binding, I bind the mousedown event to a function that starts both timers. The mouseup event is bound to a function that pushes the appropriate token to the model based on how long the user held down the input button.",{"type":21,"tag":22,"props":3103,"children":3104},{},[3105],{"type":21,"tag":96,"props":3106,"children":3107},{},[3108],{"type":21,"tag":192,"props":3109,"children":3110},{},[3111],{"type":26,"value":3112},"Input Model",{"type":21,"tag":201,"props":3114,"children":3116},{"className":203,"code":3115,"language":205,"meta":8,"style":8},"class CommunicationLine extends Backbone.Model\n   initialize: (options) =>\n      @inputQueue = []\n\n      @communicationLine = \n       ['', '', '', '', '', '', '', '', '', '']\n\n      @decoder = options.decoder\n      setInterval(@moveDataOneStep, 100)\n\n   addToken: (token) =>\n      @inputQueue.push(token)\n\n   moveDataOneStep: =>\n      @decoder.processToken(@communicationLine.pop())\n      nextToken = @inputQueue.shift()\n\n      @communicationLine.unshift(\n       if undefined == nextToken then '' else nextToken)\n\n      @trigger('hasNewData', @communicationLine)\n",[3117],{"type":21,"tag":208,"props":3118,"children":3119},{"__ignoreMap":8},[3120,3139,3159,3175,3182,3198,3287,3294,3311,3333,3340,3360,3376,3383,3399,3426,3452,3459,3476,3519,3526],{"type":21,"tag":212,"props":3121,"children":3122},{"class":214,"line":215},[3123,3127,3131,3135],{"type":21,"tag":212,"props":3124,"children":3125},{"style":219},[3126],{"type":26,"value":222},{"type":21,"tag":212,"props":3128,"children":3129},{"style":225},[3130],{"type":26,"value":1933},{"type":21,"tag":212,"props":3132,"children":3133},{"style":219},[3134],{"type":26,"value":233},{"type":21,"tag":212,"props":3136,"children":3137},{"style":225},[3138],{"type":26,"value":452},{"type":21,"tag":212,"props":3140,"children":3141},{"class":214,"line":241},[3142,3146,3150,3155],{"type":21,"tag":212,"props":3143,"children":3144},{"style":225},[3145],{"type":26,"value":247},{"type":21,"tag":212,"props":3147,"children":3148},{"style":219},[3149],{"type":26,"value":252},{"type":21,"tag":212,"props":3151,"children":3152},{"style":263},[3153],{"type":26,"value":3154}," (options) ",{"type":21,"tag":212,"props":3156,"children":3157},{"style":219},[3158],{"type":26,"value":320},{"type":21,"tag":212,"props":3160,"children":3161},{"class":214,"line":140},[3162,3167,3171],{"type":21,"tag":212,"props":3163,"children":3164},{"style":263},[3165],{"type":26,"value":3166},"      @inputQueue ",{"type":21,"tag":212,"props":3168,"children":3169},{"style":219},[3170],{"type":26,"value":545},{"type":21,"tag":212,"props":3172,"children":3173},{"style":263},[3174],{"type":26,"value":550},{"type":21,"tag":212,"props":3176,"children":3177},{"class":214,"line":290},[3178],{"type":21,"tag":212,"props":3179,"children":3180},{"emptyLinePlaceholder":294},[3181],{"type":26,"value":297},{"type":21,"tag":212,"props":3183,"children":3184},{"class":214,"line":300},[3185,3190,3194],{"type":21,"tag":212,"props":3186,"children":3187},{"style":263},[3188],{"type":26,"value":3189},"      @communicationLine ",{"type":21,"tag":212,"props":3191,"children":3192},{"style":219},[3193],{"type":26,"value":545},{"type":21,"tag":212,"props":3195,"children":3196},{"style":263},[3197],{"type":26,"value":669},{"type":21,"tag":212,"props":3199,"children":3200},{"class":214,"line":323},[3201,3206,3210,3214,3218,3222,3226,3230,3234,3238,3242,3246,3250,3254,3258,3262,3266,3270,3274,3278,3282],{"type":21,"tag":212,"props":3202,"children":3203},{"style":263},[3204],{"type":26,"value":3205},"       [",{"type":21,"tag":212,"props":3207,"children":3208},{"style":279},[3209],{"type":26,"value":911},{"type":21,"tag":212,"props":3211,"children":3212},{"style":263},[3213],{"type":26,"value":780},{"type":21,"tag":212,"props":3215,"children":3216},{"style":279},[3217],{"type":26,"value":911},{"type":21,"tag":212,"props":3219,"children":3220},{"style":263},[3221],{"type":26,"value":780},{"type":21,"tag":212,"props":3223,"children":3224},{"style":279},[3225],{"type":26,"value":911},{"type":21,"tag":212,"props":3227,"children":3228},{"style":263},[3229],{"type":26,"value":780},{"type":21,"tag":212,"props":3231,"children":3232},{"style":279},[3233],{"type":26,"value":911},{"type":21,"tag":212,"props":3235,"children":3236},{"style":263},[3237],{"type":26,"value":780},{"type":21,"tag":212,"props":3239,"children":3240},{"style":279},[3241],{"type":26,"value":911},{"type":21,"tag":212,"props":3243,"children":3244},{"style":263},[3245],{"type":26,"value":780},{"type":21,"tag":212,"props":3247,"children":3248},{"style":279},[3249],{"type":26,"value":911},{"type":21,"tag":212,"props":3251,"children":3252},{"style":263},[3253],{"type":26,"value":780},{"type":21,"tag":212,"props":3255,"children":3256},{"style":279},[3257],{"type":26,"value":911},{"type":21,"tag":212,"props":3259,"children":3260},{"style":263},[3261],{"type":26,"value":780},{"type":21,"tag":212,"props":3263,"children":3264},{"style":279},[3265],{"type":26,"value":911},{"type":21,"tag":212,"props":3267,"children":3268},{"style":263},[3269],{"type":26,"value":780},{"type":21,"tag":212,"props":3271,"children":3272},{"style":279},[3273],{"type":26,"value":911},{"type":21,"tag":212,"props":3275,"children":3276},{"style":263},[3277],{"type":26,"value":780},{"type":21,"tag":212,"props":3279,"children":3280},{"style":279},[3281],{"type":26,"value":911},{"type":21,"tag":212,"props":3283,"children":3284},{"style":263},[3285],{"type":26,"value":3286},"]\n",{"type":21,"tag":212,"props":3288,"children":3289},{"class":214,"line":357},[3290],{"type":21,"tag":212,"props":3291,"children":3292},{"emptyLinePlaceholder":294},[3293],{"type":26,"value":297},{"type":21,"tag":212,"props":3295,"children":3296},{"class":214,"line":510},[3297,3302,3306],{"type":21,"tag":212,"props":3298,"children":3299},{"style":263},[3300],{"type":26,"value":3301},"      @decoder ",{"type":21,"tag":212,"props":3303,"children":3304},{"style":219},[3305],{"type":26,"value":545},{"type":21,"tag":212,"props":3307,"children":3308},{"style":263},[3309],{"type":26,"value":3310}," options.decoder\n",{"type":21,"tag":212,"props":3312,"children":3313},{"class":214,"line":518},[3314,3319,3324,3329],{"type":21,"tag":212,"props":3315,"children":3316},{"style":566},[3317],{"type":26,"value":3318},"      setInterval",{"type":21,"tag":212,"props":3320,"children":3321},{"style":263},[3322],{"type":26,"value":3323},"(@moveDataOneStep, ",{"type":21,"tag":212,"props":3325,"children":3326},{"style":566},[3327],{"type":26,"value":3328},"100",{"type":21,"tag":212,"props":3330,"children":3331},{"style":263},[3332],{"type":26,"value":354},{"type":21,"tag":212,"props":3334,"children":3335},{"class":214,"line":534},[3336],{"type":21,"tag":212,"props":3337,"children":3338},{"emptyLinePlaceholder":294},[3339],{"type":26,"value":297},{"type":21,"tag":212,"props":3341,"children":3342},{"class":214,"line":553},[3343,3348,3352,3356],{"type":21,"tag":212,"props":3344,"children":3345},{"style":225},[3346],{"type":26,"value":3347},"   addToken",{"type":21,"tag":212,"props":3349,"children":3350},{"style":219},[3351],{"type":26,"value":252},{"type":21,"tag":212,"props":3353,"children":3354},{"style":263},[3355],{"type":26,"value":315},{"type":21,"tag":212,"props":3357,"children":3358},{"style":219},[3359],{"type":26,"value":320},{"type":21,"tag":212,"props":3361,"children":3362},{"class":214,"line":572},[3363,3368,3372],{"type":21,"tag":212,"props":3364,"children":3365},{"style":263},[3366],{"type":26,"value":3367},"      @inputQueue.",{"type":21,"tag":212,"props":3369,"children":3370},{"style":566},[3371],{"type":26,"value":812},{"type":21,"tag":212,"props":3373,"children":3374},{"style":263},[3375],{"type":26,"value":817},{"type":21,"tag":212,"props":3377,"children":3378},{"class":214,"line":591},[3379],{"type":21,"tag":212,"props":3380,"children":3381},{"emptyLinePlaceholder":294},[3382],{"type":26,"value":297},{"type":21,"tag":212,"props":3384,"children":3385},{"class":214,"line":599},[3386,3391,3395],{"type":21,"tag":212,"props":3387,"children":3388},{"style":225},[3389],{"type":26,"value":3390},"   moveDataOneStep",{"type":21,"tag":212,"props":3392,"children":3393},{"style":219},[3394],{"type":26,"value":252},{"type":21,"tag":212,"props":3396,"children":3397},{"style":219},[3398],{"type":26,"value":476},{"type":21,"tag":212,"props":3400,"children":3401},{"class":214,"line":620},[3402,3407,3411,3416,3421],{"type":21,"tag":212,"props":3403,"children":3404},{"style":263},[3405],{"type":26,"value":3406},"      @decoder.",{"type":21,"tag":212,"props":3408,"children":3409},{"style":225},[3410],{"type":26,"value":1011},{"type":21,"tag":212,"props":3412,"children":3413},{"style":263},[3414],{"type":26,"value":3415},"(@communicationLine.",{"type":21,"tag":212,"props":3417,"children":3418},{"style":566},[3419],{"type":26,"value":3420},"pop",{"type":21,"tag":212,"props":3422,"children":3423},{"style":263},[3424],{"type":26,"value":3425},"())\n",{"type":21,"tag":212,"props":3427,"children":3428},{"class":214,"line":644},[3429,3434,3438,3443,3448],{"type":21,"tag":212,"props":3430,"children":3431},{"style":327},[3432],{"type":26,"value":3433},"      nextToken",{"type":21,"tag":212,"props":3435,"children":3436},{"style":219},[3437],{"type":26,"value":335},{"type":21,"tag":212,"props":3439,"children":3440},{"style":263},[3441],{"type":26,"value":3442}," @inputQueue.",{"type":21,"tag":212,"props":3444,"children":3445},{"style":566},[3446],{"type":26,"value":3447},"shift",{"type":21,"tag":212,"props":3449,"children":3450},{"style":263},[3451],{"type":26,"value":588},{"type":21,"tag":212,"props":3453,"children":3454},{"class":214,"line":672},[3455],{"type":21,"tag":212,"props":3456,"children":3457},{"emptyLinePlaceholder":294},[3458],{"type":26,"value":297},{"type":21,"tag":212,"props":3460,"children":3461},{"class":214,"line":696},[3462,3467,3472],{"type":21,"tag":212,"props":3463,"children":3464},{"style":263},[3465],{"type":26,"value":3466},"      @communicationLine.",{"type":21,"tag":212,"props":3468,"children":3469},{"style":566},[3470],{"type":26,"value":3471},"unshift",{"type":21,"tag":212,"props":3473,"children":3474},{"style":263},[3475],{"type":26,"value":1155},{"type":21,"tag":212,"props":3477,"children":3478},{"class":214,"line":723},[3479,3484,3489,3494,3499,3504,3509,3514],{"type":21,"tag":212,"props":3480,"children":3481},{"style":219},[3482],{"type":26,"value":3483},"       if",{"type":21,"tag":212,"props":3485,"children":3486},{"style":566},[3487],{"type":26,"value":3488}," undefined",{"type":21,"tag":212,"props":3490,"children":3491},{"style":219},[3492],{"type":26,"value":3493}," ==",{"type":21,"tag":212,"props":3495,"children":3496},{"style":263},[3497],{"type":26,"value":3498}," nextToken ",{"type":21,"tag":212,"props":3500,"children":3501},{"style":219},[3502],{"type":26,"value":3503},"then",{"type":21,"tag":212,"props":3505,"children":3506},{"style":279},[3507],{"type":26,"value":3508}," ''",{"type":21,"tag":212,"props":3510,"children":3511},{"style":219},[3512],{"type":26,"value":3513}," else",{"type":21,"tag":212,"props":3515,"children":3516},{"style":263},[3517],{"type":26,"value":3518}," nextToken)\n",{"type":21,"tag":212,"props":3520,"children":3521},{"class":214,"line":757},[3522],{"type":21,"tag":212,"props":3523,"children":3524},{"emptyLinePlaceholder":294},[3525],{"type":26,"value":297},{"type":21,"tag":212,"props":3527,"children":3528},{"class":214,"line":792},[3529,3533,3537,3541,3545],{"type":21,"tag":212,"props":3530,"children":3531},{"style":263},[3532],{"type":26,"value":578},{"type":21,"tag":212,"props":3534,"children":3535},{"style":225},[3536],{"type":26,"value":767},{"type":21,"tag":212,"props":3538,"children":3539},{"style":263},[3540],{"type":26,"value":276},{"type":21,"tag":212,"props":3542,"children":3543},{"style":279},[3544],{"type":26,"value":1093},{"type":21,"tag":212,"props":3546,"children":3547},{"style":263},[3548],{"type":26,"value":3549},", @communicationLine)\n",{"type":21,"tag":22,"props":3551,"children":3552},{},[3553],{"type":26,"value":3554},"The CommunicationLine class is a Backbone model class that represents the tokens currently moving across the telegraph line. It also contains a queue that holds the input tokens generated by the user. The class also holds a reference to the object responsible for decoding the user input (more on that tomorrow).",{"type":21,"tag":22,"props":3556,"children":3557},{},[3558],{"type":26,"value":3559},"Every 100 milliseconds, the communication line shifts its tokens over one spot. The token popped off the line is passed to the decoder. The model then checks the input queue to determine if a user-generated token is available to be pushed onto the line. If not, the model pushes a default token (an empty string). The model then triggers an event to indicate the communication line state has changed and that the object representing the communication line view needs to be re-rendered (more on that tomorrow).",{"type":21,"tag":1772,"props":3561,"children":3562},{},[3563],{"type":26,"value":1776},{"title":8,"searchDepth":140,"depth":140,"links":3565},[],"content:rbrubaker:2012-06:coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1",{"user":149,"name":150},1780330277659]