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 title and a completion state (isDone). Since the title is a string, we
don’t need to do anything special with that. isDone is a boolean, so let’s
tell the model that it should treat this property as a boolean.

Model objects are of the type SC.Record. To tell SproutCore about the various types you might need, you just declare a property ending in the word “Type”. For example:

isDoneType: SC.Record.Bool

Tells SC.Record that it should treat the “isDone” property as a boolean. Find the file /clients/todos/models/task.js and add this line to your file now. Here is what your class should look like:

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

  isDoneType: SC.Record.Bool

}) ;

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.

—NOTE ABOUT FIXTURE DATA HELPING YOU WORK…

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

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

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

{ guid: "task-3",
  type: "Task",
  title: "Next, the world!",
  isDone: "false"
}

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.Task.findAll()

tasks should now contain an array of records. Let’s see if these are the ones we expect. Since this is an array, you can call an invoke() method on it, which will invoke the method you name on each member object and return the result. We’ll use this to get the title property…

 > tasks.invoke('get', 'title');

What the heck is invoke()? The invoke() method is added to all Arrays by SproutCore. It will call the method you name with any passed parameters on all members of the array and return their results in a new array. This is a convenient way to collect data objects.

Now let’s try to get the isDone property:

 > tasks.invoke('get', 'isDone');

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

Related Links

none yet

Comments

edit page to add your comments here.

I’m using SproutCore 0.9.23 . In the fixture file, it seems we need to quote “false” to make it works. e.g.

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

Otherwise, get(‘isDone’) will only return null.