Alloy backbone

  • 4,703 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,703
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
42
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!