Alloy backbone

6,343 views
6,065 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,343
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
58
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Alloy backbone

  1. 1. Alloy + Backbone.js = AWESOME!!!!!!!!!!!!
  2. 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. 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. 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. 5. How do I get started?
  6. 6. CreateYour Model
  7. 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. 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. 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. 10. So...How Do I Use My Model? MAGIC!! (not really)
  11. 11. EditYour Alloy.js File SoYou Can Use It Globally! Alloy.Collections.baseball = Alloy.createCollection('baseball');
  12. 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. 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. 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. 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. 16. OK...Back To The Program...How Is That Data Getting Into the TableView?
  17. 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. 18. Time To Edit The Row Controller...Row.js if ($model) { $.row.model = $model.toJSON(); }
  19. 19. So When I Finally Run the Code I See This!
  20. 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. 21. Now What? What Else Is There? • Data Binding - Filtering • Extending Backbone (likeValidation)
  22. 22. Thanks!

×