Skip to content
This repository has been archived by the owner on Oct 30, 2018. It is now read-only.

Commit

Permalink
Continuing to work on init function.
Browse files Browse the repository at this point in the history
  • Loading branch information
Joe Catera committed Nov 13, 2012
1 parent 9275476 commit f3e9641
Show file tree
Hide file tree
Showing 9 changed files with 78 additions and 229 deletions.
124 changes: 62 additions & 62 deletions docs/dev_guide/code_exs/binding_events.rst
Expand Up @@ -9,9 +9,10 @@ Binding Events
Summary
=======

This example shows how to bind events to a mojit, configure code to run on the client, and make AJAX
calls to the YQL Web service. The application listens for events and then makes AJAX calls to
YQL to get Flickr photo information.
This example shows how to bind events to a mojit, configure code to run
on the client, and make AJAX calls to the YQL Web service. The application
listens for events and then makes AJAX calls to YQL to get Flickr photo
information.

The following topics will be covered:

Expand All @@ -32,12 +33,13 @@ Implementation Notes
Configuring the Application to Run on the Client
------------------------------------------------

Mojito lets you configure applications to run on either the server or client side. This example uses
binders that are deployed to the client, so we need to configure Mojito to deploy the application
to the client, where it will be executed by the browser.
Mojito lets you configure applications to run on either the server or client
side. This example uses binders that are deployed to the client, so we need
to configure Mojito to deploy the application to the client, where it will
be executed by the browser.

To configure Mojito to run on the client, you simply set the ``"deploy"`` property to ``true`` in
``application.json`` as seen below.
To configure Mojito to run on the client, you simply set the ``"deploy"``
property to ``true`` in ``application.json`` as seen below.

.. code-block:: javascript
Expand All @@ -61,9 +63,9 @@ To configure Mojito to run on the client, you simply set the ``"deploy"`` proper
Getting Data with YQL in the Model
----------------------------------

In the mojit model, the `YUI YQL Query Utility <http://developer.yahoo.com/yui/3/yql/>`_ is used to
get Flickr photo information. To access the utility in your model, specify ``'yql'`` in the
``requires`` array as seen in the code snippet below:
In the mojit model, the `YUI YQL Query Utility <http://developer.yahoo.com/yui/3/yql/>`_
is used to get Flickr photo information. To access the utility in your model,
specify ``'yql'`` in the ``requires`` array as seen in the code snippet below:

.. code-block:: javascript
Expand All @@ -73,10 +75,10 @@ get Flickr photo information. To access the utility in your model, specify ``'yq
...
}, '0.0.1', {requires: ['yql']});
This code example uses the ``flickr.photos.search`` table to get information for photos that have a
title, description, or tags containing a string. For example, the YQL statement below returns Flickr
photo information for those photos that have a title, description, or tags containing the string
"Manhattan".
This code example uses the ``flickr.photos.search`` table to get information
for photos that have a title, description, or tags containing a string. For
example, the YQL statement below returns Flickr photo information for those
photos that have a title, description, or tags containing the string "Manhattan".

Copy the query below into the `YQL Console <http://developer.yahoo.com/yql/console/>`_,
replace ``{your_flickr_api_key}`` with your own Flickr API key, and then click **TEST**
Expand All @@ -90,7 +92,7 @@ seen here:

``http://farm + {farm} + static.flickr.com/ + {server} + / + {id} + _ + {secret} + .jpg``

