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

2. • 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?

3. 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?

4. 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

5. How do I get started?

6. CreateYour Model

7. 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;
}

8. 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;
}
}

9. 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.

10. So...How Do I Use My Model?
MAGIC!! (not really)

11. EditYour Alloy.js File SoYou Can
Use It Globally!
Alloy.Collections.baseball = Alloy.createCollection('baseball');

12. 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.

13. 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?

14. 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

15. What Else Can I Do With Sync
Adapters?
• Custom Sync Adapter (for your REST API)
• Queries for the SQL Adapter
• Migrations (SQL only)

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

17. 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.

18. Time To Edit The Row
Controller...Row.js
if ($model) {
$.row.model = $model.toJSON();
}

19. So When I Finally Run the Code
I See This!

20. 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();
}

21. Now What? What Else Is There?
• Data Binding - Filtering
• Extending Backbone (likeValidation)

22. Thanks!