Upload
braden-powers
View
5.457
Download
4
Tags:
Embed Size (px)
Citation preview
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!