Alloy + Backbone.js = AWESOME!!!!!!!!!!!!

• Owner of Eccra Solutions, LLC.

• 15 years experience in development/consulting

• Specialize in Mobile Development

• Focusing on Ruby on Rails, Appcelerator, Objective C, Java, & NodeJs

• Member of the Appcelerator Titan Program & TCAD

• Loves Indie Music, Food and the Reds (Liverpool & Cincinnati)

• Twitter: @Eccra

• URL: www.eccra.com

• GitHub: bradenpowers

Who am I?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

What is Backbone?

Wait a minute

• This is a mobile app, not a web app. How do we use it?

• Don’t worry...It is cooked into Alloy

How do I get started?

Create Your Model

Presto...Your Model is Created!

exports.definition = {config: {

columns: { "city": "string", "name": "string"},adapter: {

type: "sql",collection_name: "baseball"

}},extendModel: function(Model) {

_.extend(Model.prototype, {// extended functions and properties go

here});

return Model;},extendCollection: function(Collection) {

_.extend(Collection.prototype, {// extended functions and properties go

here});

return Collection;}

}

What If I Have A Database That I Want To Use?

exports.definition = {config: {

"adapter": {"type": "sql","collection_name": "baseball","db_file": "/baseball.sqlite","idAttribute": "id","remoteBackup": false

}},extendModel: function(Model) {

_.extend(Model.prototype, {// extended functions and properties go

here});

return Model;},extendCollection: function(Collection) {

_.extend(Collection.prototype, {// extended functions and properties go

here});

return Collection;}

}

What If I Have A REST API That I Want To Use?

exports.definition = {config: {

adapter: {type: "baseball_rest",collection_name: "baseball",base_url: 'YourURL/baseball'

}},extendModel: function(Model) {

// Mongo uses _id as the model ID_.extend(Model.prototype, {

idAttribute: '_id'});return Model;

}}

* Please note that you have to build your own REST API for this to work! That is a ton of fun and I don’t have enough time to talk about it here.

So...How Do I Use My Model?

MAGIC!! (not really)

Edit Your Alloy.js File So You Can Use It Globally!

Alloy.Collections.baseball = Alloy.createCollection('baseball');

Time to Edit the Index.js File To Grab that Data!var teams = Alloy.Collections.baseball;

teams.fetch();

$.index.open();

What is that “fetch thing? “ Fetch is what is used to bind the collection to the TableView.

Now Let’s Edit the View...Index.xml

<Alloy><Window class="container"><TableView id="table" dataCollection="baseball">

<Require src="row"></Require></TableView>

</Window></Alloy>

How Does The Data Get Into The TableView?

The Use Of BackBone Sync Adapters

• FOR A COLLECTION

• FETCH - Grabs the Data

• CREATE - New or Updates

• DESTROY - Deletes

• FOR A MODEL

• FETCH - Grabs the Data

• SAVE - New or Updates

• DESTROY - Deletes

What Else Can I Do With Sync Adapters?

• Custom Sync Adapter (for your REST API)

• Queries for the SQL Adapter

• Migrations (SQL only)

OK...Back To The Program...How Is That Data Getting Into the

TableView?

Time To Create the Row.xml That We

Required in Index.Xml

<Alloy><TableViewRow>

<Label id="city" text="{city}"/><Label id="name" text="{name}"/>

</TableViewRow></Alloy>

The data in the { } is the data bound from the collection.

Time To Edit The Row Controller...Row.js

if ($model) {$.row.model = $model.toJSON();

}

So When I Finally Run the Code I See This!

OK...That Is Awesome...What If I Want

to Add Another Team?function addBaseBallTeam(e) {

var model = Alloy.createModel('baseball', {city: $.cityText.value,name: $.nameText.value

});

// add model to the collection and save it to sqlite and then refresh the data

team.add(model);model.save();

team.fetch();}

Now What? What Else Is There?

• Data Binding - Filtering

• Extending Backbone (like Validation)

Thanks!