[{"data":1,"prerenderedAt":5504},["ShallowReactive",2],{"article_list_coffeescript_":3},[4,2022,2151,3723],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"publishDate":11,"tags":12,"excerpt":10,"body":15,"_type":2013,"_id":2014,"_source":2015,"_file":2016,"_stem":2017,"_extension":2018,"author":2019},"/rbrubaker/2012-07/prototypal-js","2012-07",false,"","Prototypal vs. Functional Inheritance in JavaScript","If you ever found JavaScript's prototypal inheritance confusing, do yourself a favor and open this article, open a JavaScript console and code each example in the article. You will definitely come away with a better understanding of how prototypal inheritance works in JavaScript.","2012-07-11",[13,14],"coffeescript","js",{"type":16,"children":17,"toc":2007},"root",[18,37,51,58,72,314,319,325,342,637,642,1173,1187,1193,1205,1958,1963,1969,1983,1988,2001],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23,26,35],{"type":24,"value":25},"text","If you ever found JavaScript's prototypal inheritance confusing, do yourself a favor and open this ",{"type":19,"tag":27,"props":28,"children":32},"a",{"href":29,"rel":30},"http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/",[31],"nofollow",[33],{"type":24,"value":34},"article",{"type":24,"value":36},", open a JavaScript console and code each example in the article. You will definitely come away with a better understanding of how prototypal inheritance works in JavaScript.",{"type":19,"tag":20,"props":38,"children":39},{},[40,42,49],{"type":24,"value":41},"After reading the article, I thought a good exercise would be to compare CoffeeScript class definitions vs. the prototypal inheritance style those definitions generate vs. Douglas Crockford's functional inheritance style outlined in his book ",{"type":19,"tag":27,"props":43,"children":46},{"href":44,"rel":45},"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1341945198&sr=8-1",[31],[47],{"type":24,"value":48},"JavaScript: The Good Parts",{"type":24,"value":50},".",{"type":19,"tag":52,"props":53,"children":55},"h3",{"id":54},"coffeescript-class-definitions",[56],{"type":24,"value":57},"CoffeeScript Class Definitions",{"type":19,"tag":20,"props":59,"children":60},{},[61,63,70],{"type":24,"value":62},"The ",{"type":19,"tag":27,"props":64,"children":67},{"href":65,"rel":66},"http://coffeescript.org/",[31],[68],{"type":24,"value":69},"CoffeeScript homepage",{"type":24,"value":71}," gives the following example to demonstrate CoffeeScript's class syntax:",{"type":19,"tag":73,"props":74,"children":78},"pre",{"className":75,"code":76,"language":77,"meta":8,"style":8},"language-coffee shiki shiki-themes github-light github-dark","class Animal\n  constructor: (@name) ->\n\n  move: (meters) ->\n    alert @name + \" moved #{meters}m.\"\n\nclass Snake extends Animal\n  move: ->\n    alert \"Slithering...\"\n    super 5\n\nsam = new Snake \"Sammy the Python\"\nsam.move()\n","coffee",[79],{"type":19,"tag":80,"props":81,"children":82},"code",{"__ignoreMap":8},[83,101,126,136,158,183,191,213,230,243,258,266,295],{"type":19,"tag":84,"props":85,"children":88},"span",{"class":86,"line":87},"line",1,[89,95],{"type":19,"tag":84,"props":90,"children":92},{"style":91},"--shiki-default:#D73A49;--shiki-dark:#F97583",[93],{"type":24,"value":94},"class",{"type":19,"tag":84,"props":96,"children":98},{"style":97},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[99],{"type":24,"value":100}," Animal\n",{"type":19,"tag":84,"props":102,"children":104},{"class":86,"line":103},2,[105,110,115,121],{"type":19,"tag":84,"props":106,"children":107},{"style":97},[108],{"type":24,"value":109},"  constructor",{"type":19,"tag":84,"props":111,"children":112},{"style":91},[113],{"type":24,"value":114},":",{"type":19,"tag":84,"props":116,"children":118},{"style":117},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[119],{"type":24,"value":120}," (@name) ",{"type":19,"tag":84,"props":122,"children":123},{"style":91},[124],{"type":24,"value":125},"->\n",{"type":19,"tag":84,"props":127,"children":129},{"class":86,"line":128},3,[130],{"type":19,"tag":84,"props":131,"children":133},{"emptyLinePlaceholder":132},true,[134],{"type":24,"value":135},"\n",{"type":19,"tag":84,"props":137,"children":139},{"class":86,"line":138},4,[140,145,149,154],{"type":19,"tag":84,"props":141,"children":142},{"style":97},[143],{"type":24,"value":144},"  move",{"type":19,"tag":84,"props":146,"children":147},{"style":91},[148],{"type":24,"value":114},{"type":19,"tag":84,"props":150,"children":151},{"style":117},[152],{"type":24,"value":153}," (meters) ",{"type":19,"tag":84,"props":155,"children":156},{"style":91},[157],{"type":24,"value":125},{"type":19,"tag":84,"props":159,"children":161},{"class":86,"line":160},5,[162,167,172,177],{"type":19,"tag":84,"props":163,"children":164},{"style":97},[165],{"type":24,"value":166},"    alert",{"type":19,"tag":84,"props":168,"children":169},{"style":117},[170],{"type":24,"value":171}," @name ",{"type":19,"tag":84,"props":173,"children":174},{"style":91},[175],{"type":24,"value":176},"+",{"type":19,"tag":84,"props":178,"children":180},{"style":179},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[181],{"type":24,"value":182}," \" moved #{meters}m.\"\n",{"type":19,"tag":84,"props":184,"children":186},{"class":86,"line":185},6,[187],{"type":19,"tag":84,"props":188,"children":189},{"emptyLinePlaceholder":132},[190],{"type":24,"value":135},{"type":19,"tag":84,"props":192,"children":194},{"class":86,"line":193},7,[195,199,204,209],{"type":19,"tag":84,"props":196,"children":197},{"style":91},[198],{"type":24,"value":94},{"type":19,"tag":84,"props":200,"children":201},{"style":97},[202],{"type":24,"value":203}," Snake",{"type":19,"tag":84,"props":205,"children":206},{"style":91},[207],{"type":24,"value":208}," extends",{"type":19,"tag":84,"props":210,"children":211},{"style":97},[212],{"type":24,"value":100},{"type":19,"tag":84,"props":214,"children":216},{"class":86,"line":215},8,[217,221,225],{"type":19,"tag":84,"props":218,"children":219},{"style":97},[220],{"type":24,"value":144},{"type":19,"tag":84,"props":222,"children":223},{"style":91},[224],{"type":24,"value":114},{"type":19,"tag":84,"props":226,"children":227},{"style":91},[228],{"type":24,"value":229}," ->\n",{"type":19,"tag":84,"props":231,"children":233},{"class":86,"line":232},9,[234,238],{"type":19,"tag":84,"props":235,"children":236},{"style":97},[237],{"type":24,"value":166},{"type":19,"tag":84,"props":239,"children":240},{"style":179},[241],{"type":24,"value":242}," \"Slithering...\"\n",{"type":19,"tag":84,"props":244,"children":246},{"class":86,"line":245},10,[247,253],{"type":19,"tag":84,"props":248,"children":250},{"style":249},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[251],{"type":24,"value":252},"    super",{"type":19,"tag":84,"props":254,"children":255},{"style":249},[256],{"type":24,"value":257}," 5\n",{"type":19,"tag":84,"props":259,"children":261},{"class":86,"line":260},11,[262],{"type":19,"tag":84,"props":263,"children":264},{"emptyLinePlaceholder":132},[265],{"type":24,"value":135},{"type":19,"tag":84,"props":267,"children":269},{"class":86,"line":268},12,[270,276,281,286,290],{"type":19,"tag":84,"props":271,"children":273},{"style":272},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[274],{"type":24,"value":275},"sam",{"type":19,"tag":84,"props":277,"children":278},{"style":91},[279],{"type":24,"value":280}," =",{"type":19,"tag":84,"props":282,"children":283},{"style":91},[284],{"type":24,"value":285}," new",{"type":19,"tag":84,"props":287,"children":288},{"style":97},[289],{"type":24,"value":203},{"type":19,"tag":84,"props":291,"children":292},{"style":179},[293],{"type":24,"value":294}," \"Sammy the Python\"\n",{"type":19,"tag":84,"props":296,"children":298},{"class":86,"line":297},13,[299,304,309],{"type":19,"tag":84,"props":300,"children":301},{"style":117},[302],{"type":24,"value":303},"sam.",{"type":19,"tag":84,"props":305,"children":306},{"style":249},[307],{"type":24,"value":308},"move",{"type":19,"tag":84,"props":310,"children":311},{"style":117},[312],{"type":24,"value":313},"()\n",{"type":19,"tag":20,"props":315,"children":316},{},[317],{"type":24,"value":318},"Anyone experienced with class-based inheritance should have little trouble understanding this code.",{"type":19,"tag":52,"props":320,"children":322},{"id":321},"prototypal-inheritance",[323],{"type":24,"value":324},"Prototypal Inheritance",{"type":19,"tag":20,"props":326,"children":327},{},[328,330,340],{"type":24,"value":329},"The JavaScript generated by the CoffeeScript compiler uses prototypal inheritance. The compiler first generates a utility function that sets the properties on the child constructor and then sets up the prototype chain. It also creates a convenient ",{"type":19,"tag":331,"props":332,"children":333},"em",{},[334],{"type":19,"tag":335,"props":336,"children":337},"strong",{},[338],{"type":24,"value":339},"super",{"type":24,"value":341}," property that allows an object to call methods on its prototype.",{"type":19,"tag":73,"props":343,"children":345},{"className":75,"code":344,"language":77,"meta":8,"style":8},"__hasProp = {}.hasOwnProperty,\n__extends = function(child, parent) \n{ \n   for (var key in parent) \n   { \n      if (__hasProp.call(parent, key)) \n         child[key] = parent[key]; \n   } \n\n   function ctor() \n   { \n      this.constructor = child; \n   } \n   ctor.prototype = parent.prototype; \n   child.prototype = new ctor(); \n   child.__super__ = parent.prototype; \n   return child; \n };\n",[346],{"type":19,"tag":80,"props":347,"children":348},{"__ignoreMap":8},[349,366,388,396,429,437,467,485,493,500,518,525,547,554,572,598,615,628],{"type":19,"tag":84,"props":350,"children":351},{"class":86,"line":87},[352,357,361],{"type":19,"tag":84,"props":353,"children":354},{"style":91},[355],{"type":24,"value":356},"__hasProp",{"type":19,"tag":84,"props":358,"children":359},{"style":91},[360],{"type":24,"value":280},{"type":19,"tag":84,"props":362,"children":363},{"style":117},[364],{"type":24,"value":365}," {}.hasOwnProperty,\n",{"type":19,"tag":84,"props":367,"children":368},{"class":86,"line":103},[369,374,378,383],{"type":19,"tag":84,"props":370,"children":371},{"style":91},[372],{"type":24,"value":373},"__extends",{"type":19,"tag":84,"props":375,"children":376},{"style":91},[377],{"type":24,"value":280},{"type":19,"tag":84,"props":379,"children":380},{"style":91},[381],{"type":24,"value":382}," function",{"type":19,"tag":84,"props":384,"children":385},{"style":117},[386],{"type":24,"value":387},"(child, parent) \n",{"type":19,"tag":84,"props":389,"children":390},{"class":86,"line":128},[391],{"type":19,"tag":84,"props":392,"children":393},{"style":117},[394],{"type":24,"value":395},"{ \n",{"type":19,"tag":84,"props":397,"children":398},{"class":86,"line":138},[399,404,409,414,419,424],{"type":19,"tag":84,"props":400,"children":401},{"style":91},[402],{"type":24,"value":403},"   for",{"type":19,"tag":84,"props":405,"children":406},{"style":117},[407],{"type":24,"value":408}," (",{"type":19,"tag":84,"props":410,"children":411},{"style":91},[412],{"type":24,"value":413},"var",{"type":19,"tag":84,"props":415,"children":416},{"style":117},[417],{"type":24,"value":418}," key ",{"type":19,"tag":84,"props":420,"children":421},{"style":91},[422],{"type":24,"value":423},"in",{"type":19,"tag":84,"props":425,"children":426},{"style":117},[427],{"type":24,"value":428}," parent) \n",{"type":19,"tag":84,"props":430,"children":431},{"class":86,"line":160},[432],{"type":19,"tag":84,"props":433,"children":434},{"style":117},[435],{"type":24,"value":436},"   { \n",{"type":19,"tag":84,"props":438,"children":439},{"class":86,"line":185},[440,445,449,453,457,462],{"type":19,"tag":84,"props":441,"children":442},{"style":91},[443],{"type":24,"value":444},"      if",{"type":19,"tag":84,"props":446,"children":447},{"style":117},[448],{"type":24,"value":408},{"type":19,"tag":84,"props":450,"children":451},{"style":91},[452],{"type":24,"value":356},{"type":19,"tag":84,"props":454,"children":455},{"style":117},[456],{"type":24,"value":50},{"type":19,"tag":84,"props":458,"children":459},{"style":249},[460],{"type":24,"value":461},"call",{"type":19,"tag":84,"props":463,"children":464},{"style":117},[465],{"type":24,"value":466},"(parent, key)) \n",{"type":19,"tag":84,"props":468,"children":469},{"class":86,"line":193},[470,475,480],{"type":19,"tag":84,"props":471,"children":472},{"style":117},[473],{"type":24,"value":474},"         child[key] ",{"type":19,"tag":84,"props":476,"children":477},{"style":91},[478],{"type":24,"value":479},"=",{"type":19,"tag":84,"props":481,"children":482},{"style":117},[483],{"type":24,"value":484}," parent[key]; \n",{"type":19,"tag":84,"props":486,"children":487},{"class":86,"line":215},[488],{"type":19,"tag":84,"props":489,"children":490},{"style":117},[491],{"type":24,"value":492},"   } \n",{"type":19,"tag":84,"props":494,"children":495},{"class":86,"line":232},[496],{"type":19,"tag":84,"props":497,"children":498},{"emptyLinePlaceholder":132},[499],{"type":24,"value":135},{"type":19,"tag":84,"props":501,"children":502},{"class":86,"line":245},[503,508,513],{"type":19,"tag":84,"props":504,"children":505},{"style":91},[506],{"type":24,"value":507},"   function",{"type":19,"tag":84,"props":509,"children":510},{"style":97},[511],{"type":24,"value":512}," ctor",{"type":19,"tag":84,"props":514,"children":515},{"style":117},[516],{"type":24,"value":517},"() \n",{"type":19,"tag":84,"props":519,"children":520},{"class":86,"line":260},[521],{"type":19,"tag":84,"props":522,"children":523},{"style":117},[524],{"type":24,"value":436},{"type":19,"tag":84,"props":526,"children":527},{"class":86,"line":268},[528,533,538,542],{"type":19,"tag":84,"props":529,"children":530},{"style":249},[531],{"type":24,"value":532},"      this",{"type":19,"tag":84,"props":534,"children":535},{"style":117},[536],{"type":24,"value":537},".constructor ",{"type":19,"tag":84,"props":539,"children":540},{"style":91},[541],{"type":24,"value":479},{"type":19,"tag":84,"props":543,"children":544},{"style":117},[545],{"type":24,"value":546}," child; \n",{"type":19,"tag":84,"props":548,"children":549},{"class":86,"line":297},[550],{"type":19,"tag":84,"props":551,"children":552},{"style":117},[553],{"type":24,"value":492},{"type":19,"tag":84,"props":555,"children":557},{"class":86,"line":556},14,[558,563,567],{"type":19,"tag":84,"props":559,"children":560},{"style":117},[561],{"type":24,"value":562},"   ctor.prototype ",{"type":19,"tag":84,"props":564,"children":565},{"style":91},[566],{"type":24,"value":479},{"type":19,"tag":84,"props":568,"children":569},{"style":117},[570],{"type":24,"value":571}," parent.prototype; \n",{"type":19,"tag":84,"props":573,"children":575},{"class":86,"line":574},15,[576,581,585,589,593],{"type":19,"tag":84,"props":577,"children":578},{"style":117},[579],{"type":24,"value":580},"   child.prototype ",{"type":19,"tag":84,"props":582,"children":583},{"style":91},[584],{"type":24,"value":479},{"type":19,"tag":84,"props":586,"children":587},{"style":91},[588],{"type":24,"value":285},{"type":19,"tag":84,"props":590,"children":591},{"style":97},[592],{"type":24,"value":512},{"type":19,"tag":84,"props":594,"children":595},{"style":117},[596],{"type":24,"value":597},"(); \n",{"type":19,"tag":84,"props":599,"children":601},{"class":86,"line":600},16,[602,607,611],{"type":19,"tag":84,"props":603,"children":604},{"style":117},[605],{"type":24,"value":606},"   child.__super__ ",{"type":19,"tag":84,"props":608,"children":609},{"style":91},[610],{"type":24,"value":479},{"type":19,"tag":84,"props":612,"children":613},{"style":117},[614],{"type":24,"value":571},{"type":19,"tag":84,"props":616,"children":618},{"class":86,"line":617},17,[619,624],{"type":19,"tag":84,"props":620,"children":621},{"style":91},[622],{"type":24,"value":623},"   return",{"type":19,"tag":84,"props":625,"children":626},{"style":117},[627],{"type":24,"value":546},{"type":19,"tag":84,"props":629,"children":631},{"class":86,"line":630},18,[632],{"type":19,"tag":84,"props":633,"children":634},{"style":117},[635],{"type":24,"value":636}," };\n",{"type":19,"tag":20,"props":638,"children":639},{},[640],{"type":24,"value":641},"The constructor functions are then generated as follows:",{"type":19,"tag":73,"props":643,"children":645},{"className":75,"code":644,"language":77,"meta":8,"style":8},"Animal = (function() \n{\n   function Animal(name) \n   {\n     this.name = name;\n   }\n\n   Animal.prototype.move = function(meters) \n   {\n      return alert(this.name + (\" moved \" + meters + \"m.\"));\n   };\n   return Animal;\n})();\n\nSnake = (function(_super) \n{\n   __extends(Snake, _super);\n   function Snake() \n   {\n      return Snake.__super__.constructor.apply(this, arguments);\n   }\n\n   Snake.prototype.move = function() \n   {\n      alert(\"Slithering...\");\n      return Snake.__super__.move.call(this, 5);\n   };\n   return Snake;\n})(Animal);\n\nsam = new Snake(\"Sammy the Python\");\nsam.move();\n",[646],{"type":19,"tag":80,"props":647,"children":648},{"__ignoreMap":8},[649,674,682,699,707,729,737,744,765,772,836,844,856,864,871,896,903,916,931,939,980,988,996,1017,1025,1047,1085,1093,1106,1115,1123,1156],{"type":19,"tag":84,"props":650,"children":651},{"class":86,"line":87},[652,657,661,665,670],{"type":19,"tag":84,"props":653,"children":654},{"style":272},[655],{"type":24,"value":656},"Animal",{"type":19,"tag":84,"props":658,"children":659},{"style":91},[660],{"type":24,"value":280},{"type":19,"tag":84,"props":662,"children":663},{"style":117},[664],{"type":24,"value":408},{"type":19,"tag":84,"props":666,"children":667},{"style":91},[668],{"type":24,"value":669},"function",{"type":19,"tag":84,"props":671,"children":672},{"style":117},[673],{"type":24,"value":517},{"type":19,"tag":84,"props":675,"children":676},{"class":86,"line":103},[677],{"type":19,"tag":84,"props":678,"children":679},{"style":117},[680],{"type":24,"value":681},"{\n",{"type":19,"tag":84,"props":683,"children":684},{"class":86,"line":128},[685,689,694],{"type":19,"tag":84,"props":686,"children":687},{"style":91},[688],{"type":24,"value":507},{"type":19,"tag":84,"props":690,"children":691},{"style":97},[692],{"type":24,"value":693}," Animal",{"type":19,"tag":84,"props":695,"children":696},{"style":117},[697],{"type":24,"value":698},"(name) \n",{"type":19,"tag":84,"props":700,"children":701},{"class":86,"line":138},[702],{"type":19,"tag":84,"props":703,"children":704},{"style":117},[705],{"type":24,"value":706},"   {\n",{"type":19,"tag":84,"props":708,"children":709},{"class":86,"line":160},[710,715,720,724],{"type":19,"tag":84,"props":711,"children":712},{"style":249},[713],{"type":24,"value":714},"     this",{"type":19,"tag":84,"props":716,"children":717},{"style":117},[718],{"type":24,"value":719},".name ",{"type":19,"tag":84,"props":721,"children":722},{"style":91},[723],{"type":24,"value":479},{"type":19,"tag":84,"props":725,"children":726},{"style":117},[727],{"type":24,"value":728}," name;\n",{"type":19,"tag":84,"props":730,"children":731},{"class":86,"line":185},[732],{"type":19,"tag":84,"props":733,"children":734},{"style":117},[735],{"type":24,"value":736},"   }\n",{"type":19,"tag":84,"props":738,"children":739},{"class":86,"line":193},[740],{"type":19,"tag":84,"props":741,"children":742},{"emptyLinePlaceholder":132},[743],{"type":24,"value":135},{"type":19,"tag":84,"props":745,"children":746},{"class":86,"line":215},[747,752,756,760],{"type":19,"tag":84,"props":748,"children":749},{"style":117},[750],{"type":24,"value":751},"   Animal.prototype.move ",{"type":19,"tag":84,"props":753,"children":754},{"style":91},[755],{"type":24,"value":479},{"type":19,"tag":84,"props":757,"children":758},{"style":91},[759],{"type":24,"value":382},{"type":19,"tag":84,"props":761,"children":762},{"style":117},[763],{"type":24,"value":764},"(meters) \n",{"type":19,"tag":84,"props":766,"children":767},{"class":86,"line":232},[768],{"type":19,"tag":84,"props":769,"children":770},{"style":117},[771],{"type":24,"value":706},{"type":19,"tag":84,"props":773,"children":774},{"class":86,"line":245},[775,780,785,790,795,799,803,807,812,817,822,826,831],{"type":19,"tag":84,"props":776,"children":777},{"style":91},[778],{"type":24,"value":779},"      return",{"type":19,"tag":84,"props":781,"children":782},{"style":97},[783],{"type":24,"value":784}," alert",{"type":19,"tag":84,"props":786,"children":787},{"style":117},[788],{"type":24,"value":789},"(",{"type":19,"tag":84,"props":791,"children":792},{"style":249},[793],{"type":24,"value":794},"this",{"type":19,"tag":84,"props":796,"children":797},{"style":117},[798],{"type":24,"value":719},{"type":19,"tag":84,"props":800,"children":801},{"style":91},[802],{"type":24,"value":176},{"type":19,"tag":84,"props":804,"children":805},{"style":117},[806],{"type":24,"value":408},{"type":19,"tag":84,"props":808,"children":809},{"style":179},[810],{"type":24,"value":811},"\" moved \"",{"type":19,"tag":84,"props":813,"children":814},{"style":91},[815],{"type":24,"value":816}," +",{"type":19,"tag":84,"props":818,"children":819},{"style":117},[820],{"type":24,"value":821}," meters ",{"type":19,"tag":84,"props":823,"children":824},{"style":91},[825],{"type":24,"value":176},{"type":19,"tag":84,"props":827,"children":828},{"style":179},[829],{"type":24,"value":830}," \"m.\"",{"type":19,"tag":84,"props":832,"children":833},{"style":117},[834],{"type":24,"value":835},"));\n",{"type":19,"tag":84,"props":837,"children":838},{"class":86,"line":260},[839],{"type":19,"tag":84,"props":840,"children":841},{"style":117},[842],{"type":24,"value":843},"   };\n",{"type":19,"tag":84,"props":845,"children":846},{"class":86,"line":268},[847,851],{"type":19,"tag":84,"props":848,"children":849},{"style":91},[850],{"type":24,"value":623},{"type":19,"tag":84,"props":852,"children":853},{"style":117},[854],{"type":24,"value":855}," Animal;\n",{"type":19,"tag":84,"props":857,"children":858},{"class":86,"line":297},[859],{"type":19,"tag":84,"props":860,"children":861},{"style":117},[862],{"type":24,"value":863},"})();\n",{"type":19,"tag":84,"props":865,"children":866},{"class":86,"line":556},[867],{"type":19,"tag":84,"props":868,"children":869},{"emptyLinePlaceholder":132},[870],{"type":24,"value":135},{"type":19,"tag":84,"props":872,"children":873},{"class":86,"line":574},[874,879,883,887,891],{"type":19,"tag":84,"props":875,"children":876},{"style":272},[877],{"type":24,"value":878},"Snake",{"type":19,"tag":84,"props":880,"children":881},{"style":91},[882],{"type":24,"value":280},{"type":19,"tag":84,"props":884,"children":885},{"style":117},[886],{"type":24,"value":408},{"type":19,"tag":84,"props":888,"children":889},{"style":91},[890],{"type":24,"value":669},{"type":19,"tag":84,"props":892,"children":893},{"style":117},[894],{"type":24,"value":895},"(_super) \n",{"type":19,"tag":84,"props":897,"children":898},{"class":86,"line":600},[899],{"type":19,"tag":84,"props":900,"children":901},{"style":117},[902],{"type":24,"value":681},{"type":19,"tag":84,"props":904,"children":905},{"class":86,"line":617},[906,911],{"type":19,"tag":84,"props":907,"children":908},{"style":91},[909],{"type":24,"value":910},"   __extends",{"type":19,"tag":84,"props":912,"children":913},{"style":117},[914],{"type":24,"value":915},"(Snake, _super);\n",{"type":19,"tag":84,"props":917,"children":918},{"class":86,"line":630},[919,923,927],{"type":19,"tag":84,"props":920,"children":921},{"style":91},[922],{"type":24,"value":507},{"type":19,"tag":84,"props":924,"children":925},{"style":97},[926],{"type":24,"value":203},{"type":19,"tag":84,"props":928,"children":929},{"style":117},[930],{"type":24,"value":517},{"type":19,"tag":84,"props":932,"children":934},{"class":86,"line":933},19,[935],{"type":19,"tag":84,"props":936,"children":937},{"style":117},[938],{"type":24,"value":706},{"type":19,"tag":84,"props":940,"children":942},{"class":86,"line":941},20,[943,947,952,957,961,965,970,975],{"type":19,"tag":84,"props":944,"children":945},{"style":91},[946],{"type":24,"value":779},{"type":19,"tag":84,"props":948,"children":949},{"style":117},[950],{"type":24,"value":951}," Snake.__super__.constructor.",{"type":19,"tag":84,"props":953,"children":954},{"style":249},[955],{"type":24,"value":956},"apply",{"type":19,"tag":84,"props":958,"children":959},{"style":117},[960],{"type":24,"value":789},{"type":19,"tag":84,"props":962,"children":963},{"style":249},[964],{"type":24,"value":794},{"type":19,"tag":84,"props":966,"children":967},{"style":117},[968],{"type":24,"value":969},", ",{"type":19,"tag":84,"props":971,"children":972},{"style":249},[973],{"type":24,"value":974},"arguments",{"type":19,"tag":84,"props":976,"children":977},{"style":117},[978],{"type":24,"value":979},");\n",{"type":19,"tag":84,"props":981,"children":983},{"class":86,"line":982},21,[984],{"type":19,"tag":84,"props":985,"children":986},{"style":117},[987],{"type":24,"value":736},{"type":19,"tag":84,"props":989,"children":991},{"class":86,"line":990},22,[992],{"type":19,"tag":84,"props":993,"children":994},{"emptyLinePlaceholder":132},[995],{"type":24,"value":135},{"type":19,"tag":84,"props":997,"children":999},{"class":86,"line":998},23,[1000,1005,1009,1013],{"type":19,"tag":84,"props":1001,"children":1002},{"style":117},[1003],{"type":24,"value":1004},"   Snake.prototype.move ",{"type":19,"tag":84,"props":1006,"children":1007},{"style":91},[1008],{"type":24,"value":479},{"type":19,"tag":84,"props":1010,"children":1011},{"style":91},[1012],{"type":24,"value":382},{"type":19,"tag":84,"props":1014,"children":1015},{"style":117},[1016],{"type":24,"value":517},{"type":19,"tag":84,"props":1018,"children":1020},{"class":86,"line":1019},24,[1021],{"type":19,"tag":84,"props":1022,"children":1023},{"style":117},[1024],{"type":24,"value":706},{"type":19,"tag":84,"props":1026,"children":1028},{"class":86,"line":1027},25,[1029,1034,1038,1043],{"type":19,"tag":84,"props":1030,"children":1031},{"style":97},[1032],{"type":24,"value":1033},"      alert",{"type":19,"tag":84,"props":1035,"children":1036},{"style":117},[1037],{"type":24,"value":789},{"type":19,"tag":84,"props":1039,"children":1040},{"style":179},[1041],{"type":24,"value":1042},"\"Slithering...\"",{"type":19,"tag":84,"props":1044,"children":1045},{"style":117},[1046],{"type":24,"value":979},{"type":19,"tag":84,"props":1048,"children":1050},{"class":86,"line":1049},26,[1051,1055,1060,1064,1068,1072,1076,1081],{"type":19,"tag":84,"props":1052,"children":1053},{"style":91},[1054],{"type":24,"value":779},{"type":19,"tag":84,"props":1056,"children":1057},{"style":117},[1058],{"type":24,"value":1059}," Snake.__super__.move.",{"type":19,"tag":84,"props":1061,"children":1062},{"style":249},[1063],{"type":24,"value":461},{"type":19,"tag":84,"props":1065,"children":1066},{"style":117},[1067],{"type":24,"value":789},{"type":19,"tag":84,"props":1069,"children":1070},{"style":249},[1071],{"type":24,"value":794},{"type":19,"tag":84,"props":1073,"children":1074},{"style":117},[1075],{"type":24,"value":969},{"type":19,"tag":84,"props":1077,"children":1078},{"style":249},[1079],{"type":24,"value":1080},"5",{"type":19,"tag":84,"props":1082,"children":1083},{"style":117},[1084],{"type":24,"value":979},{"type":19,"tag":84,"props":1086,"children":1088},{"class":86,"line":1087},27,[1089],{"type":19,"tag":84,"props":1090,"children":1091},{"style":117},[1092],{"type":24,"value":843},{"type":19,"tag":84,"props":1094,"children":1096},{"class":86,"line":1095},28,[1097,1101],{"type":19,"tag":84,"props":1098,"children":1099},{"style":91},[1100],{"type":24,"value":623},{"type":19,"tag":84,"props":1102,"children":1103},{"style":117},[1104],{"type":24,"value":1105}," Snake;\n",{"type":19,"tag":84,"props":1107,"children":1109},{"class":86,"line":1108},29,[1110],{"type":19,"tag":84,"props":1111,"children":1112},{"style":117},[1113],{"type":24,"value":1114},"})(Animal);\n",{"type":19,"tag":84,"props":1116,"children":1118},{"class":86,"line":1117},30,[1119],{"type":19,"tag":84,"props":1120,"children":1121},{"emptyLinePlaceholder":132},[1122],{"type":24,"value":135},{"type":19,"tag":84,"props":1124,"children":1126},{"class":86,"line":1125},31,[1127,1131,1135,1139,1143,1147,1152],{"type":19,"tag":84,"props":1128,"children":1129},{"style":272},[1130],{"type":24,"value":275},{"type":19,"tag":84,"props":1132,"children":1133},{"style":91},[1134],{"type":24,"value":280},{"type":19,"tag":84,"props":1136,"children":1137},{"style":91},[1138],{"type":24,"value":285},{"type":19,"tag":84,"props":1140,"children":1141},{"style":97},[1142],{"type":24,"value":203},{"type":19,"tag":84,"props":1144,"children":1145},{"style":117},[1146],{"type":24,"value":789},{"type":19,"tag":84,"props":1148,"children":1149},{"style":179},[1150],{"type":24,"value":1151},"\"Sammy the Python\"",{"type":19,"tag":84,"props":1153,"children":1154},{"style":117},[1155],{"type":24,"value":979},{"type":19,"tag":84,"props":1157,"children":1159},{"class":86,"line":1158},32,[1160,1164,1168],{"type":19,"tag":84,"props":1161,"children":1162},{"style":117},[1163],{"type":24,"value":303},{"type":19,"tag":84,"props":1165,"children":1166},{"style":249},[1167],{"type":24,"value":308},{"type":19,"tag":84,"props":1169,"children":1170},{"style":117},[1171],{"type":24,"value":1172},"();\n",{"type":19,"tag":20,"props":1174,"children":1175},{},[1176,1178,1185],{"type":24,"value":1177},"Notice how easily the Snake constructor can access its Animal prototype using the ",{"type":19,"tag":331,"props":1179,"children":1180},{},[1181],{"type":19,"tag":335,"props":1182,"children":1183},{},[1184],{"type":24,"value":339},{"type":24,"value":1186}," property.",{"type":19,"tag":52,"props":1188,"children":1190},{"id":1189},"functional-inheritance",[1191],{"type":24,"value":1192},"Functional Inheritance",{"type":19,"tag":20,"props":1194,"children":1195},{},[1196,1198,1203],{"type":24,"value":1197},"In ",{"type":19,"tag":27,"props":1199,"children":1201},{"href":44,"rel":1200},[31],[1202],{"type":24,"value":48},{"type":24,"value":1204},", Crockford advocates a functional inheritance style. Converting the original CoffeeScript code to this style results in the following:",{"type":19,"tag":73,"props":1206,"children":1208},{"className":75,"code":1207,"language":77,"meta":8,"style":8},"Function.prototype.method = function(name, func)\n{\n   if (!this.prototype[name])\n   {\n      this.prototype[name] = func;\n      return this;\n   }\n};\n\nObject.method('superior', function(name)\n{\n   var that = this;\n   var method = that[name];\n   return function()\n   {\n      return method.apply(that, arguments);\n   };\n});\n\nvar Animal = function(spec)\n{\n   var that = {};\n   that.name = spec.name;\n\n   that.move = function(meters)\n   {\n      alert(this.name + ' moved ' + meters + 'm.');\n   }\n   return that;\n}\n\nvar Snake = function(spec)\n{\n   var that = Animal(spec);\n   var super_move = that.superior('move');\n\n   that.move = function()\n   {\n      alert('Slithering...');\n      super_move(5);\n   }\n   return that;\n}\n\nsam = new Snake({name:'Sammy the Python'});\nsam.move()\n",[1209],{"type":19,"tag":80,"props":1210,"children":1211},{"__ignoreMap":8},[1212,1238,1245,1271,1278,1299,1316,1323,1331,1338,1377,1384,1409,1430,1445,1452,1481,1488,1496,1503,1527,1534,1554,1571,1578,1599,1606,1655,1662,1674,1682,1689,1712,1720,1745,1785,1793,1813,1821,1842,1863,1871,1883,1891,1899,1942],{"type":19,"tag":84,"props":1213,"children":1214},{"class":86,"line":87},[1215,1220,1225,1229,1233],{"type":19,"tag":84,"props":1216,"children":1217},{"style":249},[1218],{"type":24,"value":1219},"Function",{"type":19,"tag":84,"props":1221,"children":1222},{"style":117},[1223],{"type":24,"value":1224},".prototype.method ",{"type":19,"tag":84,"props":1226,"children":1227},{"style":91},[1228],{"type":24,"value":479},{"type":19,"tag":84,"props":1230,"children":1231},{"style":91},[1232],{"type":24,"value":382},{"type":19,"tag":84,"props":1234,"children":1235},{"style":117},[1236],{"type":24,"value":1237},"(name, func)\n",{"type":19,"tag":84,"props":1239,"children":1240},{"class":86,"line":103},[1241],{"type":19,"tag":84,"props":1242,"children":1243},{"style":117},[1244],{"type":24,"value":681},{"type":19,"tag":84,"props":1246,"children":1247},{"class":86,"line":128},[1248,1253,1257,1262,1266],{"type":19,"tag":84,"props":1249,"children":1250},{"style":91},[1251],{"type":24,"value":1252},"   if",{"type":19,"tag":84,"props":1254,"children":1255},{"style":117},[1256],{"type":24,"value":408},{"type":19,"tag":84,"props":1258,"children":1259},{"style":91},[1260],{"type":24,"value":1261},"!",{"type":19,"tag":84,"props":1263,"children":1264},{"style":249},[1265],{"type":24,"value":794},{"type":19,"tag":84,"props":1267,"children":1268},{"style":117},[1269],{"type":24,"value":1270},".prototype[name])\n",{"type":19,"tag":84,"props":1272,"children":1273},{"class":86,"line":138},[1274],{"type":19,"tag":84,"props":1275,"children":1276},{"style":117},[1277],{"type":24,"value":706},{"type":19,"tag":84,"props":1279,"children":1280},{"class":86,"line":160},[1281,1285,1290,1294],{"type":19,"tag":84,"props":1282,"children":1283},{"style":249},[1284],{"type":24,"value":532},{"type":19,"tag":84,"props":1286,"children":1287},{"style":117},[1288],{"type":24,"value":1289},".prototype[name] ",{"type":19,"tag":84,"props":1291,"children":1292},{"style":91},[1293],{"type":24,"value":479},{"type":19,"tag":84,"props":1295,"children":1296},{"style":117},[1297],{"type":24,"value":1298}," func;\n",{"type":19,"tag":84,"props":1300,"children":1301},{"class":86,"line":185},[1302,1306,1311],{"type":19,"tag":84,"props":1303,"children":1304},{"style":91},[1305],{"type":24,"value":779},{"type":19,"tag":84,"props":1307,"children":1308},{"style":249},[1309],{"type":24,"value":1310}," this",{"type":19,"tag":84,"props":1312,"children":1313},{"style":117},[1314],{"type":24,"value":1315},";\n",{"type":19,"tag":84,"props":1317,"children":1318},{"class":86,"line":193},[1319],{"type":19,"tag":84,"props":1320,"children":1321},{"style":117},[1322],{"type":24,"value":736},{"type":19,"tag":84,"props":1324,"children":1325},{"class":86,"line":215},[1326],{"type":19,"tag":84,"props":1327,"children":1328},{"style":117},[1329],{"type":24,"value":1330},"};\n",{"type":19,"tag":84,"props":1332,"children":1333},{"class":86,"line":232},[1334],{"type":19,"tag":84,"props":1335,"children":1336},{"emptyLinePlaceholder":132},[1337],{"type":24,"value":135},{"type":19,"tag":84,"props":1339,"children":1340},{"class":86,"line":245},[1341,1346,1350,1355,1359,1364,1368,1372],{"type":19,"tag":84,"props":1342,"children":1343},{"style":249},[1344],{"type":24,"value":1345},"Object",{"type":19,"tag":84,"props":1347,"children":1348},{"style":117},[1349],{"type":24,"value":50},{"type":19,"tag":84,"props":1351,"children":1352},{"style":97},[1353],{"type":24,"value":1354},"method",{"type":19,"tag":84,"props":1356,"children":1357},{"style":117},[1358],{"type":24,"value":789},{"type":19,"tag":84,"props":1360,"children":1361},{"style":179},[1362],{"type":24,"value":1363},"'superior'",{"type":19,"tag":84,"props":1365,"children":1366},{"style":117},[1367],{"type":24,"value":969},{"type":19,"tag":84,"props":1369,"children":1370},{"style":91},[1371],{"type":24,"value":669},{"type":19,"tag":84,"props":1373,"children":1374},{"style":117},[1375],{"type":24,"value":1376},"(name)\n",{"type":19,"tag":84,"props":1378,"children":1379},{"class":86,"line":260},[1380],{"type":19,"tag":84,"props":1381,"children":1382},{"style":117},[1383],{"type":24,"value":681},{"type":19,"tag":84,"props":1385,"children":1386},{"class":86,"line":268},[1387,1392,1397,1401,1405],{"type":19,"tag":84,"props":1388,"children":1389},{"style":91},[1390],{"type":24,"value":1391},"   var",{"type":19,"tag":84,"props":1393,"children":1394},{"style":272},[1395],{"type":24,"value":1396}," that",{"type":19,"tag":84,"props":1398,"children":1399},{"style":91},[1400],{"type":24,"value":280},{"type":19,"tag":84,"props":1402,"children":1403},{"style":249},[1404],{"type":24,"value":1310},{"type":19,"tag":84,"props":1406,"children":1407},{"style":117},[1408],{"type":24,"value":1315},{"type":19,"tag":84,"props":1410,"children":1411},{"class":86,"line":297},[1412,1416,1421,1425],{"type":19,"tag":84,"props":1413,"children":1414},{"style":91},[1415],{"type":24,"value":1391},{"type":19,"tag":84,"props":1417,"children":1418},{"style":272},[1419],{"type":24,"value":1420}," method",{"type":19,"tag":84,"props":1422,"children":1423},{"style":91},[1424],{"type":24,"value":280},{"type":19,"tag":84,"props":1426,"children":1427},{"style":117},[1428],{"type":24,"value":1429}," that[name];\n",{"type":19,"tag":84,"props":1431,"children":1432},{"class":86,"line":556},[1433,1437,1441],{"type":19,"tag":84,"props":1434,"children":1435},{"style":91},[1436],{"type":24,"value":623},{"type":19,"tag":84,"props":1438,"children":1439},{"style":91},[1440],{"type":24,"value":382},{"type":19,"tag":84,"props":1442,"children":1443},{"style":117},[1444],{"type":24,"value":313},{"type":19,"tag":84,"props":1446,"children":1447},{"class":86,"line":574},[1448],{"type":19,"tag":84,"props":1449,"children":1450},{"style":117},[1451],{"type":24,"value":706},{"type":19,"tag":84,"props":1453,"children":1454},{"class":86,"line":600},[1455,1459,1464,1468,1473,1477],{"type":19,"tag":84,"props":1456,"children":1457},{"style":91},[1458],{"type":24,"value":779},{"type":19,"tag":84,"props":1460,"children":1461},{"style":117},[1462],{"type":24,"value":1463}," method.",{"type":19,"tag":84,"props":1465,"children":1466},{"style":249},[1467],{"type":24,"value":956},{"type":19,"tag":84,"props":1469,"children":1470},{"style":117},[1471],{"type":24,"value":1472},"(that, ",{"type":19,"tag":84,"props":1474,"children":1475},{"style":249},[1476],{"type":24,"value":974},{"type":19,"tag":84,"props":1478,"children":1479},{"style":117},[1480],{"type":24,"value":979},{"type":19,"tag":84,"props":1482,"children":1483},{"class":86,"line":617},[1484],{"type":19,"tag":84,"props":1485,"children":1486},{"style":117},[1487],{"type":24,"value":843},{"type":19,"tag":84,"props":1489,"children":1490},{"class":86,"line":630},[1491],{"type":19,"tag":84,"props":1492,"children":1493},{"style":117},[1494],{"type":24,"value":1495},"});\n",{"type":19,"tag":84,"props":1497,"children":1498},{"class":86,"line":933},[1499],{"type":19,"tag":84,"props":1500,"children":1501},{"emptyLinePlaceholder":132},[1502],{"type":24,"value":135},{"type":19,"tag":84,"props":1504,"children":1505},{"class":86,"line":941},[1506,1510,1514,1518,1522],{"type":19,"tag":84,"props":1507,"children":1508},{"style":91},[1509],{"type":24,"value":413},{"type":19,"tag":84,"props":1511,"children":1512},{"style":272},[1513],{"type":24,"value":693},{"type":19,"tag":84,"props":1515,"children":1516},{"style":91},[1517],{"type":24,"value":280},{"type":19,"tag":84,"props":1519,"children":1520},{"style":91},[1521],{"type":24,"value":382},{"type":19,"tag":84,"props":1523,"children":1524},{"style":117},[1525],{"type":24,"value":1526},"(spec)\n",{"type":19,"tag":84,"props":1528,"children":1529},{"class":86,"line":982},[1530],{"type":19,"tag":84,"props":1531,"children":1532},{"style":117},[1533],{"type":24,"value":681},{"type":19,"tag":84,"props":1535,"children":1536},{"class":86,"line":990},[1537,1541,1545,1549],{"type":19,"tag":84,"props":1538,"children":1539},{"style":91},[1540],{"type":24,"value":1391},{"type":19,"tag":84,"props":1542,"children":1543},{"style":272},[1544],{"type":24,"value":1396},{"type":19,"tag":84,"props":1546,"children":1547},{"style":91},[1548],{"type":24,"value":280},{"type":19,"tag":84,"props":1550,"children":1551},{"style":117},[1552],{"type":24,"value":1553}," {};\n",{"type":19,"tag":84,"props":1555,"children":1556},{"class":86,"line":998},[1557,1562,1566],{"type":19,"tag":84,"props":1558,"children":1559},{"style":117},[1560],{"type":24,"value":1561},"   that.name ",{"type":19,"tag":84,"props":1563,"children":1564},{"style":91},[1565],{"type":24,"value":479},{"type":19,"tag":84,"props":1567,"children":1568},{"style":117},[1569],{"type":24,"value":1570}," spec.name;\n",{"type":19,"tag":84,"props":1572,"children":1573},{"class":86,"line":1019},[1574],{"type":19,"tag":84,"props":1575,"children":1576},{"emptyLinePlaceholder":132},[1577],{"type":24,"value":135},{"type":19,"tag":84,"props":1579,"children":1580},{"class":86,"line":1027},[1581,1586,1590,1594],{"type":19,"tag":84,"props":1582,"children":1583},{"style":117},[1584],{"type":24,"value":1585},"   that.move ",{"type":19,"tag":84,"props":1587,"children":1588},{"style":91},[1589],{"type":24,"value":479},{"type":19,"tag":84,"props":1591,"children":1592},{"style":91},[1593],{"type":24,"value":382},{"type":19,"tag":84,"props":1595,"children":1596},{"style":117},[1597],{"type":24,"value":1598},"(meters)\n",{"type":19,"tag":84,"props":1600,"children":1601},{"class":86,"line":1049},[1602],{"type":19,"tag":84,"props":1603,"children":1604},{"style":117},[1605],{"type":24,"value":706},{"type":19,"tag":84,"props":1607,"children":1608},{"class":86,"line":1087},[1609,1613,1617,1621,1625,1629,1634,1638,1642,1646,1651],{"type":19,"tag":84,"props":1610,"children":1611},{"style":97},[1612],{"type":24,"value":1033},{"type":19,"tag":84,"props":1614,"children":1615},{"style":117},[1616],{"type":24,"value":789},{"type":19,"tag":84,"props":1618,"children":1619},{"style":249},[1620],{"type":24,"value":794},{"type":19,"tag":84,"props":1622,"children":1623},{"style":117},[1624],{"type":24,"value":719},{"type":19,"tag":84,"props":1626,"children":1627},{"style":91},[1628],{"type":24,"value":176},{"type":19,"tag":84,"props":1630,"children":1631},{"style":179},[1632],{"type":24,"value":1633}," ' moved '",{"type":19,"tag":84,"props":1635,"children":1636},{"style":91},[1637],{"type":24,"value":816},{"type":19,"tag":84,"props":1639,"children":1640},{"style":117},[1641],{"type":24,"value":821},{"type":19,"tag":84,"props":1643,"children":1644},{"style":91},[1645],{"type":24,"value":176},{"type":19,"tag":84,"props":1647,"children":1648},{"style":179},[1649],{"type":24,"value":1650}," 'm.'",{"type":19,"tag":84,"props":1652,"children":1653},{"style":117},[1654],{"type":24,"value":979},{"type":19,"tag":84,"props":1656,"children":1657},{"class":86,"line":1095},[1658],{"type":19,"tag":84,"props":1659,"children":1660},{"style":117},[1661],{"type":24,"value":736},{"type":19,"tag":84,"props":1663,"children":1664},{"class":86,"line":1108},[1665,1669],{"type":19,"tag":84,"props":1666,"children":1667},{"style":91},[1668],{"type":24,"value":623},{"type":19,"tag":84,"props":1670,"children":1671},{"style":117},[1672],{"type":24,"value":1673}," that;\n",{"type":19,"tag":84,"props":1675,"children":1676},{"class":86,"line":1117},[1677],{"type":19,"tag":84,"props":1678,"children":1679},{"style":117},[1680],{"type":24,"value":1681},"}\n",{"type":19,"tag":84,"props":1683,"children":1684},{"class":86,"line":1125},[1685],{"type":19,"tag":84,"props":1686,"children":1687},{"emptyLinePlaceholder":132},[1688],{"type":24,"value":135},{"type":19,"tag":84,"props":1690,"children":1691},{"class":86,"line":1158},[1692,1696,1700,1704,1708],{"type":19,"tag":84,"props":1693,"children":1694},{"style":91},[1695],{"type":24,"value":413},{"type":19,"tag":84,"props":1697,"children":1698},{"style":272},[1699],{"type":24,"value":203},{"type":19,"tag":84,"props":1701,"children":1702},{"style":91},[1703],{"type":24,"value":280},{"type":19,"tag":84,"props":1705,"children":1706},{"style":91},[1707],{"type":24,"value":382},{"type":19,"tag":84,"props":1709,"children":1710},{"style":117},[1711],{"type":24,"value":1526},{"type":19,"tag":84,"props":1713,"children":1715},{"class":86,"line":1714},33,[1716],{"type":19,"tag":84,"props":1717,"children":1718},{"style":117},[1719],{"type":24,"value":681},{"type":19,"tag":84,"props":1721,"children":1723},{"class":86,"line":1722},34,[1724,1728,1732,1736,1740],{"type":19,"tag":84,"props":1725,"children":1726},{"style":91},[1727],{"type":24,"value":1391},{"type":19,"tag":84,"props":1729,"children":1730},{"style":272},[1731],{"type":24,"value":1396},{"type":19,"tag":84,"props":1733,"children":1734},{"style":91},[1735],{"type":24,"value":280},{"type":19,"tag":84,"props":1737,"children":1738},{"style":97},[1739],{"type":24,"value":693},{"type":19,"tag":84,"props":1741,"children":1742},{"style":117},[1743],{"type":24,"value":1744},"(spec);\n",{"type":19,"tag":84,"props":1746,"children":1748},{"class":86,"line":1747},35,[1749,1753,1758,1762,1767,1772,1776,1781],{"type":19,"tag":84,"props":1750,"children":1751},{"style":91},[1752],{"type":24,"value":1391},{"type":19,"tag":84,"props":1754,"children":1755},{"style":272},[1756],{"type":24,"value":1757}," super_move",{"type":19,"tag":84,"props":1759,"children":1760},{"style":91},[1761],{"type":24,"value":280},{"type":19,"tag":84,"props":1763,"children":1764},{"style":117},[1765],{"type":24,"value":1766}," that.",{"type":19,"tag":84,"props":1768,"children":1769},{"style":97},[1770],{"type":24,"value":1771},"superior",{"type":19,"tag":84,"props":1773,"children":1774},{"style":117},[1775],{"type":24,"value":789},{"type":19,"tag":84,"props":1777,"children":1778},{"style":179},[1779],{"type":24,"value":1780},"'move'",{"type":19,"tag":84,"props":1782,"children":1783},{"style":117},[1784],{"type":24,"value":979},{"type":19,"tag":84,"props":1786,"children":1788},{"class":86,"line":1787},36,[1789],{"type":19,"tag":84,"props":1790,"children":1791},{"emptyLinePlaceholder":132},[1792],{"type":24,"value":135},{"type":19,"tag":84,"props":1794,"children":1796},{"class":86,"line":1795},37,[1797,1801,1805,1809],{"type":19,"tag":84,"props":1798,"children":1799},{"style":117},[1800],{"type":24,"value":1585},{"type":19,"tag":84,"props":1802,"children":1803},{"style":91},[1804],{"type":24,"value":479},{"type":19,"tag":84,"props":1806,"children":1807},{"style":91},[1808],{"type":24,"value":382},{"type":19,"tag":84,"props":1810,"children":1811},{"style":117},[1812],{"type":24,"value":313},{"type":19,"tag":84,"props":1814,"children":1816},{"class":86,"line":1815},38,[1817],{"type":19,"tag":84,"props":1818,"children":1819},{"style":117},[1820],{"type":24,"value":706},{"type":19,"tag":84,"props":1822,"children":1824},{"class":86,"line":1823},39,[1825,1829,1833,1838],{"type":19,"tag":84,"props":1826,"children":1827},{"style":97},[1828],{"type":24,"value":1033},{"type":19,"tag":84,"props":1830,"children":1831},{"style":117},[1832],{"type":24,"value":789},{"type":19,"tag":84,"props":1834,"children":1835},{"style":179},[1836],{"type":24,"value":1837},"'Slithering...'",{"type":19,"tag":84,"props":1839,"children":1840},{"style":117},[1841],{"type":24,"value":979},{"type":19,"tag":84,"props":1843,"children":1845},{"class":86,"line":1844},40,[1846,1851,1855,1859],{"type":19,"tag":84,"props":1847,"children":1848},{"style":97},[1849],{"type":24,"value":1850},"      super_move",{"type":19,"tag":84,"props":1852,"children":1853},{"style":117},[1854],{"type":24,"value":789},{"type":19,"tag":84,"props":1856,"children":1857},{"style":249},[1858],{"type":24,"value":1080},{"type":19,"tag":84,"props":1860,"children":1861},{"style":117},[1862],{"type":24,"value":979},{"type":19,"tag":84,"props":1864,"children":1866},{"class":86,"line":1865},41,[1867],{"type":19,"tag":84,"props":1868,"children":1869},{"style":117},[1870],{"type":24,"value":736},{"type":19,"tag":84,"props":1872,"children":1874},{"class":86,"line":1873},42,[1875,1879],{"type":19,"tag":84,"props":1876,"children":1877},{"style":91},[1878],{"type":24,"value":623},{"type":19,"tag":84,"props":1880,"children":1881},{"style":117},[1882],{"type":24,"value":1673},{"type":19,"tag":84,"props":1884,"children":1886},{"class":86,"line":1885},43,[1887],{"type":19,"tag":84,"props":1888,"children":1889},{"style":117},[1890],{"type":24,"value":1681},{"type":19,"tag":84,"props":1892,"children":1894},{"class":86,"line":1893},44,[1895],{"type":19,"tag":84,"props":1896,"children":1897},{"emptyLinePlaceholder":132},[1898],{"type":24,"value":135},{"type":19,"tag":84,"props":1900,"children":1902},{"class":86,"line":1901},45,[1903,1907,1911,1915,1919,1924,1929,1933,1938],{"type":19,"tag":84,"props":1904,"children":1905},{"style":272},[1906],{"type":24,"value":275},{"type":19,"tag":84,"props":1908,"children":1909},{"style":91},[1910],{"type":24,"value":280},{"type":19,"tag":84,"props":1912,"children":1913},{"style":91},[1914],{"type":24,"value":285},{"type":19,"tag":84,"props":1916,"children":1917},{"style":97},[1918],{"type":24,"value":203},{"type":19,"tag":84,"props":1920,"children":1921},{"style":117},[1922],{"type":24,"value":1923},"({",{"type":19,"tag":84,"props":1925,"children":1926},{"style":272},[1927],{"type":24,"value":1928},"name",{"type":19,"tag":84,"props":1930,"children":1931},{"style":91},[1932],{"type":24,"value":114},{"type":19,"tag":84,"props":1934,"children":1935},{"style":179},[1936],{"type":24,"value":1937},"'Sammy the Python'",{"type":19,"tag":84,"props":1939,"children":1940},{"style":117},[1941],{"type":24,"value":1495},{"type":19,"tag":84,"props":1943,"children":1945},{"class":86,"line":1944},46,[1946,1950,1954],{"type":19,"tag":84,"props":1947,"children":1948},{"style":117},[1949],{"type":24,"value":303},{"type":19,"tag":84,"props":1951,"children":1952},{"style":249},[1953],{"type":24,"value":308},{"type":19,"tag":84,"props":1955,"children":1956},{"style":117},[1957],{"type":24,"value":313},{"type":19,"tag":20,"props":1959,"children":1960},{},[1961],{"type":24,"value":1962},"The functional style does nothing with prototypes. Inheritance is implemented by creating an object from a base function, similar to a constructor, but without the need for the new operator. Access to super methods is accomplished by extending the built-in Object and Function objects. Notice that any child object wanting access to a super method must create a new function pointing to the super method.",{"type":19,"tag":52,"props":1964,"children":1966},{"id":1965},"which-one",[1967],{"type":24,"value":1968},"Which One?",{"type":19,"tag":20,"props":1970,"children":1971},{},[1972,1974,1981],{"type":24,"value":1973},"So which method is better? Because I'm more familiar with class-based inheritance, I'd rather just use CoffeeScript and ignore the underlying JavaScript implementation altogether. I like the fact that I can look at a CoffeeScript class definition and see on a single line both the name of the \"class\" and the name of the \"class\" it extends. In both JavaScript implementations, I have to search other lines to find the object that my object is extending. I find the use of the ",{"type":19,"tag":331,"props":1975,"children":1976},{},[1977],{"type":19,"tag":335,"props":1978,"children":1979},{},[1980],{"type":24,"value":339},{"type":24,"value":1982}," property a much more elegant solution when it comes to super methods. The functional method for accessing super methods would not scale well if there are a large number of super methods you want to access.",{"type":19,"tag":20,"props":1984,"children":1985},{},[1986],{"type":24,"value":1987},"Even if you decide to work at the CoffeeScript level, it's imperative that you understand the JavaScript it compiles into. Again, read the article referenced above and the generated JavaScript becomes trivial to understand.",{"type":19,"tag":20,"props":1989,"children":1990},{},[1991,1993,1999],{"type":24,"value":1992},"Finally, if you want a much more thorough comparison and richer examples of prototypal vs. functional inheritance styles, this ",{"type":19,"tag":27,"props":1994,"children":1997},{"href":1995,"rel":1996},"http://bolinfest.com/javascript/inheritance.php",[31],[1998],{"type":24,"value":34},{"type":24,"value":2000}," provides both and makes a very strong case for the use of prototypal inheritance.",{"type":19,"tag":2002,"props":2003,"children":2004},"style",{},[2005],{"type":24,"value":2006},"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":128,"depth":128,"links":2008},[2009,2010,2011,2012],{"id":54,"depth":128,"text":57},{"id":321,"depth":128,"text":324},{"id":1189,"depth":128,"text":1192},{"id":1965,"depth":128,"text":1968},"markdown","content:rbrubaker:2012-07:prototypal-js.md","content","rbrubaker/2012-07/prototypal-js.md","rbrubaker/2012-07/prototypal-js","md",{"user":2020,"name":2021},"rbrubaker","Ryan Brubaker",{"_path":2023,"_dir":2024,"_draft":7,"_partial":7,"_locale":8,"title":2025,"description":2026,"publishDate":2027,"tags":2028,"excerpt":2026,"body":2032,"_type":2013,"_id":2147,"_source":2015,"_file":2148,"_stem":2149,"_extension":2018,"author":2150},"/rbrubaker/2012-06/coffee-backbone-3","2012-06","Fun with CoffeeScript and Backbone.js : Part 3","In this post I’ll discuss my thoughts on CoffeeScript and Backbone.js.","2012-06-08",[2029,13,2030,2031],"backbone-js","html5","series",{"type":16,"children":2033,"toc":2145},[2034,2055,2076,2088,2109,2126,2135,2140],{"type":19,"tag":20,"props":2035,"children":2036},{},[2037,2039,2045,2047,2054],{"type":24,"value":2038},"In this post I’ll discuss my thoughts on ",{"type":19,"tag":27,"props":2040,"children":2042},{"href":65,"rel":2041},[31],[2043],{"type":24,"value":2044},"CoffeeScript",{"type":24,"value":2046}," and ",{"type":19,"tag":27,"props":2048,"children":2051},{"href":2049,"rel":2050},"http://backbonejs.org/",[31],[2052],{"type":24,"value":2053},"Backbone.js",{"type":24,"value":50},{"type":19,"tag":20,"props":2056,"children":2057},{},[2058,2060,2067,2069,2075],{"type":24,"value":2059},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":19,"tag":27,"props":2061,"children":2064},{"href":2062,"rel":2063},"https://github.com/rmb177/MorseCode",[31],[2065],{"type":24,"value":2066},"here",{"type":24,"value":2068}," and the running code can be seen ",{"type":19,"tag":27,"props":2070,"children":2073},{"href":2071,"rel":2072},"http://www.ryan-brubaker.com/code/MorseCode",[31],[2074],{"type":24,"value":2066},{"type":24,"value":50},{"type":19,"tag":20,"props":2077,"children":2078},{},[2079,2081,2087],{"type":24,"value":2080},"See the ",{"type":19,"tag":27,"props":2082,"children":2084},{"href":2083},"/search/fun/coffeescript/user:rmb",[2085],{"type":24,"value":2086},"rest of this series",{"type":24,"value":50},{"type":19,"tag":20,"props":2089,"children":2090},{},[2091,2093,2100,2102,2107],{"type":24,"value":2092},"JavaScript has slowly become my favorite programming language as I've done more web development. As you learn its ",{"type":19,"tag":27,"props":2094,"children":2097},{"href":2095,"rel":2096},"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1339122559&sr=8-1",[31],[2098],{"type":24,"value":2099},"Good Parts",{"type":24,"value":2101},", you start to realize how powerful of a language it is. I'll never forget the ",{"type":19,"tag":331,"props":2103,"children":2104},{},[2105],{"type":24,"value":2106},"Aha",{"type":24,"value":2108},"! moment I had when I wrote my first closure.",{"type":19,"tag":20,"props":2110,"children":2111},{},[2112,2124],{"type":19,"tag":27,"props":2113,"children":2116},{"href":2114,"rel":2115},"https://artandlogic.com/wp-content/uploads/2012/06/coffeescript-logo1.png",[31],[2117],{"type":19,"tag":2118,"props":2119,"children":2123},"img",{"alt":2120,"src":2121,"title":2122},"Coffeescript logo","assets/images/coffeescript-logo1.png","CoffeeScript-logo",[],{"type":24,"value":2125},"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":19,"tag":20,"props":2127,"children":2128},{},[2129],{"type":19,"tag":2118,"props":2130,"children":2134},{"alt":2131,"src":2132,"title":2133},"Backbone js","assets/images/backbone.png","backbone",[],{"type":19,"tag":20,"props":2136,"children":2137},{},[2138],{"type":24,"value":2139},"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":19,"tag":20,"props":2141,"children":2142},{},[2143],{"type":24,"value":2144},"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":128,"depth":128,"links":2146},[],"content:rbrubaker:2012-06:coffee-backbone-3.md","rbrubaker/2012-06/coffee-backbone-3.md","rbrubaker/2012-06/coffee-backbone-3",{"user":2020,"name":2021},{"_path":2152,"_dir":2024,"_draft":7,"_partial":7,"_locale":8,"title":2153,"description":2154,"publishDate":2155,"tags":2156,"excerpt":2154,"body":2157,"_type":2013,"_id":3719,"_source":2015,"_file":3720,"_stem":3721,"_extension":2018,"author":3722},"/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",[2029,13,2030,2031],{"type":16,"children":2158,"toc":3717},[2159,2163,2172,2188,2199,2366,2387,2398,2946,2965,2976,3702,3713],{"type":19,"tag":20,"props":2160,"children":2161},{},[2162],{"type":24,"value":2154},{"type":19,"tag":20,"props":2164,"children":2165},{},[2166,2167,2171],{"type":24,"value":2080},{"type":19,"tag":27,"props":2168,"children":2169},{"href":2083},[2170],{"type":24,"value":2086},{"type":24,"value":50},{"type":19,"tag":20,"props":2173,"children":2174},{},[2175,2176,2181,2182,2187],{"type":24,"value":2059},{"type":19,"tag":27,"props":2177,"children":2179},{"href":2062,"rel":2178},[31],[2180],{"type":24,"value":2066},{"type":24,"value":2068},{"type":19,"tag":27,"props":2183,"children":2185},{"href":2071,"rel":2184},[31],[2186],{"type":24,"value":2066},{"type":24,"value":50},{"type":19,"tag":20,"props":2189,"children":2190},{},[2191],{"type":19,"tag":335,"props":2192,"children":2193},{},[2194],{"type":19,"tag":331,"props":2195,"children":2196},{},[2197],{"type":24,"value":2198},"Communication Line View",{"type":19,"tag":73,"props":2200,"children":2202},{"className":75,"code":2201,"language":77,"meta":8,"style":8},"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",[2203],{"type":19,"tag":80,"props":2204,"children":2205},{"__ignoreMap":8},[2206,2227,2243,2270,2277,2299,2330],{"type":19,"tag":84,"props":2207,"children":2208},{"class":86,"line":87},[2209,2213,2218,2222],{"type":19,"tag":84,"props":2210,"children":2211},{"style":91},[2212],{"type":24,"value":94},{"type":19,"tag":84,"props":2214,"children":2215},{"style":97},[2216],{"type":24,"value":2217}," DecoderView",{"type":19,"tag":84,"props":2219,"children":2220},{"style":91},[2221],{"type":24,"value":208},{"type":19,"tag":84,"props":2223,"children":2224},{"style":97},[2225],{"type":24,"value":2226}," Backbone.View\n",{"type":19,"tag":84,"props":2228,"children":2229},{"class":86,"line":103},[2230,2235,2239],{"type":19,"tag":84,"props":2231,"children":2232},{"style":97},[2233],{"type":24,"value":2234},"   initialize",{"type":19,"tag":84,"props":2236,"children":2237},{"style":91},[2238],{"type":24,"value":114},{"type":19,"tag":84,"props":2240,"children":2241},{"style":91},[2242],{"type":24,"value":229},{"type":19,"tag":84,"props":2244,"children":2245},{"class":86,"line":128},[2246,2251,2256,2260,2265],{"type":19,"tag":84,"props":2247,"children":2248},{"style":117},[2249],{"type":24,"value":2250},"      @model.",{"type":19,"tag":84,"props":2252,"children":2253},{"style":97},[2254],{"type":24,"value":2255},"bind",{"type":19,"tag":84,"props":2257,"children":2258},{"style":117},[2259],{"type":24,"value":789},{"type":19,"tag":84,"props":2261,"children":2262},{"style":179},[2263],{"type":24,"value":2264},"'parsedCharacter'",{"type":19,"tag":84,"props":2266,"children":2267},{"style":117},[2268],{"type":24,"value":2269},", @render)\n",{"type":19,"tag":84,"props":2271,"children":2272},{"class":86,"line":138},[2273],{"type":19,"tag":84,"props":2274,"children":2275},{"emptyLinePlaceholder":132},[2276],{"type":24,"value":135},{"type":19,"tag":84,"props":2278,"children":2279},{"class":86,"line":160},[2280,2285,2289,2294],{"type":19,"tag":84,"props":2281,"children":2282},{"style":97},[2283],{"type":24,"value":2284},"   render",{"type":19,"tag":84,"props":2286,"children":2287},{"style":91},[2288],{"type":24,"value":114},{"type":19,"tag":84,"props":2290,"children":2291},{"style":117},[2292],{"type":24,"value":2293}," (token) ",{"type":19,"tag":84,"props":2295,"children":2296},{"style":91},[2297],{"type":24,"value":2298},"=>\n",{"type":19,"tag":84,"props":2300,"children":2301},{"class":86,"line":185},[2302,2307,2311,2316,2320,2325],{"type":19,"tag":84,"props":2303,"children":2304},{"style":272},[2305],{"type":24,"value":2306},"      messageBox",{"type":19,"tag":84,"props":2308,"children":2309},{"style":91},[2310],{"type":24,"value":280},{"type":19,"tag":84,"props":2312,"children":2313},{"style":97},[2314],{"type":24,"value":2315}," $",{"type":19,"tag":84,"props":2317,"children":2318},{"style":117},[2319],{"type":24,"value":789},{"type":19,"tag":84,"props":2321,"children":2322},{"style":179},[2323],{"type":24,"value":2324},"'#messageBox'",{"type":19,"tag":84,"props":2326,"children":2327},{"style":117},[2328],{"type":24,"value":2329},")\n",{"type":19,"tag":84,"props":2331,"children":2332},{"class":86,"line":193},[2333,2338,2343,2348,2352,2357,2361],{"type":19,"tag":84,"props":2334,"children":2335},{"style":117},[2336],{"type":24,"value":2337},"      messageBox.",{"type":19,"tag":84,"props":2339,"children":2340},{"style":97},[2341],{"type":24,"value":2342},"val",{"type":19,"tag":84,"props":2344,"children":2345},{"style":117},[2346],{"type":24,"value":2347},"(messageBox.",{"type":19,"tag":84,"props":2349,"children":2350},{"style":97},[2351],{"type":24,"value":2342},{"type":19,"tag":84,"props":2353,"children":2354},{"style":117},[2355],{"type":24,"value":2356},"() ",{"type":19,"tag":84,"props":2358,"children":2359},{"style":91},[2360],{"type":24,"value":176},{"type":19,"tag":84,"props":2362,"children":2363},{"style":117},[2364],{"type":24,"value":2365}," token)\n",{"type":19,"tag":20,"props":2367,"children":2368},{},[2369,2371,2378,2380,2385],{"type":24,"value":2370},"The CommunicationLineView class is a Backbone.js view class that handles the animation of signals sent across the communication line. In ",{"type":19,"tag":27,"props":2372,"children":2375},{"href":2373,"rel":2374},"http://blog.artlogic.com/2012/06/06/fun-with-coffeescript-and-backbone-js-part-1/",[31],[2376],{"type":24,"value":2377},"Part 1",{"type":24,"value":2379},", I mentioned that the model representing the communication line fires a ",{"type":19,"tag":331,"props":2381,"children":2382},{},[2383],{"type":24,"value":2384},"hasNewData",{"type":24,"value":2386}," 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":19,"tag":20,"props":2388,"children":2389},{},[2390],{"type":19,"tag":331,"props":2391,"children":2392},{},[2393],{"type":19,"tag":335,"props":2394,"children":2395},{},[2396],{"type":24,"value":2397},"Decoder Model",{"type":19,"tag":73,"props":2399,"children":2401},{"className":75,"code":2400,"language":77,"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",[2402],{"type":19,"tag":80,"props":2403,"children":2404},{"__ignoreMap":8},[2405,2426,2433,2450,2458,2466,2474,2481,2488,2503,2520,2537,2554,2561,2581,2603,2630,2653,2679,2712,2745,2753,2771,2787,2794,2810,2829,2865,2897,2915,2930],{"type":19,"tag":84,"props":2406,"children":2407},{"class":86,"line":87},[2408,2412,2417,2421],{"type":19,"tag":84,"props":2409,"children":2410},{"style":91},[2411],{"type":24,"value":94},{"type":19,"tag":84,"props":2413,"children":2414},{"style":97},[2415],{"type":24,"value":2416}," MorseDecoder",{"type":19,"tag":84,"props":2418,"children":2419},{"style":91},[2420],{"type":24,"value":208},{"type":19,"tag":84,"props":2422,"children":2423},{"style":97},[2424],{"type":24,"value":2425}," Backbone.Model\n",{"type":19,"tag":84,"props":2427,"children":2428},{"class":86,"line":103},[2429],{"type":19,"tag":84,"props":2430,"children":2431},{"emptyLinePlaceholder":132},[2432],{"type":24,"value":135},{"type":19,"tag":84,"props":2434,"children":2435},{"class":86,"line":128},[2436,2441,2445],{"type":19,"tag":84,"props":2437,"children":2438},{"style":97},[2439],{"type":24,"value":2440},"   initializeKey",{"type":19,"tag":84,"props":2442,"children":2443},{"style":91},[2444],{"type":24,"value":114},{"type":19,"tag":84,"props":2446,"children":2447},{"style":91},[2448],{"type":24,"value":2449}," =>\n",{"type":19,"tag":84,"props":2451,"children":2452},{"class":86,"line":138},[2453],{"type":19,"tag":84,"props":2454,"children":2455},{"style":179},[2456],{"type":24,"value":2457},"      \"\"\"\n",{"type":19,"tag":84,"props":2459,"children":2460},{"class":86,"line":160},[2461],{"type":19,"tag":84,"props":2462,"children":2463},{"style":179},[2464],{"type":24,"value":2465},"      Omitting code that initializes the morse code key \n",{"type":19,"tag":84,"props":2467,"children":2468},{"class":86,"line":185},[2469],{"type":19,"tag":84,"props":2470,"children":2471},{"style":179},[2472],{"type":24,"value":2473},"      dictionary.\n",{"type":19,"tag":84,"props":2475,"children":2476},{"class":86,"line":193},[2477],{"type":19,"tag":84,"props":2478,"children":2479},{"style":179},[2480],{"type":24,"value":2457},{"type":19,"tag":84,"props":2482,"children":2483},{"class":86,"line":215},[2484],{"type":19,"tag":84,"props":2485,"children":2486},{"emptyLinePlaceholder":132},[2487],{"type":24,"value":135},{"type":19,"tag":84,"props":2489,"children":2490},{"class":86,"line":232},[2491,2495,2499],{"type":19,"tag":84,"props":2492,"children":2493},{"style":97},[2494],{"type":24,"value":2234},{"type":19,"tag":84,"props":2496,"children":2497},{"style":91},[2498],{"type":24,"value":114},{"type":19,"tag":84,"props":2500,"children":2501},{"style":91},[2502],{"type":24,"value":2449},{"type":19,"tag":84,"props":2504,"children":2505},{"class":86,"line":245},[2506,2511,2515],{"type":19,"tag":84,"props":2507,"children":2508},{"style":117},[2509],{"type":24,"value":2510},"      @inputTokens ",{"type":19,"tag":84,"props":2512,"children":2513},{"style":91},[2514],{"type":24,"value":479},{"type":19,"tag":84,"props":2516,"children":2517},{"style":117},[2518],{"type":24,"value":2519}," []\n",{"type":19,"tag":84,"props":2521,"children":2522},{"class":86,"line":260},[2523,2528,2532],{"type":19,"tag":84,"props":2524,"children":2525},{"style":117},[2526],{"type":24,"value":2527},"      @numEmptyTokensInARow ",{"type":19,"tag":84,"props":2529,"children":2530},{"style":91},[2531],{"type":24,"value":479},{"type":19,"tag":84,"props":2533,"children":2534},{"style":249},[2535],{"type":24,"value":2536}," 0\n",{"type":19,"tag":84,"props":2538,"children":2539},{"class":86,"line":268},[2540,2545,2550],{"type":19,"tag":84,"props":2541,"children":2542},{"style":117},[2543],{"type":24,"value":2544},"      @",{"type":19,"tag":84,"props":2546,"children":2547},{"style":97},[2548],{"type":24,"value":2549},"initializeKey",{"type":19,"tag":84,"props":2551,"children":2552},{"style":117},[2553],{"type":24,"value":313},{"type":19,"tag":84,"props":2555,"children":2556},{"class":86,"line":297},[2557],{"type":19,"tag":84,"props":2558,"children":2559},{"emptyLinePlaceholder":132},[2560],{"type":24,"value":135},{"type":19,"tag":84,"props":2562,"children":2563},{"class":86,"line":556},[2564,2569,2573,2577],{"type":19,"tag":84,"props":2565,"children":2566},{"style":97},[2567],{"type":24,"value":2568},"   processToken",{"type":19,"tag":84,"props":2570,"children":2571},{"style":91},[2572],{"type":24,"value":114},{"type":19,"tag":84,"props":2574,"children":2575},{"style":117},[2576],{"type":24,"value":2293},{"type":19,"tag":84,"props":2578,"children":2579},{"style":91},[2580],{"type":24,"value":2298},{"type":19,"tag":84,"props":2582,"children":2583},{"class":86,"line":574},[2584,2588,2593,2598],{"type":19,"tag":84,"props":2585,"children":2586},{"style":91},[2587],{"type":24,"value":444},{"type":19,"tag":84,"props":2589,"children":2590},{"style":117},[2591],{"type":24,"value":2592}," token ",{"type":19,"tag":84,"props":2594,"children":2595},{"style":91},[2596],{"type":24,"value":2597},"==",{"type":19,"tag":84,"props":2599,"children":2600},{"style":179},[2601],{"type":24,"value":2602}," ''\n",{"type":19,"tag":84,"props":2604,"children":2605},{"class":86,"line":600},[2606,2611,2616,2620,2625],{"type":19,"tag":84,"props":2607,"children":2608},{"style":117},[2609],{"type":24,"value":2610},"         @",{"type":19,"tag":84,"props":2612,"children":2613},{"style":97},[2614],{"type":24,"value":2615},"parseTokens",{"type":19,"tag":84,"props":2617,"children":2618},{"style":117},[2619],{"type":24,"value":2356},{"type":19,"tag":84,"props":2621,"children":2622},{"style":91},[2623],{"type":24,"value":2624},"if",{"type":19,"tag":84,"props":2626,"children":2627},{"style":117},[2628],{"type":24,"value":2629}," \n",{"type":19,"tag":84,"props":2631,"children":2632},{"class":86,"line":617},[2633,2638,2643,2648],{"type":19,"tag":84,"props":2634,"children":2635},{"style":91},[2636],{"type":24,"value":2637},"          ++",{"type":19,"tag":84,"props":2639,"children":2640},{"style":117},[2641],{"type":24,"value":2642},"@numEmptyTokensInARow ",{"type":19,"tag":84,"props":2644,"children":2645},{"style":91},[2646],{"type":24,"value":2647},">=",{"type":19,"tag":84,"props":2649,"children":2650},{"style":249},[2651],{"type":24,"value":2652}," 10\n",{"type":19,"tag":84,"props":2654,"children":2655},{"class":86,"line":630},[2656,2661,2666,2670,2674],{"type":19,"tag":84,"props":2657,"children":2658},{"style":91},[2659],{"type":24,"value":2660},"      else",{"type":19,"tag":84,"props":2662,"children":2663},{"style":91},[2664],{"type":24,"value":2665}," if",{"type":19,"tag":84,"props":2667,"children":2668},{"style":117},[2669],{"type":24,"value":2592},{"type":19,"tag":84,"props":2671,"children":2672},{"style":91},[2673],{"type":24,"value":2597},{"type":19,"tag":84,"props":2675,"children":2676},{"style":117},[2677],{"type":24,"value":2678}," kWordStopToken\n",{"type":19,"tag":84,"props":2680,"children":2681},{"class":86,"line":933},[2682,2686,2690,2694,2698,2703,2708],{"type":19,"tag":84,"props":2683,"children":2684},{"style":117},[2685],{"type":24,"value":2610},{"type":19,"tag":84,"props":2687,"children":2688},{"style":97},[2689],{"type":24,"value":2615},{"type":19,"tag":84,"props":2691,"children":2692},{"style":117},[2693],{"type":24,"value":2356},{"type":19,"tag":84,"props":2695,"children":2696},{"style":91},[2697],{"type":24,"value":2624},{"type":19,"tag":84,"props":2699,"children":2700},{"style":117},[2701],{"type":24,"value":2702}," @inputTokens.length ",{"type":19,"tag":84,"props":2704,"children":2705},{"style":91},[2706],{"type":24,"value":2707},">",{"type":19,"tag":84,"props":2709,"children":2710},{"style":249},[2711],{"type":24,"value":2536},{"type":19,"tag":84,"props":2713,"children":2714},{"class":86,"line":941},[2715,2719,2724,2728,2732,2736,2741],{"type":19,"tag":84,"props":2716,"children":2717},{"style":117},[2718],{"type":24,"value":2610},{"type":19,"tag":84,"props":2720,"children":2721},{"style":97},[2722],{"type":24,"value":2723},"trigger",{"type":19,"tag":84,"props":2725,"children":2726},{"style":117},[2727],{"type":24,"value":789},{"type":19,"tag":84,"props":2729,"children":2730},{"style":179},[2731],{"type":24,"value":2264},{"type":19,"tag":84,"props":2733,"children":2734},{"style":117},[2735],{"type":24,"value":969},{"type":19,"tag":84,"props":2737,"children":2738},{"style":179},[2739],{"type":24,"value":2740},"' '",{"type":19,"tag":84,"props":2742,"children":2743},{"style":117},[2744],{"type":24,"value":2329},{"type":19,"tag":84,"props":2746,"children":2747},{"class":86,"line":982},[2748],{"type":19,"tag":84,"props":2749,"children":2750},{"style":91},[2751],{"type":24,"value":2752},"      else\n",{"type":19,"tag":84,"props":2754,"children":2755},{"class":86,"line":990},[2756,2761,2766],{"type":19,"tag":84,"props":2757,"children":2758},{"style":117},[2759],{"type":24,"value":2760},"         @inputTokens.",{"type":19,"tag":84,"props":2762,"children":2763},{"style":249},[2764],{"type":24,"value":2765},"push",{"type":19,"tag":84,"props":2767,"children":2768},{"style":117},[2769],{"type":24,"value":2770},"(token)\n",{"type":19,"tag":84,"props":2772,"children":2773},{"class":86,"line":998},[2774,2779,2783],{"type":19,"tag":84,"props":2775,"children":2776},{"style":117},[2777],{"type":24,"value":2778},"         @numEmptyTokensInARow ",{"type":19,"tag":84,"props":2780,"children":2781},{"style":91},[2782],{"type":24,"value":479},{"type":19,"tag":84,"props":2784,"children":2785},{"style":249},[2786],{"type":24,"value":2536},{"type":19,"tag":84,"props":2788,"children":2789},{"class":86,"line":1019},[2790],{"type":19,"tag":84,"props":2791,"children":2792},{"emptyLinePlaceholder":132},[2793],{"type":24,"value":135},{"type":19,"tag":84,"props":2795,"children":2796},{"class":86,"line":1027},[2797,2802,2806],{"type":19,"tag":84,"props":2798,"children":2799},{"style":97},[2800],{"type":24,"value":2801},"   parseTokens",{"type":19,"tag":84,"props":2803,"children":2804},{"style":91},[2805],{"type":24,"value":114},{"type":19,"tag":84,"props":2807,"children":2808},{"style":91},[2809],{"type":24,"value":2449},{"type":19,"tag":84,"props":2811,"children":2812},{"class":86,"line":1049},[2813,2817,2821,2825],{"type":19,"tag":84,"props":2814,"children":2815},{"style":91},[2816],{"type":24,"value":444},{"type":19,"tag":84,"props":2818,"children":2819},{"style":117},[2820],{"type":24,"value":2702},{"type":19,"tag":84,"props":2822,"children":2823},{"style":91},[2824],{"type":24,"value":2707},{"type":19,"tag":84,"props":2826,"children":2827},{"style":249},[2828],{"type":24,"value":2536},{"type":19,"tag":84,"props":2830,"children":2831},{"class":86,"line":1087},[2832,2837,2841,2846,2851,2855,2860],{"type":19,"tag":84,"props":2833,"children":2834},{"style":272},[2835],{"type":24,"value":2836},"         token",{"type":19,"tag":84,"props":2838,"children":2839},{"style":91},[2840],{"type":24,"value":280},{"type":19,"tag":84,"props":2842,"children":2843},{"style":117},[2844],{"type":24,"value":2845}," @key[@inputTokens.",{"type":19,"tag":84,"props":2847,"children":2848},{"style":249},[2849],{"type":24,"value":2850},"join",{"type":19,"tag":84,"props":2852,"children":2853},{"style":117},[2854],{"type":24,"value":789},{"type":19,"tag":84,"props":2856,"children":2857},{"style":179},[2858],{"type":24,"value":2859},"''",{"type":19,"tag":84,"props":2861,"children":2862},{"style":117},[2863],{"type":24,"value":2864},")]\n",{"type":19,"tag":84,"props":2866,"children":2867},{"class":86,"line":1095},[2868,2872,2876,2880,2884,2889,2893],{"type":19,"tag":84,"props":2869,"children":2870},{"style":117},[2871],{"type":24,"value":2610},{"type":19,"tag":84,"props":2873,"children":2874},{"style":97},[2875],{"type":24,"value":2723},{"type":19,"tag":84,"props":2877,"children":2878},{"style":117},[2879],{"type":24,"value":789},{"type":19,"tag":84,"props":2881,"children":2882},{"style":179},[2883],{"type":24,"value":2264},{"type":19,"tag":84,"props":2885,"children":2886},{"style":117},[2887],{"type":24,"value":2888},", token) ",{"type":19,"tag":84,"props":2890,"children":2891},{"style":91},[2892],{"type":24,"value":2624},{"type":19,"tag":84,"props":2894,"children":2895},{"style":117},[2896],{"type":24,"value":2629},{"type":19,"tag":84,"props":2898,"children":2899},{"class":86,"line":1108},[2900,2905,2910],{"type":19,"tag":84,"props":2901,"children":2902},{"style":117},[2903],{"type":24,"value":2904},"          token ",{"type":19,"tag":84,"props":2906,"children":2907},{"style":91},[2908],{"type":24,"value":2909},"!=",{"type":19,"tag":84,"props":2911,"children":2912},{"style":249},[2913],{"type":24,"value":2914}," undefined\n",{"type":19,"tag":84,"props":2916,"children":2917},{"class":86,"line":1117},[2918,2922,2926],{"type":19,"tag":84,"props":2919,"children":2920},{"style":117},[2921],{"type":24,"value":2527},{"type":19,"tag":84,"props":2923,"children":2924},{"style":91},[2925],{"type":24,"value":479},{"type":19,"tag":84,"props":2927,"children":2928},{"style":249},[2929],{"type":24,"value":2536},{"type":19,"tag":84,"props":2931,"children":2932},{"class":86,"line":1125},[2933,2938,2942],{"type":19,"tag":84,"props":2934,"children":2935},{"style":117},[2936],{"type":24,"value":2937},"      @inputTokens.length ",{"type":19,"tag":84,"props":2939,"children":2940},{"style":91},[2941],{"type":24,"value":479},{"type":19,"tag":84,"props":2943,"children":2944},{"style":249},[2945],{"type":24,"value":2536},{"type":19,"tag":20,"props":2947,"children":2948},{},[2949,2951,2956,2958,2963],{"type":24,"value":2950},"The Decoder model is responsible for determining what characters the user has sent across the line. The ",{"type":19,"tag":331,"props":2952,"children":2953},{},[2954],{"type":24,"value":2955},"processToken",{"type":24,"value":2957}," 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":19,"tag":331,"props":2959,"children":2960},{},[2961],{"type":24,"value":2962},"parsedCharacter",{"type":24,"value":2964}," event letting the message field know it needs to rerender itself.",{"type":19,"tag":20,"props":2966,"children":2967},{},[2968],{"type":19,"tag":331,"props":2969,"children":2970},{},[2971],{"type":19,"tag":335,"props":2972,"children":2973},{},[2974],{"type":24,"value":2975},"Decoder View",{"type":19,"tag":73,"props":2977,"children":2979},{"className":75,"code":2978,"language":77,"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",[2980],{"type":19,"tag":80,"props":2981,"children":2982},{"__ignoreMap":8},[2983,3003,3018,3042,3049,3069,3100,3131,3138,3182,3198,3219,3235,3257,3274,3328,3335,3393,3442,3449,3465,3481,3497,3522,3562,3591,3615,3655,3684],{"type":19,"tag":84,"props":2984,"children":2985},{"class":86,"line":87},[2986,2990,2995,2999],{"type":19,"tag":84,"props":2987,"children":2988},{"style":91},[2989],{"type":24,"value":94},{"type":19,"tag":84,"props":2991,"children":2992},{"style":97},[2993],{"type":24,"value":2994}," CommunicationLineView",{"type":19,"tag":84,"props":2996,"children":2997},{"style":91},[2998],{"type":24,"value":208},{"type":19,"tag":84,"props":3000,"children":3001},{"style":97},[3002],{"type":24,"value":2226},{"type":19,"tag":84,"props":3004,"children":3005},{"class":86,"line":103},[3006,3010,3014],{"type":19,"tag":84,"props":3007,"children":3008},{"style":97},[3009],{"type":24,"value":2234},{"type":19,"tag":84,"props":3011,"children":3012},{"style":91},[3013],{"type":24,"value":114},{"type":19,"tag":84,"props":3015,"children":3016},{"style":91},[3017],{"type":24,"value":229},{"type":19,"tag":84,"props":3019,"children":3020},{"class":86,"line":128},[3021,3025,3029,3033,3038],{"type":19,"tag":84,"props":3022,"children":3023},{"style":117},[3024],{"type":24,"value":2250},{"type":19,"tag":84,"props":3026,"children":3027},{"style":97},[3028],{"type":24,"value":2255},{"type":19,"tag":84,"props":3030,"children":3031},{"style":117},[3032],{"type":24,"value":789},{"type":19,"tag":84,"props":3034,"children":3035},{"style":179},[3036],{"type":24,"value":3037},"'hasNewData'",{"type":19,"tag":84,"props":3039,"children":3040},{"style":117},[3041],{"type":24,"value":2269},{"type":19,"tag":84,"props":3043,"children":3044},{"class":86,"line":138},[3045],{"type":19,"tag":84,"props":3046,"children":3047},{"emptyLinePlaceholder":132},[3048],{"type":24,"value":135},{"type":19,"tag":84,"props":3050,"children":3051},{"class":86,"line":160},[3052,3056,3060,3065],{"type":19,"tag":84,"props":3053,"children":3054},{"style":97},[3055],{"type":24,"value":2284},{"type":19,"tag":84,"props":3057,"children":3058},{"style":91},[3059],{"type":24,"value":114},{"type":19,"tag":84,"props":3061,"children":3062},{"style":117},[3063],{"type":24,"value":3064}," (tokens) ",{"type":19,"tag":84,"props":3066,"children":3067},{"style":91},[3068],{"type":24,"value":2298},{"type":19,"tag":84,"props":3070,"children":3071},{"class":86,"line":185},[3072,3077,3081,3086,3090,3095],{"type":19,"tag":84,"props":3073,"children":3074},{"style":272},[3075],{"type":24,"value":3076},"      context",{"type":19,"tag":84,"props":3078,"children":3079},{"style":91},[3080],{"type":24,"value":280},{"type":19,"tag":84,"props":3082,"children":3083},{"style":249},[3084],{"type":24,"value":3085}," document",{"type":19,"tag":84,"props":3087,"children":3088},{"style":117},[3089],{"type":24,"value":50},{"type":19,"tag":84,"props":3091,"children":3092},{"style":249},[3093],{"type":24,"value":3094},"getElementById",{"type":19,"tag":84,"props":3096,"children":3097},{"style":117},[3098],{"type":24,"value":3099},"(\n",{"type":19,"tag":84,"props":3101,"children":3102},{"class":86,"line":193},[3103,3108,3113,3118,3122,3127],{"type":19,"tag":84,"props":3104,"children":3105},{"style":179},[3106],{"type":24,"value":3107},"       \"communicationLineCanvas\"",{"type":19,"tag":84,"props":3109,"children":3110},{"style":117},[3111],{"type":24,"value":3112},").",{"type":19,"tag":84,"props":3114,"children":3115},{"style":249},[3116],{"type":24,"value":3117},"getContext",{"type":19,"tag":84,"props":3119,"children":3120},{"style":117},[3121],{"type":24,"value":789},{"type":19,"tag":84,"props":3123,"children":3124},{"style":179},[3125],{"type":24,"value":3126},"'2d'",{"type":19,"tag":84,"props":3128,"children":3129},{"style":117},[3130],{"type":24,"value":2329},{"type":19,"tag":84,"props":3132,"children":3133},{"class":86,"line":215},[3134],{"type":19,"tag":84,"props":3135,"children":3136},{"emptyLinePlaceholder":132},[3137],{"type":24,"value":135},{"type":19,"tag":84,"props":3139,"children":3140},{"class":86,"line":232},[3141,3146,3151,3155,3160,3164,3168,3173,3178],{"type":19,"tag":84,"props":3142,"children":3143},{"style":117},[3144],{"type":24,"value":3145},"      context.",{"type":19,"tag":84,"props":3147,"children":3148},{"style":97},[3149],{"type":24,"value":3150},"clearRect",{"type":19,"tag":84,"props":3152,"children":3153},{"style":117},[3154],{"type":24,"value":789},{"type":19,"tag":84,"props":3156,"children":3157},{"style":249},[3158],{"type":24,"value":3159},"0",{"type":19,"tag":84,"props":3161,"children":3162},{"style":117},[3163],{"type":24,"value":969},{"type":19,"tag":84,"props":3165,"children":3166},{"style":249},[3167],{"type":24,"value":3159},{"type":19,"tag":84,"props":3169,"children":3170},{"style":117},[3171],{"type":24,"value":3172},", context.canvas.width, ",{"type":19,"tag":84,"props":3174,"children":3175},{"style":249},[3176],{"type":24,"value":3177},"29",{"type":19,"tag":84,"props":3179,"children":3180},{"style":117},[3181],{"type":24,"value":2329},{"type":19,"tag":84,"props":3183,"children":3184},{"class":86,"line":245},[3185,3190,3194],{"type":19,"tag":84,"props":3186,"children":3187},{"style":272},[3188],{"type":24,"value":3189},"      tokenNum",{"type":19,"tag":84,"props":3191,"children":3192},{"style":91},[3193],{"type":24,"value":280},{"type":19,"tag":84,"props":3195,"children":3196},{"style":249},[3197],{"type":24,"value":2536},{"type":19,"tag":84,"props":3199,"children":3200},{"class":86,"line":260},[3201,3206,3210,3214],{"type":19,"tag":84,"props":3202,"children":3203},{"style":91},[3204],{"type":24,"value":3205},"      for",{"type":19,"tag":84,"props":3207,"children":3208},{"style":117},[3209],{"type":24,"value":2592},{"type":19,"tag":84,"props":3211,"children":3212},{"style":91},[3213],{"type":24,"value":423},{"type":19,"tag":84,"props":3215,"children":3216},{"style":117},[3217],{"type":24,"value":3218}," tokens\n",{"type":19,"tag":84,"props":3220,"children":3221},{"class":86,"line":268},[3222,3227,3231],{"type":19,"tag":84,"props":3223,"children":3224},{"style":91},[3225],{"type":24,"value":3226},"         do",{"type":19,"tag":84,"props":3228,"children":3229},{"style":117},[3230],{"type":24,"value":2293},{"type":19,"tag":84,"props":3232,"children":3233},{"style":91},[3234],{"type":24,"value":125},{"type":19,"tag":84,"props":3236,"children":3237},{"class":86,"line":297},[3238,3243,3248,3252],{"type":19,"tag":84,"props":3239,"children":3240},{"style":91},[3241],{"type":24,"value":3242},"            if",{"type":19,"tag":84,"props":3244,"children":3245},{"style":117},[3246],{"type":24,"value":3247}," kDotToken ",{"type":19,"tag":84,"props":3249,"children":3250},{"style":91},[3251],{"type":24,"value":2597},{"type":19,"tag":84,"props":3253,"children":3254},{"style":117},[3255],{"type":24,"value":3256}," token\n",{"type":19,"tag":84,"props":3258,"children":3259},{"class":86,"line":556},[3260,3265,3270],{"type":19,"tag":84,"props":3261,"children":3262},{"style":117},[3263],{"type":24,"value":3264},"               context.",{"type":19,"tag":84,"props":3266,"children":3267},{"style":97},[3268],{"type":24,"value":3269},"beginPath",{"type":19,"tag":84,"props":3271,"children":3272},{"style":117},[3273],{"type":24,"value":313},{"type":19,"tag":84,"props":3275,"children":3276},{"class":86,"line":574},[3277,3281,3286,3291,3296,3301,3306,3310,3315,3319,3324],{"type":19,"tag":84,"props":3278,"children":3279},{"style":117},[3280],{"type":24,"value":3264},{"type":19,"tag":84,"props":3282,"children":3283},{"style":249},[3284],{"type":24,"value":3285},"moveTo",{"type":19,"tag":84,"props":3287,"children":3288},{"style":117},[3289],{"type":24,"value":3290},"((",{"type":19,"tag":84,"props":3292,"children":3293},{"style":249},[3294],{"type":24,"value":3295},"50",{"type":19,"tag":84,"props":3297,"children":3298},{"style":91},[3299],{"type":24,"value":3300}," *",{"type":19,"tag":84,"props":3302,"children":3303},{"style":117},[3304],{"type":24,"value":3305}," tokenNum) ",{"type":19,"tag":84,"props":3307,"children":3308},{"style":91},[3309],{"type":24,"value":176},{"type":19,"tag":84,"props":3311,"children":3312},{"style":249},[3313],{"type":24,"value":3314}," 15",{"type":19,"tag":84,"props":3316,"children":3317},{"style":117},[3318],{"type":24,"value":969},{"type":19,"tag":84,"props":3320,"children":3321},{"style":249},[3322],{"type":24,"value":3323},"15",{"type":19,"tag":84,"props":3325,"children":3326},{"style":117},[3327],{"type":24,"value":2329},{"type":19,"tag":84,"props":3329,"children":3330},{"class":86,"line":600},[3331],{"type":19,"tag":84,"props":3332,"children":3333},{"emptyLinePlaceholder":132},[3334],{"type":24,"value":135},{"type":19,"tag":84,"props":3336,"children":3337},{"class":86,"line":617},[3338,3342,3347,3351,3355,3359,3363,3367,3371,3375,3379,3383,3388],{"type":19,"tag":84,"props":3339,"children":3340},{"style":117},[3341],{"type":24,"value":3264},{"type":19,"tag":84,"props":3343,"children":3344},{"style":97},[3345],{"type":24,"value":3346},"arc",{"type":19,"tag":84,"props":3348,"children":3349},{"style":117},[3350],{"type":24,"value":3290},{"type":19,"tag":84,"props":3352,"children":3353},{"style":249},[3354],{"type":24,"value":3295},{"type":19,"tag":84,"props":3356,"children":3357},{"style":91},[3358],{"type":24,"value":3300},{"type":19,"tag":84,"props":3360,"children":3361},{"style":117},[3362],{"type":24,"value":3305},{"type":19,"tag":84,"props":3364,"children":3365},{"style":91},[3366],{"type":24,"value":176},{"type":19,"tag":84,"props":3368,"children":3369},{"style":249},[3370],{"type":24,"value":3314},{"type":19,"tag":84,"props":3372,"children":3373},{"style":117},[3374],{"type":24,"value":969},{"type":19,"tag":84,"props":3376,"children":3377},{"style":249},[3378],{"type":24,"value":3323},{"type":19,"tag":84,"props":3380,"children":3381},{"style":117},[3382],{"type":24,"value":969},{"type":19,"tag":84,"props":3384,"children":3385},{"style":249},[3386],{"type":24,"value":3387},"10",{"type":19,"tag":84,"props":3389,"children":3390},{"style":117},[3391],{"type":24,"value":3392},", \n",{"type":19,"tag":84,"props":3394,"children":3395},{"class":86,"line":630},[3396,3401,3405,3410,3414,3419,3424,3429,3433,3438],{"type":19,"tag":84,"props":3397,"children":3398},{"style":249},[3399],{"type":24,"value":3400},"                0",{"type":19,"tag":84,"props":3402,"children":3403},{"style":117},[3404],{"type":24,"value":969},{"type":19,"tag":84,"props":3406,"children":3407},{"style":249},[3408],{"type":24,"value":3409},"Math",{"type":19,"tag":84,"props":3411,"children":3412},{"style":117},[3413],{"type":24,"value":50},{"type":19,"tag":84,"props":3415,"children":3416},{"style":249},[3417],{"type":24,"value":3418},"PI",{"type":19,"tag":84,"props":3420,"children":3421},{"style":91},[3422],{"type":24,"value":3423},"*",{"type":19,"tag":84,"props":3425,"children":3426},{"style":249},[3427],{"type":24,"value":3428},"2",{"type":19,"tag":84,"props":3430,"children":3431},{"style":117},[3432],{"type":24,"value":969},{"type":19,"tag":84,"props":3434,"children":3435},{"style":249},[3436],{"type":24,"value":3437},"false",{"type":19,"tag":84,"props":3439,"children":3440},{"style":117},[3441],{"type":24,"value":2329},{"type":19,"tag":84,"props":3443,"children":3444},{"class":86,"line":933},[3445],{"type":19,"tag":84,"props":3446,"children":3447},{"emptyLinePlaceholder":132},[3448],{"type":24,"value":135},{"type":19,"tag":84,"props":3450,"children":3451},{"class":86,"line":941},[3452,3456,3461],{"type":19,"tag":84,"props":3453,"children":3454},{"style":117},[3455],{"type":24,"value":3264},{"type":19,"tag":84,"props":3457,"children":3458},{"style":97},[3459],{"type":24,"value":3460},"closePath",{"type":19,"tag":84,"props":3462,"children":3463},{"style":117},[3464],{"type":24,"value":313},{"type":19,"tag":84,"props":3466,"children":3467},{"class":86,"line":982},[3468,3472,3477],{"type":19,"tag":84,"props":3469,"children":3470},{"style":117},[3471],{"type":24,"value":3264},{"type":19,"tag":84,"props":3473,"children":3474},{"style":97},[3475],{"type":24,"value":3476},"fill",{"type":19,"tag":84,"props":3478,"children":3479},{"style":117},[3480],{"type":24,"value":313},{"type":19,"tag":84,"props":3482,"children":3483},{"class":86,"line":990},[3484,3488,3493],{"type":19,"tag":84,"props":3485,"children":3486},{"style":117},[3487],{"type":24,"value":3264},{"type":19,"tag":84,"props":3489,"children":3490},{"style":97},[3491],{"type":24,"value":3492},"stroke",{"type":19,"tag":84,"props":3494,"children":3495},{"style":117},[3496],{"type":24,"value":313},{"type":19,"tag":84,"props":3498,"children":3499},{"class":86,"line":998},[3500,3505,3509,3514,3518],{"type":19,"tag":84,"props":3501,"children":3502},{"style":91},[3503],{"type":24,"value":3504},"            else",{"type":19,"tag":84,"props":3506,"children":3507},{"style":91},[3508],{"type":24,"value":2665},{"type":19,"tag":84,"props":3510,"children":3511},{"style":117},[3512],{"type":24,"value":3513}," kDashToken ",{"type":19,"tag":84,"props":3515,"children":3516},{"style":91},[3517],{"type":24,"value":2597},{"type":19,"tag":84,"props":3519,"children":3520},{"style":117},[3521],{"type":24,"value":3256},{"type":19,"tag":84,"props":3523,"children":3524},{"class":86,"line":1019},[3525,3529,3534,3538,3542,3546,3550,3554,3558],{"type":19,"tag":84,"props":3526,"children":3527},{"style":117},[3528],{"type":24,"value":3264},{"type":19,"tag":84,"props":3530,"children":3531},{"style":97},[3532],{"type":24,"value":3533},"fillRect",{"type":19,"tag":84,"props":3535,"children":3536},{"style":117},[3537],{"type":24,"value":3290},{"type":19,"tag":84,"props":3539,"children":3540},{"style":249},[3541],{"type":24,"value":3295},{"type":19,"tag":84,"props":3543,"children":3544},{"style":91},[3545],{"type":24,"value":3300},{"type":19,"tag":84,"props":3547,"children":3548},{"style":117},[3549],{"type":24,"value":3305},{"type":19,"tag":84,"props":3551,"children":3552},{"style":91},[3553],{"type":24,"value":176},{"type":19,"tag":84,"props":3555,"children":3556},{"style":249},[3557],{"type":24,"value":3314},{"type":19,"tag":84,"props":3559,"children":3560},{"style":117},[3561],{"type":24,"value":3392},{"type":19,"tag":84,"props":3563,"children":3564},{"class":86,"line":1027},[3565,3570,3574,3579,3583,3587],{"type":19,"tag":84,"props":3566,"children":3567},{"style":249},[3568],{"type":24,"value":3569},"                15",{"type":19,"tag":84,"props":3571,"children":3572},{"style":117},[3573],{"type":24,"value":969},{"type":19,"tag":84,"props":3575,"children":3576},{"style":249},[3577],{"type":24,"value":3578},"25",{"type":19,"tag":84,"props":3580,"children":3581},{"style":117},[3582],{"type":24,"value":969},{"type":19,"tag":84,"props":3584,"children":3585},{"style":249},[3586],{"type":24,"value":3387},{"type":19,"tag":84,"props":3588,"children":3589},{"style":117},[3590],{"type":24,"value":2329},{"type":19,"tag":84,"props":3592,"children":3593},{"class":86,"line":1049},[3594,3598,3602,3607,3611],{"type":19,"tag":84,"props":3595,"children":3596},{"style":91},[3597],{"type":24,"value":3504},{"type":19,"tag":84,"props":3599,"children":3600},{"style":91},[3601],{"type":24,"value":2665},{"type":19,"tag":84,"props":3603,"children":3604},{"style":117},[3605],{"type":24,"value":3606}," kWordStopToken ",{"type":19,"tag":84,"props":3608,"children":3609},{"style":91},[3610],{"type":24,"value":2597},{"type":19,"tag":84,"props":3612,"children":3613},{"style":117},[3614],{"type":24,"value":3256},{"type":19,"tag":84,"props":3616,"children":3617},{"class":86,"line":1087},[3618,3622,3626,3630,3634,3638,3642,3646,3651],{"type":19,"tag":84,"props":3619,"children":3620},{"style":117},[3621],{"type":24,"value":3264},{"type":19,"tag":84,"props":3623,"children":3624},{"style":97},[3625],{"type":24,"value":3533},{"type":19,"tag":84,"props":3627,"children":3628},{"style":117},[3629],{"type":24,"value":3290},{"type":19,"tag":84,"props":3631,"children":3632},{"style":249},[3633],{"type":24,"value":3295},{"type":19,"tag":84,"props":3635,"children":3636},{"style":91},[3637],{"type":24,"value":3300},{"type":19,"tag":84,"props":3639,"children":3640},{"style":117},[3641],{"type":24,"value":3305},{"type":19,"tag":84,"props":3643,"children":3644},{"style":91},[3645],{"type":24,"value":176},{"type":19,"tag":84,"props":3647,"children":3648},{"style":249},[3649],{"type":24,"value":3650}," 30",{"type":19,"tag":84,"props":3652,"children":3653},{"style":117},[3654],{"type":24,"value":3392},{"type":19,"tag":84,"props":3656,"children":3657},{"class":86,"line":1095},[3658,3663,3667,3671,3675,3680],{"type":19,"tag":84,"props":3659,"children":3660},{"style":249},[3661],{"type":24,"value":3662},"                5",{"type":19,"tag":84,"props":3664,"children":3665},{"style":117},[3666],{"type":24,"value":969},{"type":19,"tag":84,"props":3668,"children":3669},{"style":249},[3670],{"type":24,"value":3387},{"type":19,"tag":84,"props":3672,"children":3673},{"style":117},[3674],{"type":24,"value":969},{"type":19,"tag":84,"props":3676,"children":3677},{"style":249},[3678],{"type":24,"value":3679},"20",{"type":19,"tag":84,"props":3681,"children":3682},{"style":117},[3683],{"type":24,"value":2329},{"type":19,"tag":84,"props":3685,"children":3686},{"class":86,"line":1108},[3687,3692,3697],{"type":19,"tag":84,"props":3688,"children":3689},{"style":272},[3690],{"type":24,"value":3691},"            tokenNum",{"type":19,"tag":84,"props":3693,"children":3694},{"style":91},[3695],{"type":24,"value":3696}," +=",{"type":19,"tag":84,"props":3698,"children":3699},{"style":249},[3700],{"type":24,"value":3701}," 1\n",{"type":19,"tag":20,"props":3703,"children":3704},{},[3705,3707,3711],{"type":24,"value":3706},"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":19,"tag":331,"props":3708,"children":3709},{},[3710],{"type":24,"value":2962},{"type":24,"value":3712}," event, the Decoder view appends the parsed character to the end of its text box.",{"type":19,"tag":2002,"props":3714,"children":3715},{},[3716],{"type":24,"value":2006},{"title":8,"searchDepth":128,"depth":128,"links":3718},[],"content:rbrubaker:2012-06:coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2.md","rbrubaker/2012-06/coffee-backbone-2",{"user":2020,"name":2021},{"_path":3724,"_dir":2024,"_draft":7,"_partial":7,"_locale":8,"title":3725,"description":3726,"publishDate":3727,"tags":3728,"excerpt":3726,"body":3729,"_type":2013,"_id":5500,"_source":2015,"_file":5501,"_stem":5502,"_extension":2018,"author":5503},"/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",[2029,13,2030,2031],{"type":16,"children":3730,"toc":5498},[3731,3758,3767,3785,3790,3801,4178,4188,4199,4444,4455,4460,5031,5036,5047,5484,5489,5494],{"type":19,"tag":20,"props":3732,"children":3733},{},[3734,3739,3741,3747,3749,3756],{"type":19,"tag":27,"props":3735,"children":3737},{"href":65,"rel":3736},[31],[3738],{"type":24,"value":2044},{"type":24,"value":3740}," has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen ",{"type":19,"tag":27,"props":3742,"children":3745},{"href":3743,"rel":3744},"http://backbonejs.org",[31],[3746],{"type":24,"value":2053},{"type":24,"value":3748}," mentioned quite a bit and was even more intrigued after listening to this ",{"type":19,"tag":27,"props":3750,"children":3753},{"href":3751,"rel":3752},"http://www.dotnetrocks.com/default.aspx?showNum=743",[31],[3754],{"type":24,"value":3755},".NET Rocks podcast",{"type":24,"value":3757},". 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":19,"tag":20,"props":3759,"children":3760},{},[3761,3762,3766],{"type":24,"value":2080},{"type":19,"tag":27,"props":3763,"children":3764},{"href":2083},[3765],{"type":24,"value":2086},{"type":24,"value":50},{"type":19,"tag":20,"props":3768,"children":3769},{},[3770,3772,3777,3779,3784],{"type":24,"value":3771},"The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available ",{"type":19,"tag":27,"props":3773,"children":3775},{"href":2062,"rel":3774},[31],[3776],{"type":24,"value":2066},{"type":24,"value":3778}," and the running code can be seen ",{"type":19,"tag":27,"props":3780,"children":3782},{"href":2071,"rel":3781},[31],[3783],{"type":24,"value":2066},{"type":24,"value":50},{"type":19,"tag":20,"props":3786,"children":3787},{},[3788],{"type":24,"value":3789},"In this post I'll discuss the code that handles the user input.",{"type":19,"tag":20,"props":3791,"children":3792},{},[3793],{"type":19,"tag":331,"props":3794,"children":3795},{},[3796],{"type":19,"tag":335,"props":3797,"children":3798},{},[3799],{"type":24,"value":3800},"Initialization",{"type":19,"tag":73,"props":3802,"children":3804},{"className":75,"code":3803,"language":77,"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",[3805],{"type":19,"tag":80,"props":3806,"children":3807},{"__ignoreMap":8},[3808,3824,3845,3852,3877,3894,3901,3926,3956,3973,3980,4004,4032,4047,4054,4078,4106,4121,4128,4140,4147],{"type":19,"tag":84,"props":3809,"children":3810},{"class":86,"line":87},[3811,3816,3820],{"type":19,"tag":84,"props":3812,"children":3813},{"style":97},[3814],{"type":24,"value":3815},"init",{"type":19,"tag":84,"props":3817,"children":3818},{"style":91},[3819],{"type":24,"value":280},{"type":19,"tag":84,"props":3821,"children":3822},{"style":91},[3823],{"type":24,"value":229},{"type":19,"tag":84,"props":3825,"children":3826},{"class":86,"line":103},[3827,3832,3836,3840],{"type":19,"tag":84,"props":3828,"children":3829},{"style":272},[3830],{"type":24,"value":3831},"   decoder",{"type":19,"tag":84,"props":3833,"children":3834},{"style":91},[3835],{"type":24,"value":280},{"type":19,"tag":84,"props":3837,"children":3838},{"style":91},[3839],{"type":24,"value":285},{"type":19,"tag":84,"props":3841,"children":3842},{"style":97},[3843],{"type":24,"value":3844}," MorseDecoder\n",{"type":19,"tag":84,"props":3846,"children":3847},{"class":86,"line":128},[3848],{"type":19,"tag":84,"props":3849,"children":3850},{"emptyLinePlaceholder":132},[3851],{"type":24,"value":135},{"type":19,"tag":84,"props":3853,"children":3854},{"class":86,"line":138},[3855,3860,3864,3868,3873],{"type":19,"tag":84,"props":3856,"children":3857},{"style":272},[3858],{"type":24,"value":3859},"   communicationLine",{"type":19,"tag":84,"props":3861,"children":3862},{"style":91},[3863],{"type":24,"value":280},{"type":19,"tag":84,"props":3865,"children":3866},{"style":91},[3867],{"type":24,"value":285},{"type":19,"tag":84,"props":3869,"children":3870},{"style":97},[3871],{"type":24,"value":3872}," CommunicationLine",{"type":19,"tag":84,"props":3874,"children":3875},{"style":117},[3876],{"type":24,"value":3099},{"type":19,"tag":84,"props":3878,"children":3879},{"class":86,"line":160},[3880,3885,3889],{"type":19,"tag":84,"props":3881,"children":3882},{"style":179},[3883],{"type":24,"value":3884},"    'decoder'",{"type":19,"tag":84,"props":3886,"children":3887},{"style":91},[3888],{"type":24,"value":114},{"type":19,"tag":84,"props":3890,"children":3891},{"style":117},[3892],{"type":24,"value":3893}," decoder)\n",{"type":19,"tag":84,"props":3895,"children":3896},{"class":86,"line":185},[3897],{"type":19,"tag":84,"props":3898,"children":3899},{"emptyLinePlaceholder":132},[3900],{"type":24,"value":135},{"type":19,"tag":84,"props":3902,"children":3903},{"class":86,"line":193},[3904,3909,3913,3917,3922],{"type":19,"tag":84,"props":3905,"children":3906},{"style":272},[3907],{"type":24,"value":3908},"   straightKey",{"type":19,"tag":84,"props":3910,"children":3911},{"style":91},[3912],{"type":24,"value":280},{"type":19,"tag":84,"props":3914,"children":3915},{"style":91},[3916],{"type":24,"value":285},{"type":19,"tag":84,"props":3918,"children":3919},{"style":97},[3920],{"type":24,"value":3921}," StraightKeyInput",{"type":19,"tag":84,"props":3923,"children":3924},{"style":117},[3925],{"type":24,"value":3099},{"type":19,"tag":84,"props":3927,"children":3928},{"class":86,"line":215},[3929,3934,3938,3942,3946,3951],{"type":19,"tag":84,"props":3930,"children":3931},{"style":179},[3932],{"type":24,"value":3933},"    'el'",{"type":19,"tag":84,"props":3935,"children":3936},{"style":91},[3937],{"type":24,"value":114},{"type":19,"tag":84,"props":3939,"children":3940},{"style":97},[3941],{"type":24,"value":2315},{"type":19,"tag":84,"props":3943,"children":3944},{"style":117},[3945],{"type":24,"value":789},{"type":19,"tag":84,"props":3947,"children":3948},{"style":179},[3949],{"type":24,"value":3950},"'#straight-key-div'",{"type":19,"tag":84,"props":3952,"children":3953},{"style":117},[3954],{"type":24,"value":3955},"), \n",{"type":19,"tag":84,"props":3957,"children":3958},{"class":86,"line":232},[3959,3964,3968],{"type":19,"tag":84,"props":3960,"children":3961},{"style":179},[3962],{"type":24,"value":3963},"    'model'",{"type":19,"tag":84,"props":3965,"children":3966},{"style":91},[3967],{"type":24,"value":114},{"type":19,"tag":84,"props":3969,"children":3970},{"style":117},[3971],{"type":24,"value":3972}," communicationLine)\n",{"type":19,"tag":84,"props":3974,"children":3975},{"class":86,"line":245},[3976],{"type":19,"tag":84,"props":3977,"children":3978},{"emptyLinePlaceholder":132},[3979],{"type":24,"value":135},{"type":19,"tag":84,"props":3981,"children":3982},{"class":86,"line":260},[3983,3988,3992,3996,4000],{"type":19,"tag":84,"props":3984,"children":3985},{"style":272},[3986],{"type":24,"value":3987},"   communicationLineView",{"type":19,"tag":84,"props":3989,"children":3990},{"style":91},[3991],{"type":24,"value":280},{"type":19,"tag":84,"props":3993,"children":3994},{"style":91},[3995],{"type":24,"value":285},{"type":19,"tag":84,"props":3997,"children":3998},{"style":97},[3999],{"type":24,"value":2994},{"type":19,"tag":84,"props":4001,"children":4002},{"style":117},[4003],{"type":24,"value":3099},{"type":19,"tag":84,"props":4005,"children":4006},{"class":86,"line":268},[4007,4011,4015,4019,4023,4028],{"type":19,"tag":84,"props":4008,"children":4009},{"style":179},[4010],{"type":24,"value":3933},{"type":19,"tag":84,"props":4012,"children":4013},{"style":91},[4014],{"type":24,"value":114},{"type":19,"tag":84,"props":4016,"children":4017},{"style":97},[4018],{"type":24,"value":2315},{"type":19,"tag":84,"props":4020,"children":4021},{"style":117},[4022],{"type":24,"value":789},{"type":19,"tag":84,"props":4024,"children":4025},{"style":179},[4026],{"type":24,"value":4027},"'#communication-line-div'",{"type":19,"tag":84,"props":4029,"children":4030},{"style":117},[4031],{"type":24,"value":3955},{"type":19,"tag":84,"props":4033,"children":4034},{"class":86,"line":297},[4035,4039,4043],{"type":19,"tag":84,"props":4036,"children":4037},{"style":179},[4038],{"type":24,"value":3963},{"type":19,"tag":84,"props":4040,"children":4041},{"style":91},[4042],{"type":24,"value":114},{"type":19,"tag":84,"props":4044,"children":4045},{"style":117},[4046],{"type":24,"value":3972},{"type":19,"tag":84,"props":4048,"children":4049},{"class":86,"line":556},[4050],{"type":19,"tag":84,"props":4051,"children":4052},{"emptyLinePlaceholder":132},[4053],{"type":24,"value":135},{"type":19,"tag":84,"props":4055,"children":4056},{"class":86,"line":574},[4057,4062,4066,4070,4074],{"type":19,"tag":84,"props":4058,"children":4059},{"style":272},[4060],{"type":24,"value":4061},"   decoderView",{"type":19,"tag":84,"props":4063,"children":4064},{"style":91},[4065],{"type":24,"value":280},{"type":19,"tag":84,"props":4067,"children":4068},{"style":91},[4069],{"type":24,"value":285},{"type":19,"tag":84,"props":4071,"children":4072},{"style":97},[4073],{"type":24,"value":2217},{"type":19,"tag":84,"props":4075,"children":4076},{"style":117},[4077],{"type":24,"value":3099},{"type":19,"tag":84,"props":4079,"children":4080},{"class":86,"line":600},[4081,4085,4089,4093,4097,4102],{"type":19,"tag":84,"props":4082,"children":4083},{"style":179},[4084],{"type":24,"value":3933},{"type":19,"tag":84,"props":4086,"children":4087},{"style":91},[4088],{"type":24,"value":114},{"type":19,"tag":84,"props":4090,"children":4091},{"style":97},[4092],{"type":24,"value":2315},{"type":19,"tag":84,"props":4094,"children":4095},{"style":117},[4096],{"type":24,"value":789},{"type":19,"tag":84,"props":4098,"children":4099},{"style":179},[4100],{"type":24,"value":4101},"'messageBoxDiv'",{"type":19,"tag":84,"props":4103,"children":4104},{"style":117},[4105],{"type":24,"value":3955},{"type":19,"tag":84,"props":4107,"children":4108},{"class":86,"line":617},[4109,4113,4117],{"type":19,"tag":84,"props":4110,"children":4111},{"style":179},[4112],{"type":24,"value":3963},{"type":19,"tag":84,"props":4114,"children":4115},{"style":91},[4116],{"type":24,"value":114},{"type":19,"tag":84,"props":4118,"children":4119},{"style":117},[4120],{"type":24,"value":3893},{"type":19,"tag":84,"props":4122,"children":4123},{"class":86,"line":630},[4124],{"type":19,"tag":84,"props":4125,"children":4126},{"emptyLinePlaceholder":132},[4127],{"type":24,"value":135},{"type":19,"tag":84,"props":4129,"children":4130},{"class":86,"line":933},[4131,4136],{"type":19,"tag":84,"props":4132,"children":4133},{"style":97},[4134],{"type":24,"value":4135},"   drawSignalLine",{"type":19,"tag":84,"props":4137,"children":4138},{"style":117},[4139],{"type":24,"value":313},{"type":19,"tag":84,"props":4141,"children":4142},{"class":86,"line":941},[4143],{"type":19,"tag":84,"props":4144,"children":4145},{"emptyLinePlaceholder":132},[4146],{"type":24,"value":135},{"type":19,"tag":84,"props":4148,"children":4149},{"class":86,"line":982},[4150,4155,4159,4164,4168,4173],{"type":19,"tag":84,"props":4151,"children":4152},{"style":97},[4153],{"type":24,"value":4154},"$",{"type":19,"tag":84,"props":4156,"children":4157},{"style":117},[4158],{"type":24,"value":789},{"type":19,"tag":84,"props":4160,"children":4161},{"style":249},[4162],{"type":24,"value":4163},"document",{"type":19,"tag":84,"props":4165,"children":4166},{"style":117},[4167],{"type":24,"value":3112},{"type":19,"tag":84,"props":4169,"children":4170},{"style":97},[4171],{"type":24,"value":4172},"ready",{"type":19,"tag":84,"props":4174,"children":4175},{"style":117},[4176],{"type":24,"value":4177}," init\n",{"type":19,"tag":20,"props":4179,"children":4180},{},[4181,4182,4186],{"type":24,"value":62},{"type":19,"tag":331,"props":4183,"children":4184},{},[4185],{"type":24,"value":3815},{"type":24,"value":4187}," 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":19,"tag":20,"props":4189,"children":4190},{},[4191,4193,4197],{"type":24,"value":4192},"The ",{"type":19,"tag":331,"props":4194,"children":4195},{},[4196],{"type":24,"value":3815},{"type":24,"value":4198}," function also draws the \"communication line\" in a canvas element.",{"type":19,"tag":73,"props":4200,"children":4202},{"className":75,"code":4201,"language":77,"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",[4203],{"type":19,"tag":80,"props":4204,"children":4205},{"__ignoreMap":8},[4206,4222,4250,4278,4285,4317,4325,4332,4364,4397,4414,4429],{"type":19,"tag":84,"props":4207,"children":4208},{"class":86,"line":87},[4209,4214,4218],{"type":19,"tag":84,"props":4210,"children":4211},{"style":97},[4212],{"type":24,"value":4213},"drawSignalLine",{"type":19,"tag":84,"props":4215,"children":4216},{"style":91},[4217],{"type":24,"value":280},{"type":19,"tag":84,"props":4219,"children":4220},{"style":91},[4221],{"type":24,"value":229},{"type":19,"tag":84,"props":4223,"children":4224},{"class":86,"line":103},[4225,4230,4234,4238,4242,4246],{"type":19,"tag":84,"props":4226,"children":4227},{"style":272},[4228],{"type":24,"value":4229},"   context",{"type":19,"tag":84,"props":4231,"children":4232},{"style":91},[4233],{"type":24,"value":280},{"type":19,"tag":84,"props":4235,"children":4236},{"style":249},[4237],{"type":24,"value":3085},{"type":19,"tag":84,"props":4239,"children":4240},{"style":117},[4241],{"type":24,"value":50},{"type":19,"tag":84,"props":4243,"children":4244},{"style":249},[4245],{"type":24,"value":3094},{"type":19,"tag":84,"props":4247,"children":4248},{"style":117},[4249],{"type":24,"value":3099},{"type":19,"tag":84,"props":4251,"children":4252},{"class":86,"line":128},[4253,4258,4262,4266,4270,4274],{"type":19,"tag":84,"props":4254,"children":4255},{"style":179},[4256],{"type":24,"value":4257},"    \"communicationLineCanvas\"",{"type":19,"tag":84,"props":4259,"children":4260},{"style":117},[4261],{"type":24,"value":3112},{"type":19,"tag":84,"props":4263,"children":4264},{"style":249},[4265],{"type":24,"value":3117},{"type":19,"tag":84,"props":4267,"children":4268},{"style":117},[4269],{"type":24,"value":789},{"type":19,"tag":84,"props":4271,"children":4272},{"style":179},[4273],{"type":24,"value":3126},{"type":19,"tag":84,"props":4275,"children":4276},{"style":117},[4277],{"type":24,"value":2329},{"type":19,"tag":84,"props":4279,"children":4280},{"class":86,"line":138},[4281],{"type":19,"tag":84,"props":4282,"children":4283},{"emptyLinePlaceholder":132},[4284],{"type":24,"value":135},{"type":19,"tag":84,"props":4286,"children":4287},{"class":86,"line":160},[4288,4293,4297,4301,4305,4309,4313],{"type":19,"tag":84,"props":4289,"children":4290},{"style":117},[4291],{"type":24,"value":4292},"   context.",{"type":19,"tag":84,"props":4294,"children":4295},{"style":97},[4296],{"type":24,"value":3150},{"type":19,"tag":84,"props":4298,"children":4299},{"style":117},[4300],{"type":24,"value":789},{"type":19,"tag":84,"props":4302,"children":4303},{"style":249},[4304],{"type":24,"value":3159},{"type":19,"tag":84,"props":4306,"children":4307},{"style":117},[4308],{"type":24,"value":969},{"type":19,"tag":84,"props":4310,"children":4311},{"style":249},[4312],{"type":24,"value":3159},{"type":19,"tag":84,"props":4314,"children":4315},{"style":117},[4316],{"type":24,"value":3392},{"type":19,"tag":84,"props":4318,"children":4319},{"class":86,"line":185},[4320],{"type":19,"tag":84,"props":4321,"children":4322},{"style":117},[4323],{"type":24,"value":4324},"    context.canvas.width, context.canvas.height)\n",{"type":19,"tag":84,"props":4326,"children":4327},{"class":86,"line":193},[4328],{"type":19,"tag":84,"props":4329,"children":4330},{"emptyLinePlaceholder":132},[4331],{"type":24,"value":135},{"type":19,"tag":84,"props":4333,"children":4334},{"class":86,"line":215},[4335,4339,4343,4347,4351,4355,4360],{"type":19,"tag":84,"props":4336,"children":4337},{"style":117},[4338],{"type":24,"value":4292},{"type":19,"tag":84,"props":4340,"children":4341},{"style":249},[4342],{"type":24,"value":3285},{"type":19,"tag":84,"props":4344,"children":4345},{"style":117},[4346],{"type":24,"value":789},{"type":19,"tag":84,"props":4348,"children":4349},{"style":249},[4350],{"type":24,"value":3159},{"type":19,"tag":84,"props":4352,"children":4353},{"style":117},[4354],{"type":24,"value":969},{"type":19,"tag":84,"props":4356,"children":4357},{"style":249},[4358],{"type":24,"value":4359},"30",{"type":19,"tag":84,"props":4361,"children":4362},{"style":117},[4363],{"type":24,"value":2329},{"type":19,"tag":84,"props":4365,"children":4366},{"class":86,"line":232},[4367,4371,4376,4380,4385,4389,4393],{"type":19,"tag":84,"props":4368,"children":4369},{"style":117},[4370],{"type":24,"value":4292},{"type":19,"tag":84,"props":4372,"children":4373},{"style":97},[4374],{"type":24,"value":4375},"lineTo",{"type":19,"tag":84,"props":4377,"children":4378},{"style":117},[4379],{"type":24,"value":789},{"type":19,"tag":84,"props":4381,"children":4382},{"style":249},[4383],{"type":24,"value":4384},"500",{"type":19,"tag":84,"props":4386,"children":4387},{"style":117},[4388],{"type":24,"value":969},{"type":19,"tag":84,"props":4390,"children":4391},{"style":249},[4392],{"type":24,"value":4359},{"type":19,"tag":84,"props":4394,"children":4395},{"style":117},[4396],{"type":24,"value":2329},{"type":19,"tag":84,"props":4398,"children":4399},{"class":86,"line":245},[4400,4405,4409],{"type":19,"tag":84,"props":4401,"children":4402},{"style":117},[4403],{"type":24,"value":4404},"   context.strokeStyle ",{"type":19,"tag":84,"props":4406,"children":4407},{"style":91},[4408],{"type":24,"value":479},{"type":19,"tag":84,"props":4410,"children":4411},{"style":179},[4412],{"type":24,"value":4413}," \"#000\"\n",{"type":19,"tag":84,"props":4415,"children":4416},{"class":86,"line":260},[4417,4421,4425],{"type":19,"tag":84,"props":4418,"children":4419},{"style":117},[4420],{"type":24,"value":4292},{"type":19,"tag":84,"props":4422,"children":4423},{"style":97},[4424],{"type":24,"value":3460},{"type":19,"tag":84,"props":4426,"children":4427},{"style":117},[4428],{"type":24,"value":313},{"type":19,"tag":84,"props":4430,"children":4431},{"class":86,"line":268},[4432,4436,4440],{"type":19,"tag":84,"props":4433,"children":4434},{"style":117},[4435],{"type":24,"value":4292},{"type":19,"tag":84,"props":4437,"children":4438},{"style":97},[4439],{"type":24,"value":3492},{"type":19,"tag":84,"props":4441,"children":4442},{"style":117},[4443],{"type":24,"value":313},{"type":19,"tag":20,"props":4445,"children":4446},{},[4447],{"type":19,"tag":331,"props":4448,"children":4449},{},[4450],{"type":19,"tag":335,"props":4451,"children":4452},{},[4453],{"type":24,"value":4454},"Input View",{"type":19,"tag":20,"props":4456,"children":4457},{},[4458],{"type":24,"value":4459},"The application processes user input using the StraighKeyInput class, a Backbone view class associated with an input button:",{"type":19,"tag":73,"props":4461,"children":4465},{"className":4462,"code":4463,"language":4464,"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",[4466],{"type":19,"tag":80,"props":4467,"children":4468},{"__ignoreMap":8},[4469,4498,4505,4521,4542,4563,4583,4603,4610,4623,4645,4662,4669,4685,4719,4742,4759,4766,4782,4802,4809,4825,4844,4851,4867,4884,4902,4922,4938,4945,4961,4968,4981,4993,5012],{"type":19,"tag":84,"props":4470,"children":4471},{"class":86,"line":87},[4472,4476,4480,4484,4489,4493],{"type":19,"tag":84,"props":4473,"children":4474},{"style":91},[4475],{"type":24,"value":94},{"type":19,"tag":84,"props":4477,"children":4478},{"style":97},[4479],{"type":24,"value":3921},{"type":19,"tag":84,"props":4481,"children":4482},{"style":91},[4483],{"type":24,"value":208},{"type":19,"tag":84,"props":4485,"children":4486},{"style":97},[4487],{"type":24,"value":4488}," Backbone",{"type":19,"tag":84,"props":4490,"children":4491},{"style":117},[4492],{"type":24,"value":50},{"type":19,"tag":84,"props":4494,"children":4495},{"style":97},[4496],{"type":24,"value":4497},"View\n",{"type":19,"tag":84,"props":4499,"children":4500},{"class":86,"line":103},[4501],{"type":19,"tag":84,"props":4502,"children":4503},{"emptyLinePlaceholder":132},[4504],{"type":24,"value":135},{"type":19,"tag":84,"props":4506,"children":4507},{"class":86,"line":128},[4508,4512,4517],{"type":19,"tag":84,"props":4509,"children":4510},{"style":97},[4511],{"type":24,"value":2234},{"type":19,"tag":84,"props":4513,"children":4514},{"style":117},[4515],{"type":24,"value":4516},": ",{"type":19,"tag":84,"props":4518,"children":4519},{"style":91},[4520],{"type":24,"value":125},{"type":19,"tag":84,"props":4522,"children":4523},{"class":86,"line":138},[4524,4528,4533,4537],{"type":19,"tag":84,"props":4525,"children":4526},{"style":117},[4527],{"type":24,"value":2544},{"type":19,"tag":84,"props":4529,"children":4530},{"style":97},[4531],{"type":24,"value":4532},"dashTimer",{"type":19,"tag":84,"props":4534,"children":4535},{"style":91},[4536],{"type":24,"value":280},{"type":19,"tag":84,"props":4538,"children":4539},{"style":249},[4540],{"type":24,"value":4541}," null\n",{"type":19,"tag":84,"props":4543,"children":4544},{"class":86,"line":160},[4545,4549,4554,4558],{"type":19,"tag":84,"props":4546,"children":4547},{"style":117},[4548],{"type":24,"value":2544},{"type":19,"tag":84,"props":4550,"children":4551},{"style":97},[4552],{"type":24,"value":4553},"dashFlag",{"type":19,"tag":84,"props":4555,"children":4556},{"style":91},[4557],{"type":24,"value":280},{"type":19,"tag":84,"props":4559,"children":4560},{"style":249},[4561],{"type":24,"value":4562}," false\n",{"type":19,"tag":84,"props":4564,"children":4565},{"class":86,"line":185},[4566,4570,4575,4579],{"type":19,"tag":84,"props":4567,"children":4568},{"style":117},[4569],{"type":24,"value":2544},{"type":19,"tag":84,"props":4571,"children":4572},{"style":97},[4573],{"type":24,"value":4574},"wordStopTimer",{"type":19,"tag":84,"props":4576,"children":4577},{"style":91},[4578],{"type":24,"value":280},{"type":19,"tag":84,"props":4580,"children":4581},{"style":249},[4582],{"type":24,"value":4541},{"type":19,"tag":84,"props":4584,"children":4585},{"class":86,"line":193},[4586,4590,4595,4599],{"type":19,"tag":84,"props":4587,"children":4588},{"style":117},[4589],{"type":24,"value":2544},{"type":19,"tag":84,"props":4591,"children":4592},{"style":97},[4593],{"type":24,"value":4594},"wordStopFlag",{"type":19,"tag":84,"props":4596,"children":4597},{"style":91},[4598],{"type":24,"value":280},{"type":19,"tag":84,"props":4600,"children":4601},{"style":249},[4602],{"type":24,"value":4562},{"type":19,"tag":84,"props":4604,"children":4605},{"class":86,"line":215},[4606],{"type":19,"tag":84,"props":4607,"children":4608},{"emptyLinePlaceholder":132},[4609],{"type":24,"value":135},{"type":19,"tag":84,"props":4611,"children":4612},{"class":86,"line":232},[4613,4618],{"type":19,"tag":84,"props":4614,"children":4615},{"style":97},[4616],{"type":24,"value":4617},"   events",{"type":19,"tag":84,"props":4619,"children":4620},{"style":117},[4621],{"type":24,"value":4622},":\n",{"type":19,"tag":84,"props":4624,"children":4625},{"class":86,"line":245},[4626,4631,4635,4640],{"type":19,"tag":84,"props":4627,"children":4628},{"style":179},[4629],{"type":24,"value":4630},"      'mousedown #straight-key'",{"type":19,"tag":84,"props":4632,"children":4633},{"style":117},[4634],{"type":24,"value":4516},{"type":19,"tag":84,"props":4636,"children":4637},{"style":179},[4638],{"type":24,"value":4639},"'startTimers'",{"type":19,"tag":84,"props":4641,"children":4642},{"style":117},[4643],{"type":24,"value":4644},",\n",{"type":19,"tag":84,"props":4646,"children":4647},{"class":86,"line":260},[4648,4653,4657],{"type":19,"tag":84,"props":4649,"children":4650},{"style":179},[4651],{"type":24,"value":4652},"      'mouseup #straight-key'",{"type":19,"tag":84,"props":4654,"children":4655},{"style":117},[4656],{"type":24,"value":4516},{"type":19,"tag":84,"props":4658,"children":4659},{"style":179},[4660],{"type":24,"value":4661},"'sendUserInput'\n",{"type":19,"tag":84,"props":4663,"children":4664},{"class":86,"line":268},[4665],{"type":19,"tag":84,"props":4666,"children":4667},{"emptyLinePlaceholder":132},[4668],{"type":24,"value":135},{"type":19,"tag":84,"props":4670,"children":4671},{"class":86,"line":297},[4672,4677,4681],{"type":19,"tag":84,"props":4673,"children":4674},{"style":97},[4675],{"type":24,"value":4676},"   startTimers",{"type":19,"tag":84,"props":4678,"children":4679},{"style":117},[4680],{"type":24,"value":4516},{"type":19,"tag":84,"props":4682,"children":4683},{"style":91},[4684],{"type":24,"value":2298},{"type":19,"tag":84,"props":4686,"children":4687},{"class":86,"line":556},[4688,4692,4696,4700,4705,4710,4715],{"type":19,"tag":84,"props":4689,"children":4690},{"style":117},[4691],{"type":24,"value":2544},{"type":19,"tag":84,"props":4693,"children":4694},{"style":97},[4695],{"type":24,"value":4532},{"type":19,"tag":84,"props":4697,"children":4698},{"style":91},[4699],{"type":24,"value":280},{"type":19,"tag":84,"props":4701,"children":4702},{"style":97},[4703],{"type":24,"value":4704}," setTimeout",{"type":19,"tag":84,"props":4706,"children":4707},{"style":117},[4708],{"type":24,"value":4709},"(@dashTimerExpired, ",{"type":19,"tag":84,"props":4711,"children":4712},{"style":249},[4713],{"type":24,"value":4714},"250",{"type":19,"tag":84,"props":4716,"children":4717},{"style":117},[4718],{"type":24,"value":2329},{"type":19,"tag":84,"props":4720,"children":4721},{"class":86,"line":574},[4722,4726,4730,4734,4738],{"type":19,"tag":84,"props":4723,"children":4724},{"style":117},[4725],{"type":24,"value":2544},{"type":19,"tag":84,"props":4727,"children":4728},{"style":97},[4729],{"type":24,"value":4574},{"type":19,"tag":84,"props":4731,"children":4732},{"style":91},[4733],{"type":24,"value":280},{"type":19,"tag":84,"props":4735,"children":4736},{"style":97},[4737],{"type":24,"value":4704},{"type":19,"tag":84,"props":4739,"children":4740},{"style":117},[4741],{"type":24,"value":3099},{"type":19,"tag":84,"props":4743,"children":4744},{"class":86,"line":600},[4745,4750,4755],{"type":19,"tag":84,"props":4746,"children":4747},{"style":117},[4748],{"type":24,"value":4749},"       @wordStopTimerExpired, ",{"type":19,"tag":84,"props":4751,"children":4752},{"style":249},[4753],{"type":24,"value":4754},"1000",{"type":19,"tag":84,"props":4756,"children":4757},{"style":117},[4758],{"type":24,"value":2329},{"type":19,"tag":84,"props":4760,"children":4761},{"class":86,"line":617},[4762],{"type":19,"tag":84,"props":4763,"children":4764},{"emptyLinePlaceholder":132},[4765],{"type":24,"value":135},{"type":19,"tag":84,"props":4767,"children":4768},{"class":86,"line":630},[4769,4774,4778],{"type":19,"tag":84,"props":4770,"children":4771},{"style":97},[4772],{"type":24,"value":4773},"   dashTimerExpired",{"type":19,"tag":84,"props":4775,"children":4776},{"style":117},[4777],{"type":24,"value":4516},{"type":19,"tag":84,"props":4779,"children":4780},{"style":91},[4781],{"type":24,"value":2298},{"type":19,"tag":84,"props":4783,"children":4784},{"class":86,"line":933},[4785,4789,4793,4797],{"type":19,"tag":84,"props":4786,"children":4787},{"style":117},[4788],{"type":24,"value":2544},{"type":19,"tag":84,"props":4790,"children":4791},{"style":97},[4792],{"type":24,"value":4553},{"type":19,"tag":84,"props":4794,"children":4795},{"style":91},[4796],{"type":24,"value":280},{"type":19,"tag":84,"props":4798,"children":4799},{"style":249},[4800],{"type":24,"value":4801}," true\n",{"type":19,"tag":84,"props":4803,"children":4804},{"class":86,"line":941},[4805],{"type":19,"tag":84,"props":4806,"children":4807},{"emptyLinePlaceholder":132},[4808],{"type":24,"value":135},{"type":19,"tag":84,"props":4810,"children":4811},{"class":86,"line":982},[4812,4817,4821],{"type":19,"tag":84,"props":4813,"children":4814},{"style":97},[4815],{"type":24,"value":4816},"   wordStopTimerExpired",{"type":19,"tag":84,"props":4818,"children":4819},{"style":117},[4820],{"type":24,"value":4516},{"type":19,"tag":84,"props":4822,"children":4823},{"style":91},[4824],{"type":24,"value":2298},{"type":19,"tag":84,"props":4826,"children":4827},{"class":86,"line":990},[4828,4832,4836,4840],{"type":19,"tag":84,"props":4829,"children":4830},{"style":117},[4831],{"type":24,"value":2544},{"type":19,"tag":84,"props":4833,"children":4834},{"style":97},[4835],{"type":24,"value":4594},{"type":19,"tag":84,"props":4837,"children":4838},{"style":91},[4839],{"type":24,"value":280},{"type":19,"tag":84,"props":4841,"children":4842},{"style":249},[4843],{"type":24,"value":4801},{"type":19,"tag":84,"props":4845,"children":4846},{"class":86,"line":998},[4847],{"type":19,"tag":84,"props":4848,"children":4849},{"emptyLinePlaceholder":132},[4850],{"type":24,"value":135},{"type":19,"tag":84,"props":4852,"children":4853},{"class":86,"line":1019},[4854,4859,4863],{"type":19,"tag":84,"props":4855,"children":4856},{"style":97},[4857],{"type":24,"value":4858},"   sendUserInput",{"type":19,"tag":84,"props":4860,"children":4861},{"style":117},[4862],{"type":24,"value":4516},{"type":19,"tag":84,"props":4864,"children":4865},{"style":91},[4866],{"type":24,"value":2298},{"type":19,"tag":84,"props":4868,"children":4869},{"class":86,"line":1027},[4870,4874,4879],{"type":19,"tag":84,"props":4871,"children":4872},{"style":97},[4873],{"type":24,"value":444},{"type":19,"tag":84,"props":4875,"children":4876},{"style":117},[4877],{"type":24,"value":4878}," @",{"type":19,"tag":84,"props":4880,"children":4881},{"style":97},[4882],{"type":24,"value":4883},"wordStopFlag\n",{"type":19,"tag":84,"props":4885,"children":4886},{"class":86,"line":1049},[4887,4892,4897],{"type":19,"tag":84,"props":4888,"children":4889},{"style":117},[4890],{"type":24,"value":4891},"         @model.",{"type":19,"tag":84,"props":4893,"children":4894},{"style":97},[4895],{"type":24,"value":4896},"addToken",{"type":19,"tag":84,"props":4898,"children":4899},{"style":117},[4900],{"type":24,"value":4901},"(kWordStopToken)\n",{"type":19,"tag":84,"props":4903,"children":4904},{"class":86,"line":1087},[4905,4909,4913,4917],{"type":19,"tag":84,"props":4906,"children":4907},{"style":97},[4908],{"type":24,"value":2660},{"type":19,"tag":84,"props":4910,"children":4911},{"style":97},[4912],{"type":24,"value":2665},{"type":19,"tag":84,"props":4914,"children":4915},{"style":117},[4916],{"type":24,"value":4878},{"type":19,"tag":84,"props":4918,"children":4919},{"style":97},[4920],{"type":24,"value":4921},"dashFlag\n",{"type":19,"tag":84,"props":4923,"children":4924},{"class":86,"line":1095},[4925,4929,4933],{"type":19,"tag":84,"props":4926,"children":4927},{"style":117},[4928],{"type":24,"value":4891},{"type":19,"tag":84,"props":4930,"children":4931},{"style":97},[4932],{"type":24,"value":4896},{"type":19,"tag":84,"props":4934,"children":4935},{"style":117},[4936],{"type":24,"value":4937},"(kDashToken)\n",{"type":19,"tag":84,"props":4939,"children":4940},{"class":86,"line":1108},[4941],{"type":19,"tag":84,"props":4942,"children":4943},{"style":97},[4944],{"type":24,"value":2752},{"type":19,"tag":84,"props":4946,"children":4947},{"class":86,"line":1117},[4948,4952,4956],{"type":19,"tag":84,"props":4949,"children":4950},{"style":117},[4951],{"type":24,"value":4891},{"type":19,"tag":84,"props":4953,"children":4954},{"style":97},[4955],{"type":24,"value":4896},{"type":19,"tag":84,"props":4957,"children":4958},{"style":117},[4959],{"type":24,"value":4960},"(kDotToken)\n",{"type":19,"tag":84,"props":4962,"children":4963},{"class":86,"line":1125},[4964],{"type":19,"tag":84,"props":4965,"children":4966},{"emptyLinePlaceholder":132},[4967],{"type":24,"value":135},{"type":19,"tag":84,"props":4969,"children":4970},{"class":86,"line":1158},[4971,4976],{"type":19,"tag":84,"props":4972,"children":4973},{"style":97},[4974],{"type":24,"value":4975},"      clearTimeout",{"type":19,"tag":84,"props":4977,"children":4978},{"style":117},[4979],{"type":24,"value":4980},"(@dashTimer)\n",{"type":19,"tag":84,"props":4982,"children":4983},{"class":86,"line":1714},[4984,4988],{"type":19,"tag":84,"props":4985,"children":4986},{"style":97},[4987],{"type":24,"value":4975},{"type":19,"tag":84,"props":4989,"children":4990},{"style":117},[4991],{"type":24,"value":4992},"(@wordStopTimer)\n",{"type":19,"tag":84,"props":4994,"children":4995},{"class":86,"line":1722},[4996,5000,5004,5008],{"type":19,"tag":84,"props":4997,"children":4998},{"style":117},[4999],{"type":24,"value":2544},{"type":19,"tag":84,"props":5001,"children":5002},{"style":97},[5003],{"type":24,"value":4553},{"type":19,"tag":84,"props":5005,"children":5006},{"style":91},[5007],{"type":24,"value":280},{"type":19,"tag":84,"props":5009,"children":5010},{"style":249},[5011],{"type":24,"value":4562},{"type":19,"tag":84,"props":5013,"children":5014},{"class":86,"line":1747},[5015,5019,5023,5027],{"type":19,"tag":84,"props":5016,"children":5017},{"style":117},[5018],{"type":24,"value":2544},{"type":19,"tag":84,"props":5020,"children":5021},{"style":97},[5022],{"type":24,"value":4594},{"type":19,"tag":84,"props":5024,"children":5025},{"style":91},[5026],{"type":24,"value":280},{"type":19,"tag":84,"props":5028,"children":5029},{"style":249},[5030],{"type":24,"value":4562},{"type":19,"tag":20,"props":5032,"children":5033},{},[5034],{"type":24,"value":5035},"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":19,"tag":20,"props":5037,"children":5038},{},[5039],{"type":19,"tag":331,"props":5040,"children":5041},{},[5042],{"type":19,"tag":335,"props":5043,"children":5044},{},[5045],{"type":24,"value":5046},"Input Model",{"type":19,"tag":73,"props":5048,"children":5050},{"className":75,"code":5049,"language":77,"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",[5051],{"type":19,"tag":80,"props":5052,"children":5053},{"__ignoreMap":8},[5054,5073,5093,5109,5116,5132,5221,5228,5245,5267,5274,5294,5310,5317,5333,5360,5386,5393,5410,5453,5460],{"type":19,"tag":84,"props":5055,"children":5056},{"class":86,"line":87},[5057,5061,5065,5069],{"type":19,"tag":84,"props":5058,"children":5059},{"style":91},[5060],{"type":24,"value":94},{"type":19,"tag":84,"props":5062,"children":5063},{"style":97},[5064],{"type":24,"value":3872},{"type":19,"tag":84,"props":5066,"children":5067},{"style":91},[5068],{"type":24,"value":208},{"type":19,"tag":84,"props":5070,"children":5071},{"style":97},[5072],{"type":24,"value":2425},{"type":19,"tag":84,"props":5074,"children":5075},{"class":86,"line":103},[5076,5080,5084,5089],{"type":19,"tag":84,"props":5077,"children":5078},{"style":97},[5079],{"type":24,"value":2234},{"type":19,"tag":84,"props":5081,"children":5082},{"style":91},[5083],{"type":24,"value":114},{"type":19,"tag":84,"props":5085,"children":5086},{"style":117},[5087],{"type":24,"value":5088}," (options) ",{"type":19,"tag":84,"props":5090,"children":5091},{"style":91},[5092],{"type":24,"value":2298},{"type":19,"tag":84,"props":5094,"children":5095},{"class":86,"line":128},[5096,5101,5105],{"type":19,"tag":84,"props":5097,"children":5098},{"style":117},[5099],{"type":24,"value":5100},"      @inputQueue ",{"type":19,"tag":84,"props":5102,"children":5103},{"style":91},[5104],{"type":24,"value":479},{"type":19,"tag":84,"props":5106,"children":5107},{"style":117},[5108],{"type":24,"value":2519},{"type":19,"tag":84,"props":5110,"children":5111},{"class":86,"line":138},[5112],{"type":19,"tag":84,"props":5113,"children":5114},{"emptyLinePlaceholder":132},[5115],{"type":24,"value":135},{"type":19,"tag":84,"props":5117,"children":5118},{"class":86,"line":160},[5119,5124,5128],{"type":19,"tag":84,"props":5120,"children":5121},{"style":117},[5122],{"type":24,"value":5123},"      @communicationLine ",{"type":19,"tag":84,"props":5125,"children":5126},{"style":91},[5127],{"type":24,"value":479},{"type":19,"tag":84,"props":5129,"children":5130},{"style":117},[5131],{"type":24,"value":2629},{"type":19,"tag":84,"props":5133,"children":5134},{"class":86,"line":185},[5135,5140,5144,5148,5152,5156,5160,5164,5168,5172,5176,5180,5184,5188,5192,5196,5200,5204,5208,5212,5216],{"type":19,"tag":84,"props":5136,"children":5137},{"style":117},[5138],{"type":24,"value":5139},"       [",{"type":19,"tag":84,"props":5141,"children":5142},{"style":179},[5143],{"type":24,"value":2859},{"type":19,"tag":84,"props":5145,"children":5146},{"style":117},[5147],{"type":24,"value":969},{"type":19,"tag":84,"props":5149,"children":5150},{"style":179},[5151],{"type":24,"value":2859},{"type":19,"tag":84,"props":5153,"children":5154},{"style":117},[5155],{"type":24,"value":969},{"type":19,"tag":84,"props":5157,"children":5158},{"style":179},[5159],{"type":24,"value":2859},{"type":19,"tag":84,"props":5161,"children":5162},{"style":117},[5163],{"type":24,"value":969},{"type":19,"tag":84,"props":5165,"children":5166},{"style":179},[5167],{"type":24,"value":2859},{"type":19,"tag":84,"props":5169,"children":5170},{"style":117},[5171],{"type":24,"value":969},{"type":19,"tag":84,"props":5173,"children":5174},{"style":179},[5175],{"type":24,"value":2859},{"type":19,"tag":84,"props":5177,"children":5178},{"style":117},[5179],{"type":24,"value":969},{"type":19,"tag":84,"props":5181,"children":5182},{"style":179},[5183],{"type":24,"value":2859},{"type":19,"tag":84,"props":5185,"children":5186},{"style":117},[5187],{"type":24,"value":969},{"type":19,"tag":84,"props":5189,"children":5190},{"style":179},[5191],{"type":24,"value":2859},{"type":19,"tag":84,"props":5193,"children":5194},{"style":117},[5195],{"type":24,"value":969},{"type":19,"tag":84,"props":5197,"children":5198},{"style":179},[5199],{"type":24,"value":2859},{"type":19,"tag":84,"props":5201,"children":5202},{"style":117},[5203],{"type":24,"value":969},{"type":19,"tag":84,"props":5205,"children":5206},{"style":179},[5207],{"type":24,"value":2859},{"type":19,"tag":84,"props":5209,"children":5210},{"style":117},[5211],{"type":24,"value":969},{"type":19,"tag":84,"props":5213,"children":5214},{"style":179},[5215],{"type":24,"value":2859},{"type":19,"tag":84,"props":5217,"children":5218},{"style":117},[5219],{"type":24,"value":5220},"]\n",{"type":19,"tag":84,"props":5222,"children":5223},{"class":86,"line":193},[5224],{"type":19,"tag":84,"props":5225,"children":5226},{"emptyLinePlaceholder":132},[5227],{"type":24,"value":135},{"type":19,"tag":84,"props":5229,"children":5230},{"class":86,"line":215},[5231,5236,5240],{"type":19,"tag":84,"props":5232,"children":5233},{"style":117},[5234],{"type":24,"value":5235},"      @decoder ",{"type":19,"tag":84,"props":5237,"children":5238},{"style":91},[5239],{"type":24,"value":479},{"type":19,"tag":84,"props":5241,"children":5242},{"style":117},[5243],{"type":24,"value":5244}," options.decoder\n",{"type":19,"tag":84,"props":5246,"children":5247},{"class":86,"line":232},[5248,5253,5258,5263],{"type":19,"tag":84,"props":5249,"children":5250},{"style":249},[5251],{"type":24,"value":5252},"      setInterval",{"type":19,"tag":84,"props":5254,"children":5255},{"style":117},[5256],{"type":24,"value":5257},"(@moveDataOneStep, ",{"type":19,"tag":84,"props":5259,"children":5260},{"style":249},[5261],{"type":24,"value":5262},"100",{"type":19,"tag":84,"props":5264,"children":5265},{"style":117},[5266],{"type":24,"value":2329},{"type":19,"tag":84,"props":5268,"children":5269},{"class":86,"line":245},[5270],{"type":19,"tag":84,"props":5271,"children":5272},{"emptyLinePlaceholder":132},[5273],{"type":24,"value":135},{"type":19,"tag":84,"props":5275,"children":5276},{"class":86,"line":260},[5277,5282,5286,5290],{"type":19,"tag":84,"props":5278,"children":5279},{"style":97},[5280],{"type":24,"value":5281},"   addToken",{"type":19,"tag":84,"props":5283,"children":5284},{"style":91},[5285],{"type":24,"value":114},{"type":19,"tag":84,"props":5287,"children":5288},{"style":117},[5289],{"type":24,"value":2293},{"type":19,"tag":84,"props":5291,"children":5292},{"style":91},[5293],{"type":24,"value":2298},{"type":19,"tag":84,"props":5295,"children":5296},{"class":86,"line":268},[5297,5302,5306],{"type":19,"tag":84,"props":5298,"children":5299},{"style":117},[5300],{"type":24,"value":5301},"      @inputQueue.",{"type":19,"tag":84,"props":5303,"children":5304},{"style":249},[5305],{"type":24,"value":2765},{"type":19,"tag":84,"props":5307,"children":5308},{"style":117},[5309],{"type":24,"value":2770},{"type":19,"tag":84,"props":5311,"children":5312},{"class":86,"line":297},[5313],{"type":19,"tag":84,"props":5314,"children":5315},{"emptyLinePlaceholder":132},[5316],{"type":24,"value":135},{"type":19,"tag":84,"props":5318,"children":5319},{"class":86,"line":556},[5320,5325,5329],{"type":19,"tag":84,"props":5321,"children":5322},{"style":97},[5323],{"type":24,"value":5324},"   moveDataOneStep",{"type":19,"tag":84,"props":5326,"children":5327},{"style":91},[5328],{"type":24,"value":114},{"type":19,"tag":84,"props":5330,"children":5331},{"style":91},[5332],{"type":24,"value":2449},{"type":19,"tag":84,"props":5334,"children":5335},{"class":86,"line":574},[5336,5341,5345,5350,5355],{"type":19,"tag":84,"props":5337,"children":5338},{"style":117},[5339],{"type":24,"value":5340},"      @decoder.",{"type":19,"tag":84,"props":5342,"children":5343},{"style":97},[5344],{"type":24,"value":2955},{"type":19,"tag":84,"props":5346,"children":5347},{"style":117},[5348],{"type":24,"value":5349},"(@communicationLine.",{"type":19,"tag":84,"props":5351,"children":5352},{"style":249},[5353],{"type":24,"value":5354},"pop",{"type":19,"tag":84,"props":5356,"children":5357},{"style":117},[5358],{"type":24,"value":5359},"())\n",{"type":19,"tag":84,"props":5361,"children":5362},{"class":86,"line":600},[5363,5368,5372,5377,5382],{"type":19,"tag":84,"props":5364,"children":5365},{"style":272},[5366],{"type":24,"value":5367},"      nextToken",{"type":19,"tag":84,"props":5369,"children":5370},{"style":91},[5371],{"type":24,"value":280},{"type":19,"tag":84,"props":5373,"children":5374},{"style":117},[5375],{"type":24,"value":5376}," @inputQueue.",{"type":19,"tag":84,"props":5378,"children":5379},{"style":249},[5380],{"type":24,"value":5381},"shift",{"type":19,"tag":84,"props":5383,"children":5384},{"style":117},[5385],{"type":24,"value":313},{"type":19,"tag":84,"props":5387,"children":5388},{"class":86,"line":617},[5389],{"type":19,"tag":84,"props":5390,"children":5391},{"emptyLinePlaceholder":132},[5392],{"type":24,"value":135},{"type":19,"tag":84,"props":5394,"children":5395},{"class":86,"line":630},[5396,5401,5406],{"type":19,"tag":84,"props":5397,"children":5398},{"style":117},[5399],{"type":24,"value":5400},"      @communicationLine.",{"type":19,"tag":84,"props":5402,"children":5403},{"style":249},[5404],{"type":24,"value":5405},"unshift",{"type":19,"tag":84,"props":5407,"children":5408},{"style":117},[5409],{"type":24,"value":3099},{"type":19,"tag":84,"props":5411,"children":5412},{"class":86,"line":933},[5413,5418,5423,5428,5433,5438,5443,5448],{"type":19,"tag":84,"props":5414,"children":5415},{"style":91},[5416],{"type":24,"value":5417},"       if",{"type":19,"tag":84,"props":5419,"children":5420},{"style":249},[5421],{"type":24,"value":5422}," undefined",{"type":19,"tag":84,"props":5424,"children":5425},{"style":91},[5426],{"type":24,"value":5427}," ==",{"type":19,"tag":84,"props":5429,"children":5430},{"style":117},[5431],{"type":24,"value":5432}," nextToken ",{"type":19,"tag":84,"props":5434,"children":5435},{"style":91},[5436],{"type":24,"value":5437},"then",{"type":19,"tag":84,"props":5439,"children":5440},{"style":179},[5441],{"type":24,"value":5442}," ''",{"type":19,"tag":84,"props":5444,"children":5445},{"style":91},[5446],{"type":24,"value":5447}," else",{"type":19,"tag":84,"props":5449,"children":5450},{"style":117},[5451],{"type":24,"value":5452}," nextToken)\n",{"type":19,"tag":84,"props":5454,"children":5455},{"class":86,"line":941},[5456],{"type":19,"tag":84,"props":5457,"children":5458},{"emptyLinePlaceholder":132},[5459],{"type":24,"value":135},{"type":19,"tag":84,"props":5461,"children":5462},{"class":86,"line":982},[5463,5467,5471,5475,5479],{"type":19,"tag":84,"props":5464,"children":5465},{"style":117},[5466],{"type":24,"value":2544},{"type":19,"tag":84,"props":5468,"children":5469},{"style":97},[5470],{"type":24,"value":2723},{"type":19,"tag":84,"props":5472,"children":5473},{"style":117},[5474],{"type":24,"value":789},{"type":19,"tag":84,"props":5476,"children":5477},{"style":179},[5478],{"type":24,"value":3037},{"type":19,"tag":84,"props":5480,"children":5481},{"style":117},[5482],{"type":24,"value":5483},", @communicationLine)\n",{"type":19,"tag":20,"props":5485,"children":5486},{},[5487],{"type":24,"value":5488},"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":19,"tag":20,"props":5490,"children":5491},{},[5492],{"type":24,"value":5493},"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":19,"tag":2002,"props":5495,"children":5496},{},[5497],{"type":24,"value":2006},{"title":8,"searchDepth":128,"depth":128,"links":5499},[],"content:rbrubaker:2012-06:coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1.md","rbrubaker/2012-06/coffe-backbone-1",{"user":2020,"name":2021},1780330274329]