Skip to content
This repository
Newer
Older
100644 967 lines (846 sloc) 34.428 kb
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
1 ==============
2 Binding Events
3 ==============
4
5 **Time Estimate:** 20 minutes
6
7 **Difficulty Level:** Advanced
8
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
9 .. _code_exs_events-summary:
10
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
11 Summary
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
12 =======
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
13
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
14 This example shows how to bind events to a mojit, configure code to run
15 on the client, and make AJAX calls to the YQL Web service. The application
16 listens for events and then makes AJAX calls to YQL to get Flickr photo
17 information.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
18
19 The following topics will be covered:
20
21 - configuring the application to run on the client
22 - getting Flickr data from the model with YQL
23 - binding events through the ``mojitProxy`` object
24 - making AJAX calls to YQL from the binder
25
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
26 .. _events_summary-req:
27
28 Requirements
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
29 ------------
30
31 You will need to `get a Flickr API key <http://www.flickr.com/services/api/keys/apply/>`_
32 to run this example.
33
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
34 .. _code_exs_events-notes:
35
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
36 Implementation Notes
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
37 ====================
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
38
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
39 .. _events_notes-client:
40
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
41 Configuring the Application to Run on the Client
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
42 ------------------------------------------------
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
43
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
44 Mojito lets you configure applications to run on either the server or client
45 side. This example uses binders that are deployed to the client, so we need
46 to configure Mojito to deploy the application to the client, where it will
47 be executed by the browser.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
48
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
49 To configure Mojito to run on the client, you simply set the ``"deploy"``
50 property to ``true`` in ``application.json`` as seen below.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
51
52 .. code-block:: javascript
53
54 [
55 {
56 "settings": [ "master" ],
57 "specs": {
58 "frame": {
59 "type": "HTMLFrameMojit",
60 "config": {
61 "deploy": true,
62 "child": {
63 "type": "PagerMojit"
64 }
65 }
66 }
67 }
68 }
69 ]
70
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
71 .. _events_notes-data:
72
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
73 Getting Data with YQL in the Model
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
74 ----------------------------------
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
75
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
76 In the mojit model, the `YUI YQL Query Utility <http://developer.yahoo.com/yui/3/yql/>`_
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
77 is used to get Flickr photo information. To access the utility in your model,
78 specify ``'yql'`` in the ``requires`` array as seen in the code snippet below:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
79
80 .. code-block:: javascript
81
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
82 YUI.add('PagerMojitModel', function(Y, NAME) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
83 ...
84 /* Code for PagerMojitModel */
85 ...
86 }, '0.0.1', {requires: ['yql']});
87
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
88 This code example uses the ``flickr.photos.search`` table to get information
89 for photos that have a title, description, or tags containing a string. For
90 example, the YQL statement below returns Flickr photo information for those
91 photos that have a title, description, or tags containing the string "Manhattan".
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
92
0ef19a46 » zhouyaoji
2012-10-19 Fixed typos.
93 Copy the query below into the `YQL Console <http://developer.yahoo.com/yql/console/>`_,
94 replace ``{your_flickr_api_key}`` with your own Flickr API key, and then click **TEST**
95 to see the returned XML response.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
96
0ef19a46 » zhouyaoji
2012-10-19 Fixed typos.
97 ``select * from flickr.photos.search where text="Manhattan" and api_key="{your_flickr_api_key}"``
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
98
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
99 The returned response contains photo information in the ``photo`` element. You extract the
100 ``farm``, ``server``, ``id``, and ``secret`` attributes from each photo element to create
101 the photo URI as seen here:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
102
103 ``http://farm + {farm} + static.flickr.com/ + {server} + / + {id} + _ + {secret} + .jpg``
104
df58c4fe » zhouyaoji
2012-11-13 Merge branch 'docs_remove_init_controllers' into HEAD
105
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
106 In the ``model.server.js`` of ``PagerMojit`` shown below, the ``YQL`` function uses the YQL
107 statement above to get photo data, then parses the returned response to create the photo
108 URIs. The model then wraps the photo information in an object and stores those objects in
109 the ``images`` array that is sent to the controller through the ``callback`` function.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
110
111
112 .. code-block:: javascript
113
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
114 YUI.add('PagerMojitModel', function(Y, NAME) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
115 /**
116 * The PagerMojitModel module.
117 * @module PagerMojitModel
118 */
119 /**
120 * Constructor for the Model class.
121 * @class Model
122 * @constructor
de93f81a » zhouyaoji
2012-10-01 Fixed formatting of code examples; removed any last remnants of view …
123 **/
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
124 Y.namespace('mojito.models')[NAME] = {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
125 init: function(config) {
126 this.config = config;
127 },
128 getData: function(query, start, count, callback) {
129 var q = null;
130 // Get Flickr API key: http://www.flickr.com/services/api/keys/apply/
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
131 var API_KEY = "{your_flickr_api_key}";
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
132 start = parseInt(start) || 0;
133 count = parseInt(count) || 10;
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
134 q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY + '"';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
135 Y.YQL(q, function(rawData) {
136 if (!rawData.query.results) {
137 callback([]);
138 return;
139 }
140 var rawImages = rawData.query.results.photo, rawImage = null,images = [], image = null, i = 0;
141 for (; i<rawImages.length; i++) {
142 rawImage = rawImages[i];
143 image = {
144 title: rawImage.title,
145 location: 'http://farm' + rawImage.farm + '.static.flickr.com/' + rawImage.server + '/' + rawImage.id + '_' + rawImage.secret + '.jpg',
146 farm: rawImage.farm,
147 server: rawImage.server,
148 image_id: rawImage.id,
149 secret: rawImage.secret
150 };
151 if (!image.title) {
152 image.title = "Generic Title: " + query;
153 }
154 images.push(image);
155 }
156 callback(images);
157 });
158 }
159 };
160 }, '0.0.1', {requires: [ 'yql']});
161
de93f81a » zhouyaoji
2012-10-01 Fixed formatting of code examples; removed any last remnants of view …
162
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
163 For a more detailed explanation about how to use YQL in your Mojito application, see
164 `Calling YQL from a Mojit <calling_yql.html>`_. For more information about YQL, see the
de93f81a » zhouyaoji
2012-10-01 Fixed formatting of code examples; removed any last remnants of view …
165 `YQL Guide <http://developer.yahoo.com/yql/guide>`_.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
166
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
167 .. _events_notes-bind_events:
168
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
169 Binding Events
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
170 --------------
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
171
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
172 This section will discuss the basics of binding events in Mojito and then look at the
173 binder used in this code example.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
174
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
175 .. _bind_events-basics:
176
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
177 Binder Basics
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
178 #############
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
179
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
180 A mojit may have zero, one, or many binders within the ``binders`` directory. Each binder
0e6a8461 » zhouyaoji
2012-11-21 Copy edited the developer guide documentation.
181 will be deployed to the browser along with the rest of the mojit code, where the
182 client-side Mojito runtime will call it appropriately. On the client, the binder has a
183 proxy object (``mojitProxy``) for interacting with the mojit it represents as well as
184 with other mojits on the page. Methods can be called from the ``mojitProxy`` object
185 that allow binders to listen for and fire events.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
186
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
187 The binder consists of a constructor, an initializer, and a bind function. The following
188 describes each component and indicates when the ``mojitProxy`` object can be used.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
189
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
190 - **constructor** - creates the namespace for your binder that wraps the initialization
191 code and binder.
192 - **initializer** - is passed the ``mojitProxy`` where it can be stored and used to listen
193 and fire events with other binders. The ``mojitProxy`` is the only gateway back into the
194 Mojito framework for your binder.
195 - **bind** - is a function that is passed a ``Y.Node`` instance that wraps the DOM node
196 representing this mojit instance. The DOM event handlers for capturing user interactions
197 should be attached in this function.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
198
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
199 The skeleton of the ``binders/index.js`` file below illustrates the basic structure of the
200 binder. For more information, see `Mojito Binders <../intro/mojito_binders.html>`_.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
201
202 .. code-block:: javascript
203
204 YUI.add('AwesomeMojitBinder', function(Y, NAME) {
205 // Binder constructor
206 Y.namespace('mojito.binders')[NAME] = {
207 init: function(mojitProxy) {
208 this.mojitProxy = mojitProxy;
209 },
210 // The bind function
211 bind: function(node) {
212 var thatNode = node;
213 }
214 };
215 Y.mojito.registerEventBinder('AwesomeMojit', Binder);
216 }, '0.0.1', {requires: ['mojito']});
217
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
218 .. _bind_events-pagemojitbinder:
219
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
220 Examining the PageMojitBinder
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
221 #############################
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
222
223 This code example uses the binder ``PageMojitBinder`` to perform the following:
224
225 - attach ``onClick`` handlers to ``prev`` and ``next`` links
226 - invoke the ``index`` method of the controller through the ``mojitProxy`` object
227 - create an overlay with Flickr photo information received from YQL
228
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
229 The ``binders/index.js`` for this code example is long and fairly involved, so we will
230 dissect and analyze the code. Let's begin by looking at the ``bind`` function of
231 ``index.js``, which allows mojits to attach DOM event handlers.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
232
de93f81a » zhouyaoji
2012-10-01 Fixed formatting of code examples; removed any last remnants of view …
233 In this code snippet of ``binders/index.js``, the ``bind`` function contains the nested
234 ``updateDOM`` function that updates node content and attaches event handlers. Using the
0e6a8461 » zhouyaoji
2012-11-21 Copy edited the developer guide documentation.
235 ``mojitProxy`` object, the nested ``flipper`` function calls the ``index`` function of
236 the controller. The callback ``updateDOM`` is passed to ``index`` to update the content.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
237
238 .. code-block:: javascript
239
240 ...
241 bind: function(node) {
242 var thatNode = node;
243 // Define the action when user click on prev/next.
244 var flipper = function(event) {
245 var target = event.target;
246 // Get the link to the page.
247 var page = parsePage(target.get('href'));
248 var updateDOM = function(markup) {
249 thatNode.set('innerHTML', markup);
250 thatNode.all('#nav a').on('click', flipper, this);
251 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
252 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
253 };
254 this.mojitProxy.invoke('index',
255 {
256 params: {page: page},
257 }, updateDOM
258 );
259 };
260 ...
261
262
0e6a8461 » zhouyaoji
2012-11-21 Copy edited the developer guide documentation.
263 The event handler for mouseovers and mouseouts are handled by the ``showOverlay``
264 function, which creates the overlay containing photo information. In the code snippet
265 below, ``showOverlay`` makes an AJAX call to YQL to get photo data that is placed in an
266 unordered list for the overlay.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
267
268 .. code-block:: javascript
269
270 ...
271 bind: function(node) {
272 ...
273 var showOverlay = function(event) {
274 var target = event.target;
275 var href = target.get('href');
276 var imageId = parseImageId(href);
277 if (target.hasClass('overlayed')) {
278 target.removeClass('overlayed');
279 thatNode.one('#display').setContent('');
280 } else {
281 Y.log('HREF: ' + href);
282 Y.log('IMAGE ID: ' + imageId);
283 target.addClass('overlayed');
284 // Query for the image metadata
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
285 var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + {your_flickr_api_key} + '"';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
286 thatNode.one('#display').setContent('Loading ...');
287 Y.YQL(query, function(raw) {
288 if (!raw.query.results.photo) {
289 Y.log('No results found for photoId: ' + imageId);
290 return;
291 }
292 var props = raw.query.results.photo;
293 var snippet = '<ul style="list-style-type: square;">';
294 for (var key in props) {
295 if (typeof(props[key]) == 'object') {
296 continue;
297 }
298 snippet += '<li>' + key + ': ' + props[key] + '</li>';
299 }
300 snippet += '</ul>';
301 thatNode.one('#display').setContent(snippet);
302 });
303 }
304 };
305 ...
306 }
307 ...
308
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
309 Thus far, we've looked at the event handlers, but not the actual binding of the handlers
310 to nodes. At the end of the ``bind`` function, you'll see three important lines
311 (shown below) that bind the ``flipper`` and ``showOutlay`` functions to handle click and
312 mouseover events.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
313
314 .. code-block:: javascript
315
316 ...
317 bind: function(node) {
318 ...
319 // Bind all the image links to showOverlay
320 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
321 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
322 // Bind the prev + next links to flipper
323 thatNode.all('#nav a').on('click', flipper, this);
324 }
325 ...
326
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
327 After a little analysis, the full ``binders/index.js`` below should be easier to
328 understand. The binder attaches event handlers to nodes, invokes a function in the
329 controller, and updates the content in the template. The binder also has a couple of
330 helper functions for parsing and requires the IO and YQL modules, which are specified in
331 the ``requires`` array.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
332
333 .. code-block:: javascript
334
335 YUI.add('PagerMojitBinder', function(Y, NAME) {
0ef19a46 » zhouyaoji
2012-10-19 Fixed typos.
336 var API_KEY = '{your_flickr_api_key}';
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
337 function parseImageId(link) {
338 var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
339 return matches[2];
340 }
341 function parsePage(link) {
342 var matches = link.match(/page=(\d+)/);
343 return matches[1];
344 }
345
346 /**
347 * The PagerMojitBinder module.
348 * @module PagerMojitBinder
349 */
350 /**
351 * Constructor for the Binder class.
352 *
353 * @param mojitProxy {Object} The proxy to allow
354 * the binder to interact with its owning mojit.
355 * @class Binder
356 * @constructor
357 */
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
358 Y.namespace('mojito.binders')[NAME] = {
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
359 /**
360 * Binder initialization method, invoked
361 * after all binders on the page have
362 * been constructed.
363 */
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
364 init: function(mojitProxy) {
365 this.mojitProxy = mojitProxy;
366 },
367 /**
368 * The binder method, invoked to allow the mojit
369 * to attach DOM event handlers.
370 * @param node {Node} The DOM node to which this
371 * mojit is attached.
372 */
373 bind: function(node) {
374 var thatNode = node;
375 Y.log('NODE: ' + Y.dump(this.node));
376 // define the action when user click on prev/next
377 var flipper = function(event) {
378 var target = event.target;
379 // get the link to the page
380 var page = parsePage(target.get('href'));
381 Y.log('PAGE: ' + page);
382 var updateDOM = function(markup) {
383 thatNode.set('innerHTML', markup);
384 thatNode.all('#nav a').on('click', flipper, this);
385 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
386 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
387 };
388 this.mojitProxy.invoke('index',
389 {
390 params: {page: page}
391 }, updateDOM
392 );
393 };
394 var showOverlay = function(event) {
395 var target = event.target;
396 var href = target.get('href');
397 var imageId = parseImageId(href);
398 if (target.hasClass('overlayed')) {
399 target.removeClass('overlayed');
400 thatNode.one('#display').setContent('');
401 } else {
402 Y.log('HREF: ' + href);
403 Y.log('IMAGE ID: ' + imageId);
404 target.addClass('overlayed');
405 // Query for the image metadata
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
406 var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + API_KEY + '"';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
407 thatNode.one('#display').setContent('Loading ...');
408 Y.YQL(query, function(raw) {
409 if (!raw.query.results.photo) {
410 Y.log('No results found for photoId: ' + imageId);
411 return;
412 }
413 var props = raw.query.results.photo;
414 var snippet = '<ul style="list-style-type: square;">';
415 for (var key in props) {
416 if (typeof(props[key]) == 'object') {
417 continue;
418 }
419 snippet += '<li>' + key + ': ' + props[key] + '</li>';
420 }
421 snippet += '</ul>';
422 thatNode.one('#display').setContent(snippet);
423 });
424 }
425 };
426 // Bind all the image links to showOverlay
427 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
428 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
429 // Bind the prev + next links to flipper
430 thatNode.all('#nav a').on('click', flipper, this);
431 }
432 };
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
433 }, '0.0.1', {requires: ['yql', 'io', 'dump']});
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
434
df58c4fe » zhouyaoji
2012-11-13 Merge branch 'docs_remove_init_controllers' into HEAD
435
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
436 .. _events_notes-paging:
437
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
438 Using Paging
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
439 ------------
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
440
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
441 The paging for this code example relies on the application configuration to set route
442 paths and the controller to create links to access previous and next pages.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
443
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
444 The ``routes.json`` file below configures two route paths for HTTP GET calls made on the
445 root path. The ``perpage`` configuration, however, requires a query string with the
446 ``page`` parameter, which is used for paging. The ``page`` parameter has the value
447 ``:page``, which is a variable that is assigned a value by the controller that we're
448 going to look shortly.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
449
450 .. code-block:: javascript
451
452 [
453 {
454 "settings": ["master"],
455 "root": {
456 "verbs": ["get"],
457 "path": "/",
458 "call": "frame.index"
459 },
460 "perpage": {
461 "verbs": ["get"],
462 "path": "/?page=:page",
463 "call": "frame.index"
464 }
465 }
466 ]
467
468 The controller for ``PagerMojit`` performs several functions:
469
470 - uses the ``Params`` addon to get the ``page`` parameter from the query string
471 - calculates the index of the first photo on the page
472 - calls the ``getData`` function in the model to get photo data
473 - creates URLs for the **next** and **prev** links
474
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
475 The `Params addon <../../api/classes/Params.common.html>`_ allows you to access variables
476 from the query string parameters, the POST request bodies, or the routing systems URLs.
477 In this code example, you use the ``getFromMerged`` method, which merges the parameters
478 from the query string, POST request body, and the routing system URLs to give you access
479 to all of the parameters. In the code snippet taken from ``controller.server.js`` below,
480 the ``getFromMerged`` method is used to get the value for the ``page`` parameter and then
481 calculate the index of the first photo to display:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
482
483 .. code-block:: javascript
484
485 ...
486 index: function(actionContext) {
487 var page = actionContext.params.getFromMerged('page');
488 var start;
489 page = parseInt(page) || 1;
490 if ((!page) || (page<1)) {
491 page = 1;
492 }
493 // Page param is 1 based, but the model is 0 based
494 start = (page - 1) * PAGE_SIZE;
495 ...
496 }
497 ...
498
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
499 To get the photo data, the controller depends on the model to call YQL to query the
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
500 Flickr API. Using ``actionContext.get({model_name})`` lets you get a reference to the
501 model. The example controller below calls the ``getData`` from the model
b1d362f2 » zhouyaoji
2012-11-29 Fixed doc issues/discrepancies created by merge of develop-perf into …
502 ``PagerMojitModel`` with ``actionContext.models.get('PagerMojitModel').getData``, which
0e6a8461 » zhouyaoji
2012-11-21 Copy edited the developer guide documentation.
503 will get the returned data from YQL in the callback function. To use methods from models,
504 you need to require the model in the ``requires`` array of the controller.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
505
506 .. code-block:: javascript
507
508 ...
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
509 index: function(actionContext) {
510 ...
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
511 // Data is an array of images
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
512 actionContext.models.get('PagerMojitModel').getData('mojito', start, PAGE_SIZE, function(data) {
513 Y.log('DATA: ' + Y.dump(data));
514 var theData = {
515 data: data, // images
516 hasLink: false,
517 prev: {
518 title: "prev" // opportunity to localize
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
519 },
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
520 next: {
521 link: createLink(actionContext, {page: page+1}),
522 title: "next"
523 },
524 query: 'mojito'
525 };
526 if (page > 1) {
527 theData.prev.link = createLink(actionContext, {page: page-1});
528 theData.hasLink = true;
529 }
530 actionContext.done(theData);
531 });
532 }
533 ...
534 };
b1d362f2 » zhouyaoji
2012-11-29 Fixed doc issues/discrepancies created by merge of develop-perf into …
535 }, '0.0.1', {requires: [
536 'mojito',
537 'mojito-models-addon',
538 'mojito-url-addon',
539 'mojito-params-addon',
540 'PagerMojitModel',
541 'dump'
542 ]});
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
543
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
544
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
545 The URLs for the **prev** and **next** links are created by passing the mojit instance,
546 the method, and the query string parameters to the ``make`` method from the ``Url`` addon.
547 The code snippet below creates the query string parameters with the
548 `YUI QueryString module <http://yuilibrary.com/yui/docs/api/modules/querystring.html>`_.
549 If the query string created by ``Y.QueryString.stringify`` is "page=2" ,
550 ``actionContext.url.make`` would return the URL ``{domain_name}:8666/?page=2``.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
551
552 .. code-block:: javascript
553
554 ...
216b8ce7 » zhouyaoji
2012-11-30 Fixed code/text formatting issues.
555 function createLink(actionContext, params) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
556 var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
557 for (var k in params) {
558 mergedParams[k] = params[k];
559 }
560 return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
561 }
562 ...
563
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
564 Stitching the above code snippets together, we have the ``controller.server.js`` below.
565 The ``index`` function relies on the model for data and the ``createLink`` function to
566 create URLs for the **next** and **prev** links.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
567
568 .. code-block:: javascript
569
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
570 YUI.add('PagerMojit', function(Y, NAME) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
571 /**
572 * The PagerMojit module.
573 * @module PagerMojit */
574 var PAGE_SIZE = 10;
575 /**
576 * Constructor for the Controller class.
577 * @class Controller
578 * @constructor
579 */
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
580 Y.namespace('mojito.controllers')[NAME] = {
9275476f » zhouyaoji
2012-11-13 Removed the init methods from controolers. Still many more to go.
581
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
582 index: function(actionContext) {
583 var page = actionContext.params.getFromMerged('page');
584 var start;
585 page = parseInt(page) || 1;
586 if ((!page) || (page<1)) {
587 page = 1;
588 }
589 // Page param is 1 based, but the model is 0 based
590 start = (page - 1) * PAGE_SIZE;
591 // Data is an array of images
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
592 actionContext.models.get('PagerMojitModel').getData('mojito', start, PAGE_SIZE, function(data) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
593 Y.log('DATA: ' + Y.dump(data));
594 var theData = {
595 data: data, // images
596 hasLink: false,
597 prev: {
598 title: "prev" // opportunity to localize
599 },
600 next: {
601 link: createLink(actionContext, {page: page+1}),
602 title: "next"
603 },
604 query: 'mojito'
605 };
606 if (page > 1) {
607 theData.prev.link = createLink(actionContext, {page: page-1});
608 theData.hasLink = true;
609 }
610 actionContext.done(theData);
611 });
612 }
613 };
614 // generate the link to the next page based on:
615 // - mojit id
616 // - action
617 // - params
618 function createLink(actionContext, params) {
619 var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
620 for (var k in params) {
621 mergedParams[k] = params[k];
622 }
623 return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
624 }
b1d362f2 » zhouyaoji
2012-11-29 Fixed doc issues/discrepancies created by merge of develop-perf into …
625 }, '0.0.1', {requires: [
626 'mojito',
627 'mojito-models-addon',
628 'mojito-url-addon',
629 'mojito-params-addon',
630 'PagerMojitModel',
631 'dump'
632 ]});
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
633
634 .. _code_exs_events-setup:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
635
636 Setting Up this Example
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
637 =======================
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
638
639 To set up and run ``binding_events``:
640
641 #. Create your application.
642
643 ``$ mojito create app binding_events``
644 #. Change to the application directory.
645 #. Create your mojit.
646
647 ``$ mojito create mojit PagerMojit``
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
648 #. To configure you application to run on the client and use ``HTMLFrameMojit``, replace
649 the code in ``application.json`` with the following:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
650
651 .. code-block:: javascript
652
653 [
654 {
655 "settings": [ "master" ],
656 "specs": {
657 "frame": {
658 "type": "HTMLFrameMojit",
659 "config": {
660 "deploy": true,
661 "child": {
662 "type": "PagerMojit"
663 }
664 }
665 }
666 }
667 }
668 ]
669
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
670 #. To configure routing to call the ``index`` action from the instance of the
671 ``HTMLFrameMojit``, replace the code in ``routes.json`` with the following:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
672
673 .. code-block:: javascript
674
675 [
676 {
677 "settings": ["master"],
678 "root": {
679 "verbs": ["get"],
680 "path": "/",
681 "call": "frame.index"
682 },
683 "perpage": {
684 "verbs": ["get"],
685 "path": "/?page=:page",
686 "call": "frame.index"
687 }
688 }
689 ]
690
691 #. Change to ``mojits/PageMojit``.
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
692 #. To have the controller get data from the model and create links for paging, replace the
693 code in ``controller.server.js`` with the following:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
694
695 .. code-block:: javascript
696
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
697 YUI.add('PagerMojit', function(Y, NAME) {
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
698 var PAGE_SIZE = 10;
699 /**
700 * Constructor for the Controller class.
701 * @class Controller
702 * @constructor
703 */
df58c4fe » zhouyaoji
2012-11-13 Merge branch 'docs_remove_init_controllers' into HEAD
704 Y.namespace('mojito.controllers')[NAME] = {
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
705
706 index: function(actionContext) {
707 var page = actionContext.params.getFromMerged('page');
708 var start;
709 page = parseInt(page) || 1;
710 if ((!page) || (page<1)) {
711 page = 1;
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
712 }
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
713 // Page param is 1 based, but the model is 0 based
714 start = (page - 1) * PAGE_SIZE;
715 // Data is an array of images
2785d93b » zhouyaoji
2012-11-14 Added new syntax for calling models from controllers and changed 'fra…
716 actionContext.models.get('PagerMojitModel').getData('mojito', start, PAGE_SIZE, function(data) {
f3e9641c » zhouyaoji
2012-11-13 Continuing to work on init function.
717 Y.log('DATA: ' + Y.dump(data));
718 var theData = {
719 data: data, // images
720 hasLink: false,
721 prev: {
722 title: "prev" // opportunity to localize
723 },
724 next: {
725 link: createLink(actionContext, {page: page+1}),
726 title: "next"
727 },
728 query: 'mojito'
729 };
730 if (page > 1) {
731 theData.prev.link = createLink(actionContext, {page: page-1});
732 theData.hasLink = true;
733 }
734 actionContext.done(theData);
735 });
736 }
737 };
738 // Generate the link to the next page based on:
739 // - mojit id
740 // - action
741 // - params
742 function createLink(actionContext, params) {
743 var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
744 for (var k in params) {
745 mergedParams[k] = params[k];
746 }
747 return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
748 }
b1d362f2 » zhouyaoji
2012-11-29 Fixed doc issues/discrepancies created by merge of develop-perf into …
749 }, '0.0.1', {requires: [
750 'mojito',
751 'mojito-models-addon',
752 'mojito-url-addon',
753 'mojito-params-addon',
754 'PagerMojitModel',
755 'dump'
756 ]});
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
757
df58c4fe » zhouyaoji
2012-11-13 Merge branch 'docs_remove_init_controllers' into HEAD
758
0e6a8461 » zhouyaoji
2012-11-21 Copy edited the developer guide documentation.
759 #. To get Flickr photo information using YQL, create the file ``models/model.server.js``
760 with the code below. Be sure to replace the ``'{your_flickr_api_key}'`` with your own
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
761 Flickr API key.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
762
763 .. code-block:: javascript
764
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
765 YUI.add('PagerMojitModel', function(Y, NAME) {
0ef19a46 » zhouyaoji
2012-10-19 Fixed typos.
766 var API_KEY = '{your_flickr_api_key}';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
767 /**
768 * The PagerMojitModel module.
769 * @module PagerMojitModel
770 */
771 /**
772 * Constructor for the Model class.
773 * @class Model
774 * @constructor
775 */
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
776 Y.namespace('mojito.models')[NAME] = {
9275476f » zhouyaoji
2012-11-13 Removed the init methods from controolers. Still many more to go.
777
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
778 getData: function(query, start, count, callback) {
779 var q = null;
780 // Get Flickr API key: http://www.flickr.com/services/api/keys/apply/
781 var API_KEY = "{your_api_key}";
782 start = parseInt(start) || 0;
783 count = parseInt(count) || 10;
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
784 q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY+ '"';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
785 Y.YQL(q, function(rawData) {
786 if (!rawData.query.results) {
787 callback([]);
788 return;
789 }
790 var rawImages = rawData.query.results.photo, rawImage = null,images = [], image = null, i = 0;
791 for (; i<rawImages.length; i++) {
792 rawImage = rawImages[i];
793 image = {
794 title: rawImage.title,
795 location: 'http://farm' + rawImage.farm + '.static.flickr.com/' + rawImage.server + '/' + rawImage.id + '_' + rawImage.secret + '.jpg',
796 farm: rawImage.farm,
797 server: rawImage.server,
798 image_id: rawImage.id,
799 secret: rawImage.secret
800 };
801 if (!image.title) {
802 image.title = "Generic Title: " + query;
803 }
804 images.push(image);
805 }
806 callback(images);
807 });
808 }
809 };
810 }, '0.0.1', {requires: ['yql']});
811
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
812 #. To create the binder for click events and invoke the ``index`` function of the
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
813 controller, replace the code in ``binders/index.js`` with the code below. Again,
814 Be sure to replace the ``'{your_flickr_api_key}'`` with your own Flickr API key.
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
815
816 .. code-block:: javascript
817
818 YUI.add('PagerMojitBinder', function(Y, NAME) {
0ef19a46 » zhouyaoji
2012-10-19 Fixed typos.
819 var API_KEY = '{your_flickr_api_key}';
3c5bb677 » zhouyaoji
2012-10-19 Added a placeholder for the API key and modified query.
820 function parseImageId(link) {
821 var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
822 return matches[2];
823 }
824 function parsePage(link) {
825 var matches = link.match(/page=(\d+)/);
826 return matches[1];
827 }
828
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
829 /**
830 * The PagerMojitBinder module.
831 * @module PagerMojitBinder
832 */
833 /**
834 * Constructor for the Binder class.
835 *
836 * @param mojitProxy {Object} The proxy to allow
837 * the binder to interact with its owning mojit.
838 * @class Binder
839 * @constructor
840 */
841 Y.namespace('mojito.binders')[NAME] = {
842 /**
843 * Binder initialization method, invoked
844 * after all binders on the page have
845 * been constructed.
846 */
847 init: function(mojitProxy) {
848 this.mojitProxy = mojitProxy;
849 },
850 /**
851 * The binder method, invoked to allow the mojit
852 * to attach DOM event handlers.
853 * @param node {Node} The DOM node to which this
854 * mojit is attached.
855 */
856 bind: function(node) {
857 var thatNode = node;
858 Y.log('NODE: ' + Y.dump(this.node));
859 // define the action when user click on prev/next
860 var flipper = function(event) {
861 var target = event.target;
862 // get the link to the page
863 var page = parsePage(target.get('href'));
864 Y.log('PAGE: ' + page);
865 var updateDOM = function(markup) {
866 thatNode.set('innerHTML', markup);
867 thatNode.all('#nav a').on('click', flipper, this);
868 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
869 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
870 };
871 this.mojitProxy.invoke('index',
872 {
873 params: {page: page}
874 }, updateDOM
875 );
876 };
877 var showOverlay = function(event) {
878 var target = event.target;
879 var href = target.get('href');
880 var imageId = parseImageId(href);
881 if (target.hasClass('overlayed')) {
882 target.removeClass('overlayed');
883 thatNode.one('#display').setContent('');
884 } else {
885 Y.log('HREF: ' + href);
886 Y.log('IMAGE ID: ' + imageId);
887 target.addClass('overlayed');
888 // Query for the image metadata
f0af949a » zhouyaoji
2012-10-19 Updated query.
889 var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + API_KEY + '"';
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
890 thatNode.one('#display').setContent('Loading ...');
891 Y.YQL(query, function(raw) {
892 if (!raw.query.results.photo) {
893 Y.log('No results found for photoId: ' + imageId);
894 return;
895 }
896 var props = raw.query.results.photo;
897 var snippet = '<ul style="list-style-type: square;">';
898 for (var key in props) {
899 if (typeof(props[key]) == 'object') {
900 continue;
901 }
902 snippet += '<li>' + key + ': ' + props[key] + '</li>';
903 }
904 snippet += '</ul>';
905 thatNode.one('#display').setContent(snippet);
906 });
907 }
908 };
909 // Bind all the image links to showOverlay
910 thatNode.all('#master ul li a').on('mouseover', showOverlay, this);
911 thatNode.all('#master ul li a').on('mouseout', showOverlay, this);
912 // Bind the prev + next links to flipper
913 thatNode.all('#nav a').on('click', flipper, this);
914 }
915 };
916 }, '0.0.1', {requires: ['yql', 'io', 'dump']});
917
351e25f4 » zhouyaoji
2012-10-19 Added a prereq for doing the code example, added a link to get Flickr…
918 #. To display links to photos and associated photo data in the rendered template, replace
919 the code in ``views/index.hb.html`` with the following:
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
920
921 .. code-block:: html
922
923 <div id="{{mojit_view_id}}" class="mojit" style="position: relative; width: 960px">
924 <h3>Query Term: {{query}}</h3>
925 <div id="nav" style="clear: both;">
926 {{#hasLink}}
927 {{#prev}}
928 <a href="{{{link}}}">{{title}}</a>
929 {{/prev}}
930 {{/hasLink}}
931 {{^hasLink}}
932 {{#prev}}{{title}}{{/prev}}
933 {{/hasLink}}
934 {{#next}}
935 <a href="{{{link}}}">{{title}}</a>
936 {{/next}}
937 </div>
938 <div id="master" style="width: 30%; float: left;">
939 <ul>
940 {{#data}}
941 <li><a href="{{location}}" data-id="{{image_id}}">{{title}}</a></li>
942 {{/data}}
943 </ul>
944 </div>
945 <div style="width: 50%; float: right">
946 <!-- load image here dynamically -->
947 <div id="display" style="margin: 0 auto;">
948 &nbsp;
949 </div>
950 </div>
951 </div>
952
953 #. From the application directory, run the server.
954
955 ``$ mojito start``
956 #. To view your application, go to the URL:
957
958 http://localhost:8666
959
c5dacc0c » isao
2012-11-13 get back joe's docs changes:
960 .. _code_exs_events-src:
961
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
962 Source Code
b5ece1a9 » zhouyaoji
2012-10-01 Fixed steps, replaced 'view template' with 'template', fixed syntax f…
963 ===========
4b307166 » zhouyaoji
2012-05-22 Adding the reST documentation to the Mojito project.
964
965 - `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/application.json>`_
966 - `Mojit Binder <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/mojits/PagerMojit/binders/index.js>`_
74b3d8ae » zhouyaoji
2012-10-03 Fixed syntax for namespacing controllers/models in docs/examples.
967 - `Binding Events Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/>`_
Something went wrong with that request. Please try again.