Step 2: Setup Your Model

This todo tracker will have a simple list of tasks. You can give each task a name and choose whether the task is complete or not.

Let’s setup the model for this:

sc-gen model Todos/Task

Let’s start by configuring the task model. Tasks have two properies: a description and a completion state (isDone). In SproutCore you define this schema on your model class.

Model objects are of the type SC.Record. To tell SproutCore about various attributes in your schema, you just declare them as properties on your class.

Let’s add these properties to our Task subclass right now. Open up the file at apps/todos/models/task.js and add fill in the content of the class:

Todos.Task = SC.Record.extend(
/** @scope Todos.Task.prototype */ {

  isDone: SC.Record.attr(Boolean),
  description: SC.Record.attr(String)

}) ;

You use helper methods defined on SC.Record to describe each attribute. These helper methods specify the expected type as well as other constraints. These will sometimes be used to automatically convert properties you set on your record into the proper type, but most often they will be used to perform validation.

In the example above, “isDone” is described as a Boolean while “description” is described as a String. SproutCore will automatically convert any values you set into these types if possible.

OK, we are about ready to try playing around with this object in the web browser. We are going to need some sample data to work with but since we haven’t setup the server yet, we will work with some fixture data.

TODO: NOTE ABOUT FIXTURE DATA HELPING YOU WORK.

Open the fixture file in apps/todos/fixtures/task.js and add the following lines:

{ "guid": "task-1",
  "description": "Build my first SproutCore app",
  "isDone": false },

{ "guid": "task-2",
  "description": "Build a really awesome SproutCore app",
  "isDone": false },

{ "guid": "task-3",
  "description": "Next, the world!",
  "isDone": false }

Get Down In the Console

Now you should have some sample data to work with. Go to your web browser and reload the page. Nothing will look different just yet, but behind the scenes your first task records have been created for you. Open up the console in Firebug or Safari and we’ll play with it…

Let’s start by finding all of the task records currently installed in the system. You can do this with the following command on the JavaScript console:

 > tasks = Todos.store.findAll(Todos.Task)

If you had your store connected to a server, this would ask the server to retrieve all of your tasks. Since you are using fixtures right now, this just returns an array-like object with your fixture tasks instead.

What the heck is “array-like”? You might have noticed that we said the object returned by findAll() was not an Array exactly but “array-like”. In order to support some advanced techniques for working with large data sets, SproutCore defines an interface you can use to work with arrays called SC.Array. This interface is added to the built-in Array object but it is also implemented by several other classes. You can work with array-like objects exactly the same as long as you use the methods defined in SC.Array.

Let’s see if these are the ones we expect.

One useful method SproutCore adds to all array-like objects (including the built-in Array) is getEach(), which will get the property you name on each member object and return the result. We’ll use this to get the description property.

Type this into your JavaScript console:

 > tasks.getEach('description')

You should see an array printed with each of the descriptions in your fixtures:

   ["Build my first SproutCore app", "Build a really awesome SproutCore app", 
   "Next, the world!"]

(From now on, when we show JavaScript console code, we’ll just show the line you type preceded by a “>” and the expected output with no angle bracket.)

Now let’s try to get the isDone property:

 > tasks.getEach('isDone')
   [false, false, false]

Continue to Next Step: Step 3: Build Your Views »

Related Links

none yet

Comments

none yet – edit this page to add one