Step 4: Hook Up Your Data

Now we want to show the tasks in your data. To do this, you are going to need a controller. Controllers are where you put the spaghetti code of your application. They help to shuffle data between your models object and your views, and help to manage committing these changes back to the server when necessary. <h1>Creating a Controller</h1> In our case, we are going to need one controller for now called the tasksController. This will be a ArrayController since it helps to display a collection of records held in an array. The SproutCore generator will help you create one of these. On the command line, type the following: <pre class="console">sc-gen controller Todos.tasksController SC.ArrayController</pre> This will create a file in apps/todos/controllers/tasks.js. Open the file and take a look at it. It should now read: <pre><code>Todos.tasksController = SC.ArrayController.create( /** @scope Todos.tasksController.prototype */ { // TODO: Add your own code here. }) ; </code></pre> An SC.ArrayController behaves just like the array you set as its content, giving you the ability to bind it directly to your ListView which in turn means it will show any array you set as “content” property to the ArrayController, without the need of any additional work. <h1>Hooking Up Your View</h1> Next, we need to hook this controller up to your view. Back in your main_page, you created an SC.ListView. We want this list view to display the contents of the collection controller we just created. We do this using a binding. Bindings are like wires that connect parts of your application. They automatically relay changes from one part of your app to the other. An ArrayController in particular has two properties that we need to bind to the list view: <ul> <li>The arrangedObjects property contains an array of Tasks for the current collection.</li> <li>The selection property contains an array with the currently selected Tasks.</li> </ul> To bind your ListView to these new properties, you simply need to add the bindings to your design. Open up your main page design again (in apps/todos/english.lproj/main_page.js) and edit the SC.ListView design like so: in apps/todos/english.lproj/main_page.js: <pre><code>contentView: SC.ListView.design({ contentBinding: 'Todos.tasksController.arrangedObjects', selectionBinding: 'Todos.tasksController.selection' }) </code></pre> Go ahead and reload your page now. You will notice that you task list is still empty. Your list view is now getting some content, but it is an empty array! The controller still doesn’t have any content. Let’s fix that. <h2>Creating an array of tasks.</h2> When you load your SproutCore application in your web browser, SproutCore loads your views and all of your classes and then finally calls your main() function. This is defined in apps/todos/main.js. The last thing you will do in this function is get the initial set of data you want to display and plug it into a controller. Let’s do that now. Open your main.js file and add the following to the bottom of the Todos.main() function in main.js: in apps/todos/main.js: <pre><code>var tasks = Todos.store.findAll(Todos.Task); Todos.tasksController.set('content', tasks); </code></pre> In your fully developed application, this code would reach out to your server and return an array of tasks from the server. Since we are still using fixtures, this method returns an SC.RecordArray with the task objects found in your fixtures. It then sets that record array as the content of your tasksController. Remember that a controller will “project” its content property to any view that is bound to it. Go ahead and refresh now to see what happens. <img src="http://img.skitch.com/20090406-crkkrgau94ap9et5th1esj6k66.png" alt="Todos" style="border: 1px black solid;" /> Eureka! We have data! All of your tasks are listed there. You can even click on them to select. <h1>Configuring Your List Items</h1> So far so good, but the tasks do look pretty ugly. That’s because we haven’t told the list view how it should interpret the task object to display it yet. Since we haven’t given it any clues, it just converts the task to a string and you get what you see here. As you might guess, you can configure how the ListView should display this by adding options in your main page again. Edit your SC.ListView in the main page like so: in apps/todos/english.lproj/main_page.js: <pre><code> contentView: SC.ListView.design({ contentBinding: 'Todos.tasksController.arrangedObjects', selectionBinding: 'Todos.tasksController.selection', contentValueKey: "description", contentCheckboxKey: "isDone" }) }) </code></pre> And refresh. Now we’re cooking! You can select your items, and check the boxes. <blockquote> NOTE: As of April 5, 2009 with the SproutCore 1.0 alpha the checkboxes are not showing their checked state. Checking the box will change the isDone value but it will not display on screen. This is a bug. </blockquote> <img src="http://img.skitch.com/20090406-enqbmjrt18j5w3i8u2e146wbqf.png" alt="Todos" style="border: 1px black solid;" /> The contentFOOKey syntax here basically tells the ListView which properties on your content object map to the properties needed by its list items. In this case, the “value” property on a list item is set to show the description and the “checkbox” property is set to show the isDone state. Now that you have your basic data setup, next we’ll work on wiring up the remaining bits of the UI. Continue to next step: [[Step 5: Finishing the UI]] » <h1>Related Links</h1> <h1>Comments</h1> 2008-07-27T17:09:10-07:00 40069 step-4-hook-up-your-data

37005

2009-05-12T18:01:35-07:00

157