Introduction to SproutCore Part Two

The first part of the SproutCore tutorial covered building a simple application.
The time has come to deepen the knowledge and deal with the models in SproutCore.

After reading this manual, you can:

• Describe models using SC.Record.
• Manage models using SC.Store.
• Load the initial data in the repository.
• Send requests to the repository using SC.Query.

1 Preparing the application

')
In the first part of this tutorial, it was explained how to build a simple Todo List application.
Now you know how to describe models, views, and controllers, as well as define their interaction using bindings.
However, we did not have the ability to save information between page updates.

One way to do this is to use SproutCore's data warehouse for record management.
The SC.Store instance is responsible for managing the life cycle of records.
SC.Store uses SC.DataSource to process data downloaded from the server and to prepare it for sending back to the server.

If you have an application from the first part of this guide, use it.
If not, you can download it from GitHub.

In order to use the storage, you must include it in the list of used modules for our application.
Used modules are specified in the config file in the Buildfile file.

config :all, :required => ["sproutcore/core_foundation", "sproutcore/datastore"], :theme => "sproutcore/empty_theme" 

2 Model definition

In the last lesson, we defined the model as a subclass of SC.Object, override it using SC.Record.
Change the code in the file apps / todos / todos.js:

 Todos.Todo = SC.Record.extend({ title: SC.Record.attr(String), isDone: SC.Record.attr(Boolean, { defaultValue: NO }) }); 

Now we use SC.Record as the base class for the model. We also defined model attributes and their types.
Title is now always wrapped into a string, and isDone into a boolean variable. Also, isDone is now false by default,
unless otherwise specified.

3 Creating a static source dataset

The easiest way to start development without connecting to the backend server is to use a static set of source data.
A static set is an array of data hashes that represent each record.
Let's create such a set, for this we will add the following code to the file apps / todos / todos.js after the model description:

 Todos.Todo.FIXTURES = [ { "guid": "todo-1", "title": "Build my first SproutCore app", "isDone": false }, { "guid": "todo-2", "title": "Build a really awesome SproutCore app", "isDone": false }, { "guid": "todo-3", "title": "Next, the world!", "isDone": false } ]; 

Now we have a model and source data, but if you run the application, then the changes are not visible.
The fact is that SC.Store is responsible for loading data. Add to the controller the code that creates the data store for our application.
In the apps / todos / todos.js file we’ll write the following:

 //         Todos = SC.Application.create({ store: SC.Store.create().from(SC.Record.fixtures) }); 

We have created a data warehouse for the application. For now, we are using static source data, but then it will be possible as an argument
from () functions specify the actual data source.

Let's check how our application works. Execute the sc-server command and open http: // localhost: 4020 / todos in the browser.
Now in the javascript console of our browser we will write the following commands:

 records = Todos.store.find(Todos.Todo) records.objectAt(0).get('title') 

We get the result:

 // => "Build my first SproutCore app" 

We simply called the find () method of our repository, which returns all the records as an instance of the SC.RecordArray class.
If you create a new record, it will automatically be added to the repository, also when you destroy the record - it will disappear from the repository.

4 Bundle of controller and storage

Now we can use the storage in the controller of our application. To do this, assign the content property of the object Todos.todoListController
the value returned by the store's find () function. This can be done in the SC.ready () function callback.

Change the code in the apps / todos / todos.js file to the following:

 SC.ready(function() { Todos.mainPane = SC.TemplatePane.append({ layerId: 'todos', templateName: 'todos' }); var todos = Todos.store.find(Todos.Todo); Todos.todoListController.set('content', todos); }); 

If you refresh the page of our application, you can see that the source data that we uploaded to the repository is displayed.
Next, we will rewrite the function of creating new tasks in the file apps / todos / todos.js to the following:

 createTodo: function(title) { Todos.store.createRecord(Todos.Todo, { title: title }); }, 

Finally, we’ll change the delete task function in the apps / todos / todos.js file:

 Todos.todoListController = SC.ArrayController.create({ // ... clearCompletedTodos: function(){ this.filterProperty('isDone', true).forEach( function(item) { item.destroy(); }); }, // ... )}; 

Now our application is fully functional and uses data storage for its work.
The storage easily connects to the backend server by exchanging JSON messages.

Original article