In the ``model.js`` of ``PagerMojit`` shown below, the ``YQL`` function uses the YQL statement above
In the ``model.server.js`` of ``PagerMojit`` shown below, the ``YQL`` function uses the YQL statement above
to get photo data, then parses the returned response to create the photo URIs. The model then wraps
the photo information in an object and stores those objects in the ``images`` array that is sent to
the controller through the ``callback`` function.
Expand Down Expand Up @@ -663,54 +665,52 @@ To set up and run ``binding_events``:
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
index: function(actionContext) {
var page = actionContext.params.getFromMerged('page');
var start;
page = parseInt(page) || 1;
if ((!page) || (page<1)) {
page = 1;
}
// Page param is 1 based, but the model is 0 based
start = (page - 1) * PAGE_SIZE;
var model = actionContext.models.PagerMojit;
// Data is an array of images
model.getData('mojito', start, PAGE_SIZE, function(data) {
Y.log('DATA: ' + Y.dump(data));
var theData = {
data: data, // images
hasLink: false,
prev: {
title: "prev" // opportunity to localize
},
next: {
link: createLink(actionContext, {page: page+1}),
title: "next"
},
query: 'mojito'
};
if (page > 1) {
theData.prev.link = createLink(actionContext, {page: page-1});
theData.hasLink = true;
index: function(actionContext) {
var page = actionContext.params.getFromMerged('page');
var start;
page = parseInt(page) || 1;
if ((!page) || (page<1)) {
page = 1;
}
actionContext.done(theData);
});
}
};
// Generate the link to the next page based on:
// - mojit id
// - action
// - params
function createLink(actionContext, params) {
var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
for (var k in params) {
mergedParams[k] = params[k];
// Page param is 1 based, but the model is 0 based
start = (page - 1) * PAGE_SIZE;
var model = actionContext.models.PagerMojit;
// Data is an array of images
model.getData('mojito', start, PAGE_SIZE, function(data) {
Y.log('DATA: ' + Y.dump(data));
var theData = {
data: data, // images
hasLink: false,
prev: {
title: "prev" // opportunity to localize
},
next: {
link: createLink(actionContext, {page: page+1}),
title: "next"
},
query: 'mojito'
};
if (page > 1) {
theData.prev.link = createLink(actionContext, {page: page-1});
theData.hasLink = true;
}
actionContext.done(theData);
});
}
};
// Generate the link to the next page based on:
// - mojit id
// - action
// - params
function createLink(actionContext, params) {
var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
for (var k in params) {
mergedParams[k] = params[k];
}
return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
}
return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
}
}, '0.0.1', {requires: ['dump']});
}, '0.0.1', {requires: ['dump']});
#. To get Flickr photo information using YQL, replace the code in ``model.server.js`` with
the following:
Expand Down
4 changes: 1 addition & 3 deletions docs/dev_guide/code_exs/views_multiple_devices.rst
Expand Up @@ -223,9 +223,7 @@ To set up and run ``device_views``:
YUI.add('device', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
/* Method corresponding to the 'index' action.
*
* @param ac {Object} The action context that
Expand Down
@@ -1,5 +1,3 @@


============
Prerequisite
============
Expand Down
Expand Up @@ -154,10 +154,6 @@ controller outputs different results.
*/
Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
/**
* Method corresponding to the 'index' action.
*
Expand Down
1 change: 0 additions & 1 deletion docs/dev_guide/intro/index.rst
@@ -1,4 +1,3 @@

==================
Introducing Mojito
==================
Expand Down
19 changes: 8 additions & 11 deletions docs/dev_guide/intro/mojito_configuring.rst
Expand Up @@ -273,8 +273,6 @@ Mojito and Cocktails.
+------------------------+---------------+-----------+-------------------------------+--------------------------------------------------------------------------------+




.. _specs_obj:

specs Object
Expand Down Expand Up @@ -780,9 +778,6 @@ the application-level ``Foo`` mojit, the controller of the Bar mojit would inclu
YUI.add('BarMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
index: function(actionContext) {
actionContext.done({title: "Body"});
}
Expand Down Expand Up @@ -1210,18 +1205,20 @@ The ``init`` function in the binder instead of a configuration object is passed
Application-Level Configurations
--------------------------------

Only the mojit controller has access to application-level configurations through the
``actionContext`` object.
Only the mojit controller has access to application-level configurations
using the ActionContext ``Config`` addon.

.. _access-applicationjson:

application.json
################

The controller functions that are passed an ``actionContext`` object can reference the
application configurations in ``application.json`` with ``ac.app.config``. For example, if
you wanted to access the ``specs`` object defined in ``application.json``,
you would use ``ac.app.config.spec``.
The controller functions that are passed an ``actionContext`` object can get the
application configurations in ``application.json`` with the method ``getAppConfig``
of the ``Config`` addon.

For example, if you wanted to access the ``specs`` object defined in ``application.json``,
you would use ``ac.config.getAppConfig()``.

.. _access-routesjson:

Expand Down

0 comments on commit f3e9641

Please sign in to comment.