paul/sc-notes.mkd

## sc-notes.mkd

      
    Raw
  

              sc-notes.mkd
            
          
    Sproutcore 2.0 questions

I'm trying to write a complicated app in SC2. There's no editing component yet, just a display of (lots of data). Starting from the Todos & Handlebars guides, here's some of the stuff I've had to google for, or wasn't readily obvious.
Note: I like coffeescript and haml


Why is there sometimes references to SC.ArrayController?

Colin C: it was gone but its back now. we need to generate the docs again.


Why is App.fooController an SC.Object, and App.foosController an SC.ArrayProxy? Shouldn't there just be a generic SC.Controller, or SC.CollectionController, if the behavior is different?


How do I nest controllers? Eg, BlogApp.postsController and BlogApp.commentsController, where I want to display several posts and their comments on the page?

How do I organize the view templates? What do I say in the post template where I want the comments to go?

Looks like I put {{view comments}} in the post template? Or maybe {{#collection}}? What goes in the contentBinding attribute in that case?


If I follow the handlebars guide, and put <script type="text/x-handlebars" ...> in the <head>, how do I specify where to put the rendered result? Eg, if I have a div#content, how do I tell SC I want the template rendered there?


How do I hook up a SC.View to a SC.Object?

Does SC.CollectionView replace the need for a postsController = SC.ArrayProxy.create? If so, how? If not, how do I wire a collectionView and a controller together?
itemViewClass: SC.View.extend(...) kinda sucks. How about itemTemplateName: 'post'?


Only double-quotes work inside {{collection foo="bar"}} attributes. Single quotes gives the unhelpful error: Expecting 'STRING', 'INTEGER', 'BOOLEAN', 'ID'.


How do I set up nested controllers? Eg, in a blog, theres a controller for the posts, and then each post has a controller for its comments.


Example App Showing "complicated" Structure

application.js

App.Post = SC.Object.extend
  title: null
  text: null

  commentsController: SC.ArrayController.create
    content: []

    addComment: (title, text) ->
      comment = App.Comment.create author: author, text: text
      @pushObject comment

  addPost: (author, text) ->
    @commentssController.addComment(author, text)

App.Comment = SC.Object.extend
  author: null
  text: null

App.PostsView = SC.CollectionView.extend
  itemViewClass: SC.View.extend(templateName: 'post')

App.CommentsView = SC.CollectionView.extend
  itemViewClass: SC.View.extend(templateName: 'comment')

App.postsController = SC.ArrayController.create
  content: []

  addPost: (title, text) ->
    post = App.Post.create title: title, text: text
    @pushObject post

$ ->
  post = App.postsController.addPost "SproutCore 2.0", "lorum ipsum"
  post.addComment("Paul", "lorum ipsum")

index.html

%h1 My Blog

#posts
  {{collection App.PostsView contentBinding="App.postsController"}}

%script{type: 'text/x-handlebars', 'data-template-name' => 'post'}
  %article
    %h2
      {{content.title}}

    {{content.text}}

    .comments
      {{collection App.CommentsView contentBinding="contentView.commentsController"}}

%script{type: 'text/x-handlebars', 'data-template-name' => 'comment'}
  %h3
    {{content.author}}

  {{content.text}}