Titanium Quickie: A Simple Integration of Alloy and WordPress JSON Plugin - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

Checkout our Video Series on Mobile App Development



Simple REST integration with Appcelerator Alloy seems to be a recurring theme when looking through the QA Forums and the Alloy User’s Group. For HTML/Javascript developers, Backbone comes with default integration of jQuery to provide the http/ajax client for REST integration. If your endpoint supports the common REST verbs, then things just work.

There is a question in the forums about WordPress integration with Titanium and since WordPress provides a REST API to JSON; I took some time to try and create a simple example of how to string this all together. The question, references WordPress JSON plugin and since wordpress is pretty popular, I figured it was easy to use that instead of creating an alternate REST API service

Appcelerator’s Alloy Documentation on Sync Adapters

BacknoneJS Documentation on Sync Adapters

REST Sync Adapter

First we need a REST based adapter, there is one floating around in github that I have simplified and made more generic. The objective here is to try and stay as true as possible to the BackboneJS implementation so developers have a foundation to build upon. Also please note that this adapter is not complete and I have only implemented the features I needed to retrieve content for the purpose of this example.

So for fetching the content, we need to implement the GET http verb in out sync adapter. All the adapter should do is get the JSON response… that is it! No more, no less. The rest of the response processing should happen elsewhere. With that being said, here is what the code looks like in the adapter file restapi.js



The apiCall function does the Titanium specific http client call to get the content.


The complete restapi alloy sync adapter used in this post is available here

Alloy Models and Collections

So now that we have a way to talk to the wordpress server, we need to create our application specific representation of the content; we will do that using Alloy Models and Collections. We will create a model file called post.js that will be extended to support the functions needed to retrieve and process content from the wordpress server’s API response.

The Alloy sync adapter needs to know how to get the data from the server and what to do with the data response it gets back. So we need to provide the model with the appropriate information. We do that by extending the model and setting the url and the parse functions.

The Model

We need to set the alloy model configuration settings so the model knows how to connect to the adapter we provided.


The url function for this example will be different for models and collections. When we retrieve the model, we need to set the id and call a specific endpoint


The Collection

When we retrieve the collection, there is no need to set the id but we need to specify a different url endpoint


So now when you execute your code to fetch a collection…


you will get the JSON response that would look something like this in a default WordPress implementation.


The last missing piece here is to convert the response above into something BackboneJS likes to deal with. The parse function on models and collections is the method we will implement to make the JSON response useful in our application. The parse function is usually just a straight pass-thru of the JSON response, but as you can see from the listing above, there is more information there then we really need, this is where parse comes in handy. We will strip off the posts array since that is what we really want for our collection results.


This a high level overview of how to integrate Alloy Models with a WordPress site utilizing the JSON API Plugin. This is also a good example of how to integrate a generic REST adapter into an Alloy application. The key objective of the separation of concerns is to put the functionality where it belongs. Adding the url function and the parse function to the model allows us to reuse the sync adapter for any rest based webservice.