<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Egeste.NET</title>
	<atom:link href="http://egeste.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://egeste.net</link>
	<description>Terse ramblings of a javascript enthusiast</description>
	<lastBuildDate>Sun, 03 Feb 2013 18:38:17 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.6-beta3-24295</generator>
		<item>
		<title>A theoretically complete list of all zipcar ingress passcodes</title>
		<link>http://egeste.net/blog/2013/02/03/a-theoretically-complete-list-of-all-zipcar-ingress-passcodes/</link>
		<comments>http://egeste.net/blog/2013/02/03/a-theoretically-complete-list-of-all-zipcar-ingress-passcodes/#comments</comments>
		<pubDate>Sun, 03 Feb 2013 18:38:17 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=680</guid>
		<description><![CDATA[107NY3, 108NY3, 109NY3, 110NY3, 111NY3, 112NY3, 113NY3, 114NY3, 115NY3, 116NY3, 117NY3, 118NY3, 119NY3, 120NY3, 121NY3, 122NY3, 123NY3, 124NY3, 125NY3, 126NY3, 127NY3, 128NY3, 129NY3, 130NY3, 131NY3, 132NY3, 133NY3, 134NY3, 135NY3, 136NY3, 137NY3, 138NY3, 139NY3, 140NY3, 141NY3, 142NY3, 143NY3, 144NY3, 145NY3, 146NY3, 147NY3, 148NY3, 149NY3, 150NY3, 151NY3, 152NY3, 153NY3, 154NY3, 155NY3, 156NY3, 157NY3, 158NY3, 159NY3, 160NY3, 161NY3, &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2013/02/03/a-theoretically-complete-list-of-all-zipcar-ingress-passcodes/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p>107NY3,<br />
108NY3,<br />
109NY3,<br />
110NY3,<br />
111NY3,<br />
112NY3,<br />
113NY3,<br />
114NY3,<br />
115NY3,<br />
116NY3,<br />
117NY3,<br />
118NY3,<br />
119NY3,<br />
120NY3,<br />
121NY3,<br />
122NY3,<br />
123NY3,<br />
124NY3,<br />
125NY3,<br />
126NY3,<br />
127NY3,<br />
128NY3,<br />
129NY3,<br />
130NY3,<br />
131NY3,<br />
132NY3,<br />
133NY3,<br />
134NY3,<br />
135NY3,<br />
136NY3,<br />
137NY3,<br />
138NY3,<br />
139NY3,<br />
140NY3,<br />
141NY3,<br />
142NY3,<br />
143NY3,<br />
144NY3,<br />
145NY3,<br />
146NY3,<br />
147NY3,<br />
148NY3,<br />
149NY3,<br />
150NY3,<br />
151NY3,<br />
152NY3,<br />
153NY3,<br />
154NY3,<br />
155NY3,<br />
156NY3,<br />
157NY3,<br />
158NY3,<br />
159NY3,<br />
160NY3,<br />
161NY3,<br />
162NY3,<br />
163NY3,<br />
164NY3,<br />
165NY3,<br />
166NY3,<br />
167NY3,<br />
168NY3,<br />
169NY3,<br />
170NY3,<br />
171NY3,<br />
172NY3,<br />
173NY3,<br />
174NY3,<br />
175NY3,<br />
290TCR,<br />
291TCR,<br />
292TCR,<br />
293TCR,<br />
294TCR,<br />
295TCR,<br />
296TCR,<br />
297TCR,<br />
298TCR,<br />
299TCR,<br />
300TCR,<br />
301TCR,<br />
302TCR,<br />
303TCR,<br />
304TCR,<br />
305TCR,<br />
306TCR,<br />
307TCR,<br />
308TCR,<br />
309TCR,<br />
310TCR,<br />
311TCR,<br />
312TCR,<br />
313TCR,<br />
314TCR,<br />
315TCR,<br />
316TCR,<br />
317TCR,<br />
318TCR,<br />
319TCR,<br />
320TCR,<br />
321TCR,<br />
322TCR,<br />
323TCR,<br />
324TCR,<br />
325TCR,<br />
326TCR,<br />
ADU3492,<br />
ADU3493,<br />
ADU3494,<br />
ADU3495,<br />
ADU3496,<br />
ADU3497,<br />
ADU3498,<br />
ADU3499,<br />
ADU3500,<br />
ADU3501,<br />
ADU3502,<br />
ADU3503,<br />
ADU3504,<br />
ADU3505,<br />
ADU3506,<br />
ADU3507,<br />
ADU3508,<br />
ADU3509,<br />
ADU3510,<br />
ADU3511,<br />
ADU3512,<br />
ADU3513,<br />
ADU3514,<br />
ADU3515,<br />
ADU3516,<br />
FMN7278,<br />
FMN7279,<br />
FMN7280,<br />
FMN7281,<br />
FMN7282,<br />
FMN7283,<br />
FMN7284,<br />
FMN7285,<br />
FMN7286,<br />
FMN7287,<br />
FMN7288,<br />
FMN7289,<br />
FMN7290,<br />
FMN7291,<br />
FMN7292,<br />
FMN7293,<br />
FMN7294,<br />
FMN7295,<br />
FMN7296,<br />
FMN7297,<br />
FMN7298,<br />
FMN7299,<br />
FMN7300,<br />
FMN7301,<br />
FMN7302,<br />
FMN7303,<br />
FMN7304,<br />
FMN7305,<br />
FMN7306,<br />
FMN7307,<br />
FMN7308,<br />
FMN7309,<br />
FMN7310,<br />
FMN7311,<br />
FMN7312,<br />
FMN7313,<br />
FMN7314,<br />
FMN7315,<br />
FMN7316,<br />
FMN7317,<br />
FMN7318,<br />
FMN7319,<br />
FMN7320,<br />
FMN7321,<br />
FMN7322,<br />
FMN7323,<br />
FMN7324,<br />
FMN7325,<br />
FMN7326,<br />
FMN7327,<br />
FMN7328,<br />
FMN7329,<br />
FMN7330,<br />
FMN7331,<br />
FMN7332,<br />
FMN7333,<br />
FMN7334,<br />
FMN7335,<br />
FMN7336,<br />
FMN7337,<br />
FMN7338,<br />
FMN7339,<br />
FMN7340,<br />
FMN7341,<br />
FMN7342,<br />
FMN7343,<br />
FMN7344,<br />
FMN7345,<br />
FMN7346,<br />
FMN7347,<br />
FMN7348,<br />
FMN7349,<br />
FMN7350,<br />
FMN7351,<br />
FMN7352,<br />
FMN7353,<br />
FMN7354,<br />
FMN7355,<br />
FMN7356,<br />
FMN7357,<br />
FMN7358,<br />
FMN7359,<br />
FMN7360,<br />
FMN7361,<br />
FMN7362,<br />
FMN7363,<br />
FMN7364,<br />
FMN7365,<br />
FMN7366,<br />
FMN7367,<br />
FMN7368,<br />
FMN7369,<br />
FMN7370,<br />
FMN7371,<br />
FMN7372,<br />
FMN7373,<br />
FMN7374,<br />
FMN7375,<br />
FMN7376,<br />
FMN7377,<br />
FMN7378,<br />
FMN7379,<br />
FMN7380,<br />
FMN7381,<br />
FMN7382,<br />
FMN7383,<br />
FMN7384,<br />
FMN7385,<br />
FMN7386,<br />
FMN7387,<br />
FMN7388,<br />
FMN7389,<br />
FMN7390,<br />
FMN7391,<br />
FMN7392,<br />
FMN7393,<br />
FMN7394,<br />
FMN7395,<br />
FMN7396,<br />
FMN7397,<br />
FMN7398,<br />
FMN7399,<br />
FMN7400,<br />
FMN7401,<br />
FMN7402,<br />
FMN7403,<br />
FMN7404,<br />
FMN7405,<br />
FMN7406,<br />
FMN7407,<br />
FMN7408,<br />
FMN7409,<br />
FMN7410,<br />
FMN7411,<br />
FMN7412,<br />
FMN7413,<br />
FMN7414,<br />
FMN7415,<br />
FMN7416,<br />
FMN7417,<br />
FMN7418,<br />
FMN7419,<br />
FMN7420,<br />
FMN7421,<br />
FMN7422,<br />
FMN7423,<br />
FMN7424,<br />
FMN7425,<br />
FMN7426,<br />
FMN7427,<br />
FMN7428,<br />
FMN7429,<br />
FMN7430,<br />
FMN7431,<br />
FMN7432,<br />
FMN7433,<br />
FMN7434,<br />
FMN7435,<br />
FMN7436,<br />
FMN7437,<br />
FMN7438,<br />
FMN7439,<br />
FMN7440,<br />
FMN7441,<br />
FMN7442,<br />
FMN7443,<br />
FMN7444,<br />
FMN7445,<br />
FMN7446,<br />
FMN7447,<br />
FMN7448,<br />
FMN7449,<br />
FMN7450,<br />
FMN7451,<br />
FMN7452,<br />
FMN7453,<br />
FMN7454,<br />
FMN7455,<br />
FMN7456,<br />
FMN7457,<br />
FMN7458,<br />
FMN7459,<br />
FMN7460,<br />
FMN7461,<br />
FMN7462,<br />
FMN7463,<br />
FMN7464,<br />
FMN7465,<br />
FMN7466,<br />
FMN7467,<br />
FMN7468,<br />
FMN7469,<br />
FMN7470,<br />
FMN7471,<br />
FMN7472,<br />
FMN7473,<br />
FMN7474,<br />
FMN7475,<br />
FMN7476,<br />
FMN7477,<br />
FMN7478,<br />
FMN7479,<br />
FMN7480,<br />
FMN7481,<br />
FMN7482,<br />
FMN7483,<br />
FMN7484,<br />
FMN7485,<br />
FMN7486,<br />
FMN7487,<br />
FMN7488,<br />
FMN7489,<br />
FMN7490,<br />
FMN7491,<br />
FMN7492,<br />
FMN7493,<br />
FMN7494,<br />
FMN7495,<br />
FMN7496,<br />
FMN7497,<br />
FMN7498,<br />
FMN7499,<br />
FMN7500,<br />
FMN7501,<br />
FMN7502,<br />
FMN7503,<br />
FMN7504,<br />
FMN7505,<br />
FMN7506,<br />
FMN7507,<br />
FMN7508,<br />
FMN7509,<br />
FMN7510,<br />
FMN7511,<br />
FMN7512,<br />
FMN7513,<br />
FMN7514,<br />
FMN7515,<br />
FMN7516,<br />
FMN7517,<br />
FMN7518,<br />
FMN7519,<br />
FMN7520,<br />
FMN7521,<br />
FMN7522,<br />
FMN7523,<br />
FMN7524,<br />
FMN7525,<br />
FMN7526,<br />
FMN7527,<br />
FMN7528,<br />
FMN7529,<br />
FMN7530,<br />
FMN7531,<br />
FMN7532,<br />
FMN7533,<br />
FMN7534,<br />
FMN7535,<br />
FMN7536,<br />
FMN7537,<br />
FMN7538,<br />
FMN7539,<br />
FMN7540,<br />
FMN7541,<br />
FMN7542,<br />
FMN7543,<br />
FMN7544,<br />
FMN7545,<br />
FMN7546,<br />
FMN7547,<br />
FMN7548,<br />
FMN7549,<br />
FMN7550,<br />
FMN7551,<br />
FMN7552,<br />
FMN7553,<br />
FMN7554,<br />
FMN7555,<br />
FMN7556,<br />
FMN7557,<br />
FMN7558,<br />
FMN7559,<br />
FMN7560,<br />
FMN7561,<br />
FMN7562,<br />
FMN7563,<br />
FMN7564,<br />
FMN7565,<br />
FMN7566,<br />
FMN7567,<br />
FMN7568,<br />
FMN7569,<br />
FMN7570,<br />
FMN7571,<br />
FMN7572,<br />
FMN7573,<br />
FMN7574,<br />
FMN7575,<br />
FMN7576,<br />
FMN7577,<br />
FMN7578,<br />
FMN7579,<br />
FMN7580,<br />
FMN7581,<br />
FMN7582,<br />
FMN7583,<br />
FMN7584,<br />
FMN7585,<br />
FMN7586,<br />
FMN7587,<br />
FMN7588,<br />
FMN7589,<br />
FMN7590,<br />
FMN7591,<br />
FMN7592,<br />
FMN7593,<br />
FMN7594,<br />
FMN7595,<br />
FMN7596,<br />
FMN7597,<br />
FMN7598,<br />
FMN7599,<br />
FMN7600,<br />
FYD4500,<br />
FYD4501,<br />
FYD4502,<br />
FYD4503,<br />
FYD4504,<br />
FYD4505,<br />
FYD4506,<br />
FYD4507,<br />
FYD4508,<br />
FYD4509,<br />
FYD4510,<br />
FYD4511,<br />
FYD4512,<br />
FYD4513,<br />
FYD4514,<br />
FYD4515,<br />
FYD4516,<br />
FYD4517,<br />
FYD4518,<br />
FYD4519,<br />
FYD4520,<br />
FYD4521,<br />
FYD4522,<br />
FYD4523,<br />
FYD4524,<br />
FYD4525,<br />
FYD4526,<br />
FYD4527,<br />
FYD4528,<br />
FYD4529,<br />
FYD4530,<br />
FYD4531,<br />
FYD4532,<br />
FYD4533,<br />
FYD4534,<br />
FYD4535,<br />
FYD4536,<br />
FYD4537,<br />
FYD4538,<br />
FYD4539,<br />
FYD4540,<br />
FYD4541,<br />
FYD4542,<br />
FYD4543,<br />
FYD4544,<br />
FYD4545,<br />
FYD4546,<br />
FYD4547,<br />
FYD4548,<br />
FYD4549,<br />
FYD4550,<br />
FYD4551,<br />
FYD4552,<br />
FYD4553,<br />
FYD4554,<br />
FYD4555,<br />
FYD4556,<br />
FYD4557,<br />
FYD4558,<br />
FYD4559,<br />
FYD4560,<br />
FYD4561,<br />
FYD4562,<br />
FYD4563,<br />
FYD4564,<br />
FYD4565,<br />
FYD4566,<br />
FYD4567,<br />
FYD4568,<br />
FYD4569,<br />
FYD4570,<br />
FYD4571,<br />
FYD4572,<br />
FYD4573,<br />
FYD4574,<br />
FYD4575,<br />
FYD4576,<br />
FYD4577,<br />
FYD4578,<br />
FYD4579,<br />
FYD4580,<br />
FYD4581,<br />
FYD4582,<br />
FYD4583,<br />
FYD4584,<br />
FYD4585,<br />
FYD4586,<br />
FYD4587,<br />
FYD4588,<br />
FYD4589,<br />
FYD4590,<br />
FYD4591,<br />
FYD4592,<br />
FYD4593,<br />
FYD4594,<br />
FYD4595,<br />
FYD4596,<br />
FYD4597,<br />
FYD4598,<br />
FYD4599,<br />
FYD4600,<br />
FYD4601,<br />
FYD4602,<br />
FYD4603,<br />
FYD4604,<br />
FYD4605,<br />
FYD4606,<br />
FYD4607,<br />
FYD4608,<br />
FYD4609,<br />
FYD4610,<br />
FYD4611,<br />
FYD4612,<br />
FYD4613,<br />
FYD4614,<br />
FYD4615,<br />
FYD4616,<br />
FYD4617,<br />
FYD4618,<br />
FYD4619,<br />
FYD4620,<br />
FYD4621,<br />
FYD4622,<br />
FYD4623,<br />
FYD4624,<br />
FYD4625,<br />
FYD4626,<br />
FYD4627,<br />
FYD4628,<br />
FYD4629,<br />
FYD4630,<br />
FYD4631,<br />
FYD4632,<br />
FYD4633,<br />
FYD4634,<br />
FYD4635,<br />
FYD4636,<br />
FYD4637,<br />
FYD4638,<br />
FYD4639,<br />
FYD4640,<br />
FYD4641,<br />
FYD4642,<br />
FYD4643,<br />
FYD4644,<br />
FYD4645,<br />
FYD4646,<br />
FYD4647,<br />
FYD4648,<br />
FYD4649,<br />
FYD4650,<br />
FYD4651,<br />
FYD4652,<br />
FYD4653,<br />
FYD4654,<br />
FYD4655,<br />
FYD4656,<br />
FYD4657,<br />
FYD4658,<br />
FYD4659,<br />
FYD4660,<br />
FYD4661,<br />
FYD4662,<br />
FYD4663,<br />
FYD4664,<br />
FYD4665,<br />
FYD4666,<br />
FYD4667,<br />
FYD4668,<br />
FYD4669,<br />
FYD4670,<br />
FYD4671,<br />
FYD4672,<br />
FYD4673,<br />
FYD4674,<br />
FYD4675,<br />
FYD4676,<br />
FYD4677,<br />
FYD4678,<br />
FYD4679,<br />
FYD4680,<br />
FYD4681,<br />
FYD4682,<br />
FYD4683,<br />
FYD4684,<br />
FYD4685,<br />
FYD4686,<br />
FYD4687,<br />
FYD4688,<br />
FYD4689,<br />
FYD4690,<br />
FYD4691,<br />
FYD4692,<br />
FYD4693,<br />
FYD4694,<br />
FYD4695,<br />
FYD4696,<br />
FYD4697,<br />
FYD4698,<br />
FYD4699,<br />
FYD4700,<br />
FYD4701,<br />
FYD4702,<br />
FYD4703,<br />
FYD4704,<br />
FYD4705,<br />
FYD4706,<br />
FYD4707,<br />
FYD4708,<br />
FYD4709,<br />
FYD4710,<br />
FYD4711,<br />
FYD4712,<br />
FYD4713,<br />
FYD4714,<br />
FYD4715,<br />
FYD4716,<br />
FYD4717,<br />
FYD4718,<br />
FYD4719,<br />
FYD4720,<br />
FYD4721,<br />
FYD4722,<br />
FYD4723,<br />
FYD4724,<br />
FYD4725,<br />
FYD4726,<br />
FYD4727,<br />
FYD4728,<br />
FYD4729,<br />
FYD4730,<br />
FYD4731,<br />
FYD4732,<br />
FYD4733,<br />
FYD4734,<br />
FYD4735,<br />
FYD4736,<br />
FYD4737,<br />
FYD4738,<br />
FYD4739,<br />
FYD4740,<br />
FYD4741,<br />
FYD4742,<br />
FYD4743,<br />
FYD4744,<br />
FYD4745,<br />
FYD4746,<br />
FYD4747,<br />
FYD4748,<br />
FYD4749,<br />
FYD4750,<br />
FYD4751,<br />
FYD4752,<br />
FYD4753,<br />
FYD4754,<br />
FYD4755,<br />
FYD4756,<br />
FYD4757,<br />
FYD4758,<br />
FYD4759,<br />
FYD4760,<br />
FYD4761,<br />
FYD4762,<br />
FYD4763,<br />
FYD4764,<br />
FYD4765,<br />
FYD4766,<br />
FYD4767,<br />
FYD4768,<br />
FYD4769,<br />
FYD4770,<br />
FYD4771,<br />
FYD4772,<br />
FYD4773,<br />
FYD4774,<br />
FYD4775,<br />
FYD4776,<br />
FYD4777,<br />
FYD4778,<br />
FYD4779,<br />
FYD4780,<br />
FYD4781,<br />
FYD4782,<br />
FYD4783,<br />
FYD4784,<br />
FYD4785,<br />
FYD4786,<br />
FYD4787,<br />
FYD4788,<br />
FYD4789,<br />
FYD4790,<br />
FYD4791,<br />
FYD4792,<br />
FYD4793,<br />
FYD4794,<br />
FYD4795,<br />
FYD4796,<br />
FYD4797,<br />
FYD4798,<br />
FYD4799,<br />
FYD4800,<br />
FYD4801,<br />
FYD4802,<br />
FYD4803,<br />
FYD4804,<br />
FYD4805,<br />
FYD4806,<br />
FYD4807,<br />
FYD4808,<br />
FYD4809,<br />
FYD4810,<br />
FYD4811,<br />
FYD4812,<br />
FYD4813,<br />
FYD4814,<br />
FYD4815,<br />
FYD4816,<br />
FYD4817,<br />
FYD4818,<br />
FYD4819,<br />
FYD4820,<br />
FYD4821,<br />
FYD4822,<br />
FYD4823,<br />
FYD4824,<br />
FYD4825,<br />
FYD4975,<br />
FYD4976,<br />
FYD4977,<br />
FYD4978,<br />
FYD4979,<br />
FYD4980,<br />
FYD4981,<br />
FYD4982,<br />
FYD4983,<br />
FYD4984,<br />
FYD4985,<br />
FYD4986,<br />
FYD4987,<br />
FYD4988,<br />
FYD4989,<br />
FYD4990,<br />
FYD4991,<br />
FYD4992,<br />
FYD4993,<br />
FYD4994,<br />
FYD4995,<br />
FYD4996,<br />
FYD4997,<br />
FYD4998,<br />
FYD4999,<br />
FYD5000,<br />
FYD5001,<br />
FYD5002,<br />
FYD5003,<br />
FYD5004,<br />
FYD5005,<br />
FYD5006,<br />
FYD5007,<br />
FYD5008,<br />
FYD5009,<br />
FYD5010,<br />
FYD5011,<br />
FYD5012,<br />
FYD5013,<br />
FYD5014,<br />
FYD5015,<br />
FYD5016,<br />
FYD5017,<br />
FYD5018,<br />
FYD5019,<br />
FYD5020,<br />
FYD5021,<br />
FYD5022,<br />
FYD5023,<br />
FYD5024,<br />
FYD5025,<br />
FYD5026,<br />
FYD5027,<br />
FYD5028,<br />
FYD5029,<br />
FYD5030,<br />
FYD5031,<br />
FYD5032,<br />
FYD5033,<br />
FYD5034,<br />
FYD5035,<br />
FYD5036,<br />
FYD5037,<br />
FYD5038,<br />
FYD5039,<br />
FYD5040,<br />
FYD5041,<br />
FYD5042,<br />
FYD5043,<br />
FYD5044,<br />
FYD5045,<br />
FYD5046,<br />
FYD5047,<br />
FYD5048,<br />
FYD5049,<br />
FYD5050,<br />
FZG4650,<br />
FZG4651,<br />
FZG4652,<br />
FZG4653,<br />
FZG4654,<br />
FZG4655,<br />
FZG4656,<br />
FZG4657,<br />
FZG4658,<br />
FZG4659,<br />
FZG4660,<br />
FZG4661,<br />
FZG4662,<br />
FZG4663,<br />
FZG4664,<br />
FZG4665,<br />
FZG4666,<br />
FZG4667,<br />
FZG4668,<br />
FZG4669,<br />
FZG4670,<br />
FZG4671,<br />
FZG4672,<br />
FZG4673,<br />
FZG4674,<br />
FZG4675,<br />
FZG4676,<br />
FZG4677,<br />
FZG4678,<br />
FZG4679,<br />
FZG4680,<br />
FZG4681,<br />
FZG4682,<br />
FZG4683,<br />
FZG4684,<br />
FZG4685,<br />
FZG4686,<br />
FZG4687,<br />
FZG4688,<br />
FZG4689,<br />
FZG4690,<br />
FZG4691,<br />
FZG4692,<br />
FZG4693,<br />
FZG4694,<br />
FZG4695,<br />
FZG4696,<br />
FZG4697,<br />
FZG4698,<br />
FZG4699,<br />
FZG4700,<br />
FZG4701,<br />
FZG4702,<br />
FZG4703,<br />
FZG4704,<br />
FZG4705,<br />
FZG4706,<br />
FZG4707,<br />
FZG4708,<br />
FZG4709,<br />
FZG4710,<br />
FZG4711,<br />
FZG4712,<br />
FZG4713,<br />
FZG4714,<br />
FZG4715,<br />
FZG4716,<br />
FZG4717,<br />
FZG4718,<br />
FZG4719,<br />
FZG4720,<br />
FZG4721,<br />
FZG4722,<br />
FZG4723,<br />
FZG4724,<br />
FZG4725,<br />
FZG4726,<br />
FZG4727,<br />
FZG4728,<br />
FZG4729,<br />
FZG4730,<br />
FZG4731,<br />
FZG4732,<br />
FZG4733,<br />
FZG4734,<br />
FZG4735,<br />
FZG4736,<br />
FZG4737,<br />
FZG4738,<br />
FZG4739,<br />
FZG4740,<br />
FZG4741,<br />
FZG4742,<br />
FZG4743,<br />
FZG4744,<br />
FZG4745,<br />
FZG4746,<br />
FZG4747,<br />
FZG4748,<br />
FZG4749,<br />
FZG4750,<br />
FZG4751,<br />
FZG4752,<br />
FZG4753,<br />
FZG4754,<br />
FZG4755,<br />
FZG4756,<br />
FZG4757,<br />
FZG4758,<br />
FZG4759,<br />
FZG4760,<br />
FZG4761,<br />
FZG4762,<br />
FZG4763,<br />
FZG4764,<br />
FZG4765,<br />
FZG4766,<br />
FZG4767,<br />
FZG4768,<br />
FZG4769,<br />
FZG4770,<br />
FZG4771,<br />
FZG4772,<br />
FZG4773,<br />
FZG4774,<br />
FZG4775,<br />
FZG4776,<br />
FZG4777,<br />
FZG4778,<br />
FZG4779,<br />
FZG4780,<br />
FZG4781,<br />
FZG4782,<br />
FZG4783,<br />
FZG4784,<br />
FZG4785,<br />
FZG4786,<br />
FZG4787,<br />
FZG4788,<br />
FZG4789,<br />
FZG4790,<br />
FZG4791,<br />
FZG4792,<br />
FZG4793,<br />
FZG4794,<br />
FZG4795,<br />
FZG4796,<br />
FZG4797,<br />
FZG4798,<br />
FZG4799,<br />
FZG4800,<br />
FZG4801,<br />
FZG4802,<br />
FZG4803,<br />
FZG4804,<br />
FZG4805,<br />
FZG4806,<br />
FZG4807,<br />
FZG4808,<br />
FZG4809,<br />
FZG4810,<br />
FZG4811,<br />
FZG4812,<br />
FZG4813,<br />
FZG4814,<br />
FZG4815,<br />
FZG4816,<br />
FZG4817,<br />
FZG4818,<br />
FZG4819,<br />
FZG4820,<br />
FZG4821,<br />
FZG4822,<br />
FZG4823,<br />
FZG4824,<br />
FZG4825,<br />
FZG4826,<br />
FZG4827,<br />
FZG4828,<br />
FZG4829,<br />
FZG4830,<br />
FZG4831,<br />
FZG4832,<br />
FZG4833,<br />
FZG4834,<br />
FZG4835,<br />
FZG4836,<br />
FZG4837,<br />
FZG4838,<br />
FZG4839,<br />
FZG4840,<br />
FZG4841,<br />
FZG4842,<br />
FZG4843,<br />
FZG4844,<br />
FZG4845,<br />
FZG4846,<br />
FZG4847,<br />
FZG4848,<br />
FZG4849,<br />
FZG4850,<br />
FZG4851,<br />
FZG4852,<br />
FZG4853,<br />
FZG4854,<br />
FZG4855,<br />
FZG4856,<br />
FZG4857,<br />
FZG4858,<br />
FZG4859,<br />
FZG4860,<br />
FZG4861,<br />
FZG4862,<br />
FZG4863,<br />
FZG4864,<br />
FZG4865,<br />
FZG4866,<br />
FZG4867,<br />
FZG4868,<br />
FZG4869,<br />
FZG4870,<br />
FZG4871,<br />
FZG4872,<br />
FZG4873,<br />
FZG4874,<br />
FZG4875,<br />
FZG4876,<br />
FZG4877,<br />
FZG4878,<br />
FZG4879,<br />
FZG4880,<br />
FZG4881,<br />
FZG4882,<br />
FZG4883,<br />
FZG4884,<br />
FZG4885,<br />
FZG4886,<br />
FZG4887,<br />
FZG4888,<br />
FZG4889,<br />
FZG4890,<br />
FZG4891,<br />
FZG4892,<br />
FZG4893,<br />
FZG4894,<br />
FZG4895,<br />
FZG4896,<br />
FZG4897,<br />
FZG4898,<br />
FZG4899,<br />
FZG4900,<br />
FZG4901,<br />
FZG4902,<br />
FZG4903,<br />
FZG4904,<br />
FZG4905,<br />
FZG4906,<br />
FZG4907,<br />
FZG4908,<br />
FZG4909,<br />
FZG4910,<br />
FZG4911,<br />
FZG4912,<br />
FZG4913,<br />
FZG4914,<br />
FZG4915,<br />
FZG4916,<br />
FZG4917,<br />
FZG4918,<br />
FZG4919,<br />
FZG4920,<br />
FZG4921,<br />
FZG4922,<br />
FZG4923,<br />
FZG4924,<br />
FZG4925,<br />
FZG4926,<br />
FZG4927,<br />
FZG4928,<br />
FZG4929,<br />
FZG4930,<br />
FZG4931,<br />
FZG4932,<br />
FZG4933,<br />
FZG4934,<br />
FZG4935,<br />
FZG4936,<br />
FZG4937,<br />
FZG4938,<br />
FZG4939,<br />
FZG4940,<br />
FZG4941,<br />
FZG4942,<br />
FZG4943,<br />
FZG4944,<br />
FZG4945,<br />
FZG4946,<br />
FZG4947,<br />
FZG4948,<br />
FZG4949,<br />
FZG4950,<br />
FZG4951,<br />
FZG4952,<br />
FZG4953,<br />
FZG4954,<br />
FZG4955,<br />
FZG4956,<br />
FZG4957,<br />
FZG4958,<br />
FZG4959,<br />
FZG4960,<br />
FZG4961,<br />
FZG4962,<br />
FZG4963,<br />
FZG4964,<br />
FZG4965,<br />
FZG4966,<br />
FZG4967,<br />
FZG4968,<br />
FZG4969,<br />
FZG4970,<br />
GAH7940,<br />
GAH7941,<br />
GAH7942,<br />
GAH7943,<br />
GAH7944,<br />
GAH7945,<br />
GAH7946,<br />
GAH7947,<br />
GAH7948,<br />
GAH7949,<br />
GAH7950,<br />
GAH7951,<br />
GAH7952,<br />
GAH7953,<br />
GAH7954,<br />
GAH7955,<br />
GAH7956,<br />
GAH7957,<br />
GAH7958,<br />
GAH7959,<br />
GAH7960,<br />
GAH7961,<br />
GAH7962,<br />
GAH7963,<br />
GAH7964,<br />
GAH7965,<br />
GAH7966,<br />
GAH7967,<br />
GAH7968,<br />
GAH7969,<br />
GAH7970,<br />
GAH7971,<br />
GAH7972,<br />
GAH7973,<br />
GAH7974,<br />
GAH7975,<br />
GAH7976,<br />
GAH7977,<br />
GAH7978,<br />
GAH7979,<br />
GAH7980,<br />
GAH7981,<br />
GAH7982,<br />
GAH7983,<br />
GAH7984,<br />
GAH7985,<br />
GAH7986,<br />
GAH7987,<br />
GAH7988,<br />
GAH7989,<br />
GAH7990,<br />
GAH7991,<br />
GAH7992,<br />
GAH7993,<br />
GAH7994,<br />
GAH7995,<br />
GAH7996,<br />
GAH7997,<br />
GAH7998,<br />
GAH7999,<br />
GAH8000,<br />
GAH8001,<br />
GAH8002,<br />
GAH8003,<br />
GAH8004,<br />
GAH8005,<br />
GAH8006,<br />
GAH8007,<br />
GAH8008,<br />
GAH8009,<br />
GAH8010,<br />
GAH8011,<br />
GAH8012,<br />
GAH8013,<br />
GAH8014,<br />
GAH8015,<br />
GAH8016,<br />
GAH8017,<br />
GAH8018,<br />
GAH8019,<br />
GAH8020,<br />
GAH8021,<br />
GAH8022,<br />
GAH8023,<br />
GAH8024,<br />
GAH8025,<br />
GAH8026,<br />
GAH8027,<br />
GAH8028,<br />
GAH8029,<br />
GAH8030,<br />
GAH8031,<br />
GAH8032,<br />
GAH8033,<br />
GAH8034,<br />
GAH8035,<br />
GAH8036,<br />
GAH8037,<br />
GAH8038,<br />
GAH8039,<br />
GAH8040,<br />
GAH8041,<br />
GAH8042,<br />
GAH8043,<br />
GAH8044,<br />
GAH8045,<br />
GAH8046,<br />
GAH8047,<br />
GAH8048,<br />
GAH8049,<br />
GAH8050,<br />
GAH8051,<br />
GAH8052,<br />
GAH8053,<br />
GAH8054,<br />
GAH8055,<br />
GAH8056,<br />
GAH8057,<br />
GAH8058,<br />
GAH8059,<br />
GAH8060,<br />
GAH8061,<br />
GAH8062,<br />
GAH8063,<br />
GAH8064,<br />
GAH8065,<br />
GAH8066,<br />
GAH8067,<br />
GAH8068,<br />
GAH8069,<br />
GAH8070,<br />
GAH8071,<br />
GAH8072,<br />
GAH8073,<br />
GAH8074,<br />
GAH8075,<br />
GAH8076,<br />
GAH8077,<br />
GAH8078,<br />
GAH8079,<br />
GAH8080,<br />
GAH8081,<br />
GAH8082,<br />
GAH8083,<br />
GAH8084,<br />
GAH8085,<br />
GAH8086,<br />
GAH8087,<br />
GAH8088,<br />
GAH8089,<br />
GAH8090,<br />
GAH8091,<br />
GAH8092,<br />
GAH8093,<br />
GAH8094,<br />
GAH8095,<br />
GAH8096,<br />
GAH8097,<br />
GAH8098,<br />
GAH8099,<br />
GAH8100,<br />
GAH8101,<br />
GAH8102,<br />
GAH8103,<br />
GAH8104,<br />
GAH8105,<br />
GAH8106,<br />
GAH8107,<br />
GAH8108,<br />
GAH8109,<br />
GAH8110,<br />
GAH8111,<br />
GAH8112,<br />
GAH8113,<br />
GAH8114,<br />
GAH8115,<br />
GAH8116,<br />
GAH8117,<br />
GAH8118,<br />
GAH8119,<br />
GAH8120,<br />
GAH8121,<br />
GAH8122,<br />
GAH8123,<br />
GAH8124,<br />
GAH8125,<br />
GAH8126,<br />
GAH8127,<br />
GAH8128,<br />
GAH8129,<br />
GAH8130,<br />
GAH8131,<br />
GAH8132,<br />
GAH8133,<br />
GAH8134,<br />
GAH8135,<br />
GAH8136,<br />
GAH8137,<br />
GAH8138,<br />
GAH8139,<br />
HZZ7680,<br />
HZZ7681,<br />
HZZ7682,<br />
HZZ7683,<br />
HZZ7684,<br />
HZZ7685,<br />
HZZ7686,<br />
HZZ7687,<br />
HZZ7688,<br />
HZZ7689,<br />
HZZ7690,<br />
HZZ7691,<br />
HZZ7692,<br />
HZZ7693,<br />
HZZ7694,<br />
HZZ7695,<br />
HZZ7696,<br />
HZZ7697,<br />
HZZ7698,<br />
HZZ7699,<br />
6SNU690,<br />
6SNU691,<br />
6SNU692,<br />
6SNU693,<br />
6SNU694,<br />
6SNU695,<br />
6SNU696,<br />
6SNU697,<br />
6SNU698,<br />
6SNU699,<br />
6SNU700,<br />
6SNU701,<br />
6SNU702,<br />
6SNU703,<br />
6SNU704,<br />
6SNU705,<br />
6SNU706,<br />
6SNU707,<br />
6SNU708,<br />
6SNU709,<br />
6SNU710,<br />
6SNU711,<br />
6SNU712,<br />
6SNU713,<br />
6SNU714,<br />
6SNU715,<br />
6SNU716,<br />
6SNU717,<br />
6SNU718,<br />
6SNU719,<br />
6SNU720,<br />
6SNU721,<br />
6SNU722,<br />
6SNU723,<br />
6SNU724,<br />
6SNU725,<br />
6TEE314,<br />
6TEE315,<br />
6TEE316,<br />
6TEE317,<br />
6TEE318,<br />
6TEE319,<br />
6TEE320,<br />
6TEE321,<br />
6TEE322,<br />
6TEE323,<br />
6TEE324,<br />
6TEE325,<br />
6TEE326,<br />
6TEE327,<br />
6TEE328,<br />
6TEE329,<br />
6TEE330,<br />
6TEE331,<br />
6TEE332,<br />
6TEE333,<br />
6TEE334</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2013/02/03/a-theoretically-complete-list-of-all-zipcar-ingress-passcodes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Let&#8217;s bump Gangnam Style to 1 billion views</title>
		<link>http://egeste.net/blog/2012/12/19/lets-bump-gangname-style-to-1b-views/</link>
		<comments>http://egeste.net/blog/2012/12/19/lets-bump-gangname-style-to-1b-views/#comments</comments>
		<pubDate>Wed, 19 Dec 2012 04:24:36 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=640</guid>
		<description><![CDATA[This is a quick and dirty hack I threw together to loop Gangnam Style. Simply embed the code from the gist anywhere in your document body to get instant oppa. An elegant solution would implement youtube&#8217;s player api, but who has time for that?]]></description>
				<content:encoded><![CDATA[<p>This is a quick and dirty hack I threw together to loop Gangnam Style. Simply embed the code from the gist anywhere in your document body to get instant oppa. An elegant solution would implement youtube&#8217;s player api, but who has time for that?</p>
<p><script src="https://gist.github.com/raw/782998b3fdd8a9cefcca/f545cafdedae482610b7a904c9da77da7159b5d6/Gangnam%20Style.js"></script><br />
<script src="https://gist.github.com/782998b3fdd8a9cefcca.js"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2012/12/19/lets-bump-gangname-style-to-1b-views/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Backbone Pattern: Multi-state views</title>
		<link>http://egeste.net/blog/2012/10/24/backbone-pattern-multi-state-views/</link>
		<comments>http://egeste.net/blog/2012/10/24/backbone-pattern-multi-state-views/#comments</comments>
		<pubDate>Wed, 24 Oct 2012 17:41:29 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Abstract]]></category>
		<category><![CDATA[Backbone.js]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Design Patterns]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[Prototypal]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=611</guid>
		<description><![CDATA[This pattern if perfect for any view where you're presenting multiple sub views in the same space on the screen, such as paginated and tabbed views.]]></description>
				<content:encoded><![CDATA[<p>Views that have more than one state can be complex, and if not written correctly can lead to huge unmanageable blocks of logic attempting to determine exactly what state a view is in. If you don&#8217;t know what I mean by a &#8220;multi-state view&#8221;, consider the following requirements:</p>
<ol>
<li>Create a page with a visual header bar that has 2 options: list view, and tree view</li>
<li>List view is selected by default</li>
<li>When the user selects the list view option, the content underneath the header displays a list view of all items, and the header updates to indicate that the list view is selected</li>
<li>When the user selects the tree view option, the content underneath the header displays a tree view of all items, and the header updates to indicate that the tree view is selected</li>
<li>When the user selects an item from the list or tree view, the content underneath the header displays details about the selected item, and the header updates to indicate that no view is selected</li>
</ol>
<p>Right away, we&#8217;re talking about a pretty complex set of requirements. How can we make sure that we&#8217;re always showing the right thing in both the content area and in the header view? What if there are other views on the page that care about the state of the content view? First let&#8217;s take a look at one possible approach.</p>
<p>Note: we&#8217;re scoping these sub views within a closure. See: <a href="http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/">Backbone Pattern: Closure-scoped sub views</a></p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">var</span> HeaderView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    id<span style="color: #339933;">:</span> <span style="color: #3366CC;">'header'</span><span style="color: #339933;">,</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    setView<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>view<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.option.list'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #339933;">,</span> view <span style="color: #339933;">===</span> <span style="color: #3366CC;">'list'</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.option.tree'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #339933;">,</span> view <span style="color: #339933;">===</span> <span style="color: #3366CC;">'tree'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> RowView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a row */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> ListView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a bunch of rows */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> TreeView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a bunch of rows differently */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> ItemView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  exports.<span style="color: #660066;">PageView</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    events<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #3366CC;">'click #header.list'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_listView'</span><span style="color: #339933;">,</span>
      <span style="color: #3366CC;">'click #header.tree'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_treeView'</span><span style="color: #339933;">,</span>
      <span style="color: #3366CC;">'click .row'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_itemView'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createSubViews</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    createSubViews<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> HeaderView
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> ListView
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> TreeView
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">item</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> ItemView
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>._listView<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _listView<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.$el.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">item</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span>.<span style="color: #660066;">setView</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'list'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _treeView<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span>.$el.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">item</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span>.<span style="color: #660066;">setView</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tree'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _itemView<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">var</span> model <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'model'</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span>.$el.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">item</span>.<span style="color: #660066;">model</span> <span style="color: #339933;">=</span> model
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">item</span>.$el.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span>.<span style="color: #660066;">setView</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Phew! That&#8217;s a lot of difficult to maintain, repetitious, anti-pattern code. Let&#8217;s break down what exactly is wrong with this example.</p>
<ul>
<li>The events hash for the page view is attaching events to elements that belong to subviews. This is a classic backbone <a href="http://en.wikipedia.org/wiki/Code_smell" target="_blank">code smell</a>.</li>
<li>The page view is reaching into the sub views and modifying their elements.</li>
<li>The page view is reaching into the sub views and modifying its internal state.</li>
</ul>
<p>What do all these issues have in common? They all put the page view in a position of ultimate responsibility. It&#8217;s not the job of the page view to manage the internal state of every sub-view attached to it, and the repetition of code is a side effect. Additionally, this code is unnecessarily complex, making it prone to bugs, and more difficult to debug. I just wrote it, and I&#8217;m not even sure if it would work&#8230; Let&#8217;s try something else.</p>
<p>Note: We&#8217;re chaining update functions. See: <a href="http://egeste.net/blog/2012/10/24/backbone-pattern-chain-able-update-functions/">Backbone Pattern: Chain-able update functions</a></p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// Create a new instance of an extended backbone model with some defaults</span>
  <span style="color: #000066; font-weight: bold;">var</span> viewState <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="color: #009900;">&#40;</span>Backbone.<span style="color: #660066;">Model</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    defaults<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
      state<span style="color: #339933;">:</span> <span style="color: #3366CC;">'list'</span><span style="color: #339933;">,</span>
      model<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">undefined</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #006600; font-style: italic;">// Create a header view that presents and modifies the state attribute of</span>
  <span style="color: #006600; font-style: italic;">// the viewState model</span>
  <span style="color: #000066; font-weight: bold;">var</span> HeaderView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    events<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #3366CC;">'click .list'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_list'</span><span style="color: #339933;">,</span>
      <span style="color: #3366CC;">'click .tree'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_tree'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      viewState.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:state'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateOptions</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateOptions</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    updateOptions<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">var</span> state <span style="color: #339933;">=</span> viewState.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'state'</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.list'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #339933;">,</span> state <span style="color: #339933;">===</span> <span style="color: #3366CC;">'list'</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.tree'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #339933;">,</span> state <span style="color: #339933;">===</span> <span style="color: #3366CC;">'tree'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _list<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      viewState.<span style="color: #000066; font-weight: bold;">set</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'state'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'list'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _tree<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      viewState.<span style="color: #000066; font-weight: bold;">set</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'state'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'tree'</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #006600; font-style: italic;">// Create a view to present a row for an item and passes its model to</span>
  <span style="color: #006600; font-style: italic;">// viewState if clicked</span>
  <span style="color: #000066; font-weight: bold;">var</span> RowView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    events<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> <span style="color: #3366CC;">'click'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'_detail'</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a row */</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _detail<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      viewState.<span style="color: #000066; font-weight: bold;">set</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        state<span style="color: #339933;">:</span> <span style="color: #3366CC;">'detail'</span><span style="color: #339933;">,</span>
        model<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>
      <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> DetailView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render detail for a row */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> ListView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a bunch of rows */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">var</span> TreeView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* render a bunch of rows differently */</span><span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
  exports.<span style="color: #660066;">PageView</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #006600; font-style: italic;">// Add event listeners to specific attributes of the viewState</span>
      viewState.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:state'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateState</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createSubViews</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    createSubViews<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> HeaderView
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> ListView
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> TreeView
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
      <span style="color: #006600; font-style: italic;">// Attach the header to its anchor and render it</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">header</span>.<span style="color: #660066;">setElement</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.header'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #006600; font-style: italic;">// Attach the list and tree views to their anchor</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span>.<span style="color: #660066;">setElement</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span>.<span style="color: #660066;">setElement</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #006600; font-style: italic;">// Chain the updateState function</span>
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateState</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    updateState<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #006600; font-style: italic;">// Render the subviews based on state attribute of the viewState model</span>
      <span style="color: #006600; font-style: italic;">// When the sub-view gets rendered, it replaces its contents with new</span>
      <span style="color: #006600; font-style: italic;">// elements. Theoretically, we can attach an infinite number of views to</span>
      <span style="color: #006600; font-style: italic;">// a single element in this way, allowing us to have an unlimited number</span>
      <span style="color: #006600; font-style: italic;">// of possible view states</span>
      <span style="color: #000066; font-weight: bold;">var</span> state <span style="color: #339933;">=</span> viewState.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'state'</span><span style="color: #009900;">&#41;</span>
      state <span style="color: #339933;">===</span> <span style="color: #3366CC;">'list'</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">list</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      state <span style="color: #339933;">===</span> <span style="color: #3366CC;">'tree'</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">tree</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>state <span style="color: #339933;">===</span> <span style="color: #3366CC;">'detail'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">new</span> DetailView<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
          model<span style="color: #339933;">:</span> viewState.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'model'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
          el<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content'</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>What this has accomplished is actually significant:</p>
<ul>
<li>We now have a model that represents the state of the view in addition to the model it&#8217;s displaying (if we&#8217;re looking at a detail view).</li>
<li>There is proper delegation of responsibility (no view is modifying the internal state or dom of another view).</li>
<li>While it may not look like it because this is an example, we&#8217;ve actually reduced both the amount of code and the code complexity.</li>
<li>We&#8217;ve opened up our code to extensibility by making it trivial to add new view states, or remove existing ones.</li>
</ul>
<p>This pattern if perfect for any view where you&#8217;re presenting multiple sub views in the same space on the screen, such as paginated and tabbed views. Please feel free to comment with questions, comments, errata, etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2012/10/24/backbone-pattern-multi-state-views/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Backbone Pattern: Chain-able update functions</title>
		<link>http://egeste.net/blog/2012/10/24/backbone-pattern-chain-able-update-functions/</link>
		<comments>http://egeste.net/blog/2012/10/24/backbone-pattern-chain-able-update-functions/#comments</comments>
		<pubDate>Wed, 24 Oct 2012 05:55:53 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Abstract]]></category>
		<category><![CDATA[Backbone.js]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Design Patterns]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[Prototypal]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=548</guid>
		<description><![CDATA[How do you render a view to display all the information in its model, and only update specific elements as the model's attributes change?]]></description>
				<content:encoded><![CDATA[<p>Frequently, when you&#8217;re writing a complex view in Backbone.js, you need to update some aspect of the view due to a model change. However, this can get hairy when you have complex dom with javascript components, and simply re-rendering the view can create unusual or undesirable behavior in the view. Example:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">var</span> SomeView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">render</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input.foo'</span><span style="color: #009900;">&#41;</span>
      .<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
      .<span style="color: #660066;">datepicker</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.bar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'bar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>In this example we have a text input with the css class &#8220;foo&#8221;. This input is acting as an anchor for a date picker component. Assume that the date picker has a callback that changes the model&#8217;s foo attribute when a date is selected. In the event that the user focuses on this input field, the date picker component will display, allowing the user to select a date, and therefor alter the state of the model. When this occurs, the view will re-render, replacing the entire view&#8217;s dom structure, including the foo input field. Depending on the implementation details of date picker component, it may end up on the screen forever awaiting some event from the original foo input field. Even if this is not the case and the component doesn&#8217;t end up in some anomalous state, you&#8217;re still doing more work than is necessary by re-rendering the entire view and initializing new components.</p>
<blockquote><p>How do you render a view to display all the information in its model, and only update specific elements as the model&#8217;s attributes change?</p></blockquote>
<p>The pattern I discovered was to create a series of chain-able update functions for the affected model attributes.<br />
Example:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">var</span> SomeView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>
      .<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:foo'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateFoo</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
      .<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:bar'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateBar</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input.foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">datepicker</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
      .<span style="color: #660066;">updateFoo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      .<span style="color: #660066;">updateBar</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  updateFoo<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input.foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  updateBar<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.bar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'bar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>In the event that a model attribute changes that has implications for some other portion of the view, you can chain the updates within each other. For example, if foo changing means that something in bar&#8217;s update function should execute, you could write this:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">var</span> SomeView <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>
      .<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:foo'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateFoo</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
      .<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change:bar'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateBar</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input.foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">datepicker</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateFoo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  updateFoo<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input.foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateBar</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  updateBar<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.bar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">model</span>.<span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'bar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>Successfully using this pattern means:</p>
<ul>
<li>You should only ever have to render a view once</li>
<li>You should only ever have to initialize view components once</li>
<li>Your view is always up to date with the model&#8217;s state</li>
<li>The only dom that gets touched is the dom relevant to specific model attributes</li>
<li>You will end up with lighter, smaller, more maintainable code by not needing to handle a ton of edge cases in your render function</li>
</ul>
<p>Please feel free to comment with questions, comments, errata, etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2012/10/24/backbone-pattern-chain-able-update-functions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Backbone Pattern: Closure-scoped sub views</title>
		<link>http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/</link>
		<comments>http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/#comments</comments>
		<pubDate>Sat, 20 Oct 2012 19:23:06 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Abstract]]></category>
		<category><![CDATA[Backbone.js]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Design Patterns]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[Prototypal]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=550</guid>
		<description><![CDATA[This pattern is really about keeping your namespaced objects free from unnecessary clutter. The concept is simple: if a sub-view is never used anywhere else, it serves no purpose being accessible from the global scope. Keeping the subview locally scoped within a closure keeps your globally accessible namespaced objects from bloating out of control. Consider &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p>This pattern is really about keeping your namespaced objects free from unnecessary clutter. The concept is simple: if a sub-view is never used anywhere else, it serves no purpose being accessible from the global scope. Keeping the subview locally scoped within a closure keeps your globally accessible namespaced objects from bloating out of control. Consider the following scenario:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">views</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
window.<span style="color: #660066;">views</span>.<span style="color: #660066;">Home</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
window.<span style="color: #660066;">views</span>.<span style="color: #660066;">HomeContent</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
window.<span style="color: #660066;">views</span>.<span style="color: #660066;">SearchField</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
window.<span style="color: #660066;">views</span>.<span style="color: #660066;">About</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>We have an object in the global scope named views. Views is where we put all of our backbone views for various things, mostly complete page views and a handful of view components, etc. So let&#8217;s take a look at what the Home view might look like:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">views</span>.<span style="color: #660066;">Home</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  initialize<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createSubViews</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  createSubViews<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">contentView</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> window.<span style="color: #660066;">views</span>.<span style="color: #660066;">HomeContent</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">searchField</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> window.<span style="color: #660066;">views</span>.<span style="color: #660066;">SearchField</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  render<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.$el.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">searchField</span>.<span style="color: #660066;">setElement</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.search'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">contentView</span>.<span style="color: #660066;">setElement</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>This is all well and good and will work just fine, but if you look at the list of views you&#8217;ll notice that the HomeContent view is only really relevant to the Home view. While it&#8217;s possible that the About view may want to have a search field it&#8217;s not at all likely that the About view is going to render the homepage content. The HomeContent view is superfluous in the top-level views namespace and collecting these subviews here over time will lead to massive bloat in this object. To solve this, simply scope sub-views into a closure with the parent view.</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>views<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">var</span> Content <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// this is locally scoped</span>
  views.<span style="color: #660066;">Home</span> <span style="color: #339933;">=</span> Backbone.<span style="color: #660066;">View</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-style: italic;">/* ... */</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// this is exported to window.views</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">views</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>Locally scoping the views in this way serves two purposes. First, it keeps these non-reusable out of the top level object, and second it keeps code relevant to the parent view in the same file and easy to access/find. Using this strategy you should find that your code for these sub views is easier to maintain and more approachable by other developers. Please feel free to comment with questions, comments, errata, etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Migrating your turntable.fm playlist to plug.dj</title>
		<link>http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/</link>
		<comments>http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/#comments</comments>
		<pubDate>Sat, 08 Sep 2012 03:33:03 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Culture]]></category>
		<category><![CDATA[Music]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=522</guid>
		<description><![CDATA[I discovered a service somewhat similar to turntable.fm called plug.dj and was delighted to discover that they offer the ability to import playlist files generated by (the now retired) ttTools. In my opinion, that kind of cross-service data freedom embodies the same hacker-ethos that inspired ttTools to begin with. So with that in mind, I &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p>I discovered a service somewhat similar to <a href="http://turntable.fm/" target="_blank">turntable.fm</a> called <a href="http://plug.dj/" title="Plug.DJ" target="_blank">plug.dj</a> and was delighted to discover that they offer the ability to import playlist files generated by (the now retired) <a href="https://github.com/egeste/ttTools" title="ttTools" target="_blank">ttTools</a>. In my opinion, that kind of cross-service data freedom embodies the same hacker-ethos that inspired ttTools to begin with. So with that in mind, I wanted to make the export functionality available outside of ttTools and provide a step-by-step guide for those who wish to transfer their turntable.fm playlist over to plug.dj.</p>
<p><a href="javascript:window.location.href='data:application/octet-stream;charset=utf-8,'+JSON.stringify(turntable.playlist.songsByFid);" alt="Export turntable.fm playlist" style="background:url(http://egeste.net/wp-content/uploads/2012/09/tt-pdj.png );width:408px;height:148px;display:block;margin:auto;text-indent:-500px;overflow:hidden;">Export Playlist</a></p>

<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/drag-link/' title='Drag the link to your bookmarks toolbar'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/drag-link-150x150.png" class="attachment-thumbnail" alt="Drag the link to your bookmarks toolbar" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/click-export/' title='Go to any turntable room and click the bookmark'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/click-export-150x150.png" class="attachment-thumbnail" alt="Go to any turntable room and click the bookmark" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/download/' title='This will download your playlist as a file named &quot;download&quot;'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/download-150x150.png" class="attachment-thumbnail" alt="This will download your playlist as a file named &quot;download&quot;" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/click-my-playlists/' title='Click &quot;My Playlists&quot;'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/click-my-playlists-150x150.png" class="attachment-thumbnail" alt="Click &quot;My Playlists&quot;" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/click-import-playlist/' title='Click &quot;Import Playlist&quot;'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/click-import-playlist-150x150.png" class="attachment-thumbnail" alt="Click &quot;Import Playlist&quot;" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/turntable-import/' title='Click &quot;Turntable Import&quot;'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/turntable-import-150x150.png" class="attachment-thumbnail" alt="Click &quot;Turntable Import&quot;" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/select-file/' title='Select the file you downloaded'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/select-file-150x150.png" class="attachment-thumbnail" alt="Select the file you downloaded" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/click-import/' title='Click &quot;Import&quot;'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/click-import-150x150.png" class="attachment-thumbnail" alt="Click &quot;Import&quot;" /></a>
<a href='http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/importing/' title='Viola, your playlist should be importing'><img width="150" height="150" src="http://egeste.net/wp-content/uploads/2012/09/importing-150x150.png" class="attachment-thumbnail" alt="Viola, your playlist should be importing" /></a>

]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2012/09/08/migrating-your-turntable-fm-playlist-to-plug-dj/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Step By Step: How to root the Motorola I1</title>
		<link>http://egeste.net/blog/2011/08/30/step-by-step-how-to-root-the-motorola-i1/</link>
		<comments>http://egeste.net/blog/2011/08/30/step-by-step-how-to-root-the-motorola-i1/#comments</comments>
		<pubDate>Tue, 30 Aug 2011 14:36:23 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Devices]]></category>
		<category><![CDATA[Featured]]></category>

		<guid isPermaLink="false">http://egeste.net/?p=352</guid>
		<description><![CDATA[One of my friends came to me and asked if I would help her root her Motorola I1. Always up to help friends liberate their devices, I told her I would, then set out on my google quest to find all the resources this process would require. As is usually the case with unpopular, niche, &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2011/08/30/step-by-step-how-to-root-the-motorola-i1/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p>One of my friends came to me and asked if I would help her root her Motorola I1. Always up to help friends liberate their devices, I told her I would, then set out on my google quest to find all the resources this process would require. As is usually the case with unpopular, niche, or older devices like the Motorola I1, there was a lot of non-working scripts and a hefty handful of misguidance. This article is intended to replace other articles on the subject. Hopefully, you found this article first and didn&#8217;t have to waste too much of your time messing around with the others. This article is accurate as of the date it was written. I can&#8217;t make any guarantees that the reptilian overlords at Motorola haven&#8217;t added some kind of horrible phone-bricking code to prevent this method.</p>
<p><strong><em>Caution:</em></strong> You <strong>must</strong> know how to use the command line to do this. I provide no guarantees and cannot be held liable for any damage that may occur to your phone by following this guide. This is for informational purposes only.</p>
<p><strong>Step 1. Install the android sdk</strong><br />
I won&#8217;t go into this in detail. There are maintained &#038; updated instructions at <a href="http://developer.android.com/sdk/installing.html#Installing" target="_blank">http://developer.android.com/sdk/installing.html#Installing</a></p>
<p><strong>Step 2. Enable USB debugging on your phone</strong><br />
An excerpt from: <a href="http://developer.android.com/guide/developing/device.html" target="_blank">http://developer.android.com/guide/developing/device.html</a></p>
<blockquote><p>Turn on &#8220;USB Debugging&#8221; on your device.<br />
On the device, go to Settings > Applications > Development and enable USB debugging.</p></blockquote>
<p>Once this is complete, plug your phone into your computer via your USB cable.</p>
<p><strong>Step 3. Get the files</strong><br />
The files are available in .zip and .tgz archives <a href="http://archive.egeste.net/android/motorola-i1/" target="_blank">here.</a> You don&#8217;t need both. The tgz is there for convenience for those who prefer it. Once you have the archive, unzip it somewhere that&#8217;s easy to get to from a command line.</p>
<p><strong>Step 4. Edit the install file</strong><br />
I was hoping to automate this step so you didnt have to do it manually, but unfortunately stock android (at least 1.5) does not have the gnu-utils necessary to do this &#8211; so you&#8217;ll have to do it by hand&#8230; Thankfully, it&#8217;s not a terribly difficult process.<br />
In your local terminal (on your computer, not on the device), run the following command:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;">adb shell <span style="color: #c20cb9; font-weight: bold;">mount</span></pre></td></tr></table></div>

<p>You will see a bunch of output that looks something like this:</p>
<pre class="output">rootfs / rootfs ro 0 0
tmpfs /dev tmpfs rw,mode=755 0 0
devpts /dev/pts devpts rw,mode=600 0 0
proc /proc proc rw 0 0
sysfs /sys sysfs rw 0 0
tmpfs /sqlite_stmt_journals tmpfs rw,size=4096k 0 0
/dev/block/mtdblock10 /phx/cp yaffs2 rw 0 0
/dev/block/mtdblock18 /phx/cpb yaffs2 rw 0 0
/dev/block/mtdblock17 /phx/bp squashfs ro 0 0
/dev/block/mtdblock15 /phx/csd squashfs ro 0 0
/dev/block/mtdblock14 /phx/ue squashfs ro 0 0
/dev/block/mtdblock11 /phx/logger yaffs2 rw 0 0
<span style="background-color:yellow;">/dev/block/mtdblock7</span> /system yaffs2 ro 0 0
/dev/block/mtdblock9 /data yaffs2 rw,nosuid,nodev 0 0
/dev/block/mtdblock8 /cache yaffs2 rw,nosuid,nodev 0 0
/dev/block/mtdblock12 /data/preload yaffs2 ro 0 0</pre>
<p>I have highlighted the line you are looking for in this example. You want to find the line that shows the device that is mounted to /system. In this example, <span style="background-color:yellow;">/dev/block/mtdblock7</span> is mounted to /system. Yours may be different, hence why we check to see what it is first. Once you have this value, open install.sh in your favorite editor (on Windows, I like <a href="http://notepad-plus-plus.org/" target="_blank">Notepad++</a>), there are instructions as to where to paste this value. Then save the file and close it.</p>
<p><strong>Step 5. Push the files to the phone</strong><br />
In your local terminal, cd to the directory where you unzipped the files, then run the following commands.</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;">adb push Superuser.apk <span style="color: #000000; font-weight: bold;">/</span>sdcard<span style="color: #000000; font-weight: bold;">/</span>Superuser.apk
adb push busybox <span style="color: #000000; font-weight: bold;">/</span>sdcard<span style="color: #000000; font-weight: bold;">/</span>busybox
adb push <span style="color: #c20cb9; font-weight: bold;">su</span> <span style="color: #000000; font-weight: bold;">/</span>sdcard<span style="color: #000000; font-weight: bold;">/</span><span style="color: #c20cb9; font-weight: bold;">su</span>
adb push rage <span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>rage
adb push install.sh <span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>install.sh
adb shell <span style="color: #c20cb9; font-weight: bold;">chmod</span> <span style="color: #000000;">775</span> <span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp
adb shell <span style="color: #c20cb9; font-weight: bold;">chmod</span> <span style="color: #000000;">755</span> <span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/*</span></pre></td></tr></table></div>

<p><strong>Step 6. Install ConnectBot</strong><br />
Pretty straightforward. Install ConnectBot from the android market. This method may work with other terminal apps, but I have not tested them. I had no luck getting this method to work over ADB.</p>
<p><strong>Step 7. Execute rage</strong><br />
Open ConnectBot and connect to your phone, then issue the following command:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>rage</pre></td></tr></table></div>

<p><strong>Step 8. WAIT</strong><br />
This has its own step because it&#8217;s really important. You have to wait. Be patient. I know, it&#8217;s hard, you&#8217;re excited, but don&#8217;t get all button happy. you&#8217;ll mess up the process. The process is complete when you see</p>
<pre class="output">[*] Forked %d childs.</pre>
<p>(Where %d is replaced by the number of threads forked.)</p>
<p>Once you see this message, disconnect from ConnectBot.</p>
<p><strong>Step 9. Check for root and install root utilities</strong><br />
Open ConnectBot and reconnect to your phone. Where before you saw the $ character indicating you were in userland, you should now see a # indicating that you are root. If you see the # character, congrats! You&#8217;re almost done and you may proceed. If you still see the $ character, something messed up and you need to backtrace your steps and figure out where you went wrong. If you are now root, issue the following command:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">/</span>data<span style="color: #000000; font-weight: bold;">/</span>local<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>install.sh</pre></td></tr></table></div>

<p>If all went well, this script should have executed with no output and no errors. If everything looks good, go ahead and sync/reboot your phone.</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sync</span>
reboot</pre></td></tr></table></div>

<p><strong>Step 10. Test your install</strong><br />
At this point, if all went well, your Motorola I1 should be rooted, rebooted and have all the utilities necessary to escalate to root on the command line or run applications that require root permissions. To be sure that it worked correctly let&#8217;s test it.</p>
<p>To test on your phone with ConnectBot, start ConnectBot, connect to your phone and issue the command:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">su</span></pre></td></tr></table></div>

<p>To test from your computer, you can simply run:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;">adb shell <span style="color: #c20cb9; font-weight: bold;">su</span></pre></td></tr></table></div>

<p>If you&#8217;re a security-minded individual or a researcher and are interested in the details of how the root escalation works, there is a great article about it <a href="http://dtors.org/2010/08/25/reversing-latest-exploid-release/" target="_blank">here.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2011/08/30/step-by-step-how-to-root-the-motorola-i1/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Restore AddressBook Contacts From iPhone/iPod Touch After Reformat</title>
		<link>http://egeste.net/blog/2010/09/10/restore-addressbook-contacts-from-iphone_ipod-touch-after-reformat/</link>
		<comments>http://egeste.net/blog/2010/09/10/restore-addressbook-contacts-from-iphone_ipod-touch-after-reformat/#comments</comments>
		<pubDate>Fri, 10 Sep 2010 23:15:10 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Administration]]></category>
		<category><![CDATA[bash]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[address book]]></category>
		<category><![CDATA[contacts]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[jailbreak]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[macintosh]]></category>
		<category><![CDATA[osx]]></category>
		<category><![CDATA[restore]]></category>

		<guid isPermaLink="false">http://www.egeste.net/?p=108</guid>
		<description><![CDATA[So you reformatted your mac and didn&#8217;t back up your AddressBook contacts? Whoops. That&#8217;s ok though, if you have a jailbroken iPhone you can restore your AddressBook contacts with a little bit of hackery. So lets get started! 1. SSH into your iphone, and get r00t. TheGame:~ egeste$ ssh root@192.168.1.122 root@192.168.1.122's password: iPhone:~ root: 2. &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2010/09/10/restore-addressbook-contacts-from-iphone_ipod-touch-after-reformat/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p><img src="http://www.egeste.net/wp-content/uploads/2010/09/gksu-root-terminal-150x150.png" alt="#" title="#" width="150" height="150" class="size-thumbnail wp-image-118" style="float:right;"/><br />
So you reformatted your mac and didn&#8217;t back up your AddressBook contacts? Whoops. That&#8217;s ok though, if you have a jailbroken iPhone you can restore your AddressBook contacts with a little bit of hackery. So lets get started!</p>
<p><strong>1. SSH into your iphone, and get r00t.</strong></p>
<pre class="output">TheGame:~ egeste$ ssh root@192.168.1.122
root@192.168.1.122's password:
iPhone:~ root:</pre>
<p><strong>2. Go into the mobile user&#8217;s home dir and create a backup folder</strong></p>
<pre class="output">iPhone:~ root: cd /var/mobile
iPhone:/var/mobile root: mkdir Backup</pre>
<p><strong>3. Copy the AddressBook databases into your backup folder</strong></p>
<pre class="output">iPhone:/var/mobile root: cp Library/AddressBook/* Backup/</pre>
<p><strong>4. Open up iTunes and plug in your iPhone/iPod Touch (if it&#8217;s not already).</strong> In iTunes, click on your device under Devices, then click on the tab for Info. Check the box to sync your contacts, then click sync. iTunes will ask you if you want to do this because blah blah blah whatever, just do it.</p>
<p><strong>5. Once the sync is complete you will notice that all the contacts are gone from your phone. DON&#8217;T FREAK OUT.</strong> return to your SSH session and copy the database files back to their original location like so:</p>
<pre class="output">iPhone:/var/mobile root: cp Backup/* Library/AddressBook/</pre>
<p><strong>6. If you check your phone contacts again you should see that all of your contacts are back.</strong> Now all you need to do is sync your phone again. BLAMMO! iTunes should have imported all the contacts from your iPhone into AddressBook. You may have to do some merging and whatnot.</p>
<p>I suppose this would work for Outlook contacts as well, but I haven&#8217;t tested it.</p>
<p>Anyway, that&#8217;s all for now.<br />
-Egeste</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2010/09/10/restore-addressbook-contacts-from-iphone_ipod-touch-after-reformat/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Apache, mod_rewrite, and you</title>
		<link>http://egeste.net/blog/2010/04/18/apache-mod_rewrite-and-you/</link>
		<comments>http://egeste.net/blog/2010/04/18/apache-mod_rewrite-and-you/#comments</comments>
		<pubDate>Sun, 18 Apr 2010 18:28:54 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Administration]]></category>
		<category><![CDATA[Apache]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[debian]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[mod_rewrite]]></category>

		<guid isPermaLink="false">http://www.egeste.net/?p=18</guid>
		<description><![CDATA[mod_rewrite is an awesome module for apache that allows you to rewrite urls. Describes itself right? Like all other apache modules, simply loading the module won’t do jack. You have to configure your apache server, telling it how you want to use mod_rewrite and where you want to use it. Install mod_rewrite If you already &#8230; </p><p><a class="more-link block-button" href="http://egeste.net/blog/2010/04/18/apache-mod_rewrite-and-you/">Continue reading &#187;</a>]]></description>
				<content:encoded><![CDATA[<p>mod_rewrite is an awesome module for apache that allows you to rewrite urls. Describes itself right? Like all other apache modules, simply loading the module won’t do jack. You have to configure your apache server, telling it how you want to use mod_rewrite and where you want to use it.</p>
<p><strong>Install mod_rewrite</strong><br />
If you already have apache installed, chances are that you already have the mod_rewrite module. If not, install it.</p>
<p><em>Debain only</em></p>
<pre>egeste:/etc/apache2# a2enmod rewrite</pre>
<p><strong>Load the module in your apache config</strong><br />
Like all other daemons, apache relies on configuration files to tell it how to behave. Common configuration changes for apache would be to load/unload modules, change error or access log locations, etc. If your version apache loads modules in the configuration file, uncomment or add the following line to your config.</p>
<pre>LoadModule /path/to/mod_rewrite.so</pre>
<p>If your version of apache loads modules from the mods-enabled folder, create a symbolic link to the mod_rewrite config file in mods-enabled. This is what it would look like for me.</p>
<pre>egeste:~# cd /etc/apache2/mods-enabled
egeste:/etc/apache2/mods-enabled# ln -s ../mods-available/rewrite.load</pre>
<p><strong>Enable .htaccess override in your web application root directory</strong><br />
Enabling .htaccess to override some settings in the root dir of your application allows you to change the way apache will behave in that directory without the need to restart the apache daemon. I like to add this setting to my vhost config. This is what mine looks like (some info redacted).</p>
<pre>egeste:/etc/apache2# cat sites-available/egeste.net.conf
&lt;VirtualHost *:80&gt;
 ServerAdmin webmaster@localhost
 DocumentRoot /path/to/site/root
 ServerName www.egeste.net
 ServerAlias egeste.net
&lt;/VirtualHost&gt;
&lt;Directory /path/to/site/root&gt;
 Options FollowSymLinks
 AllowOverride All
 Order deny,allow
 Allow from all
&lt;/Directory&gt;</pre>
<p>At this point go ahead and give your apache server a restart.</p>
<pre>egeste:/etc/apache2# /etc/init.d/apache2 restart</pre>
<p>Cool, if all went well, you should have mod_rewrite installed, loaded and configured to allow .htaccess overrides in your site root. The only steps that remain are to define a ruleset in .htaccess and write your web application to handle the requests. I won’t go into detail on mod-rewrite rules and regex, but here’s my wordpress .htaccess file.</p>
<pre lang=".htaccess">&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
&lt;/IfModule&gt;</pre>
<p>Happy coding =)</p>
<p><em>-Egeste</em></p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2010/04/18/apache-mod_rewrite-and-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress get_pages() meta_key woes</title>
		<link>http://egeste.net/blog/2010/04/18/wordpress-get-pages-meta-key-woe/</link>
		<comments>http://egeste.net/blog/2010/04/18/wordpress-get-pages-meta-key-woe/#comments</comments>
		<pubDate>Sun, 18 Apr 2010 18:11:27 +0000</pubDate>
		<dc:creator>Egeste</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Platforms]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[codex]]></category>
		<category><![CDATA[get_pages()]]></category>
		<category><![CDATA[hierarchical]]></category>
		<category><![CDATA[meta_key]]></category>
		<category><![CDATA[no results]]></category>
		<category><![CDATA[not working]]></category>

		<guid isPermaLink="false">http://www.egeste.net/?p=5</guid>
		<description><![CDATA[TL;DR - you have to use the hierarchical=0 arg to list all pages that contain your meta_key, otherwise you will only get top-level pages.]]></description>
				<content:encoded><![CDATA[<p>Every once in a while you run into a problem that makes you scratch your head… and eventually maybe smash it against your desk a few times. This was definitely one of those.</p>
<p>get_pages() is a method that returns an array of $post objects (which is very well documented <a target="_blank" href="http://wphackr.com/wordpress-post-variable-quick-reference/">here</a>). There are multiple arguments you can pass to get_pages() for the purpose of filtering the results you get back (<a target="_blank" href="http://codex.wordpress.org/Function_Reference/get_pages">these args are well documented here</a>). For example, if you only want to retrieve sub-pages of the current page, you could say:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$pages</span> <span style="color: #339933;">=</span> get_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;child_of=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>One of the args you can specify is the meta_key arg, which will only return pages that contain the meta_key you specify. (See: <a target="_blank" href="http://codex.wordpress.org/Custom_Fields">Custom Fields</a>) This is where I ran into some trouble.</p>
<p>It turns out that get_pages has an argument called hierarchical, which according to the codex does the following:</p>
<blockquote><dl>
<dt> hierarchical </dt>
<dd> (<em>boolean</em>) Display sub-Pages in an indented manner below their parent or list the Pages inline.  The default is <em>true</em> (display sub-Pages indented below the parent list item). Valid values:</p>
<ul>
<li> <tt>1 (true)</tt> &ndash; default</li>
<li> <tt>0 (false)</tt></li>
</ul>
</dd>
</dl>
</blockquote>
<p>What’s not intuitive about this argument is that it will filter subpages, (that is, not top-level pages) when using the meta_key arg. Here’s an example:</p>
<p><strong>Data Set</strong></p>
<ul>
<li>Homepage</li>
<li>About
<ul>
<li>Foo</li>
<li>Bar (This item has a meta_key named banner_title)</li>
</ul>
</li>
</ul>
<p><strong>Code</strong></p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span>get_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;meta_key=banner_title&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><strong>Output:</strong> 0<br />
The output indicates that 0 results were returned, despite the fact that we have a page with a meta_key named banner_title. So lets try something different.</p>
<p><strong>Code</strong></p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span>get_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;meta_key=banner_title&amp;hierarchical=0&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><strong>Output: </strong>1<br />
Ah, now we’re getting the results we want.</p>
<p>TL;DR &#8211; you have to use the hierarchical=0 arg to list all pages that contain your meta_key, otherwise you will only get top-level pages.</p>
<p>-Egeste</p>
]]></content:encoded>
			<wfw:commentRss>http://egeste.net/blog/2010/04/18/wordpress-get-pages-meta-key-woe/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
