Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

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

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.

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?

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.