How to push data into SC.SourceListView

Question

I want to push some parsed JSON data from my controller into a SC.SourceListView(Sproutcore Showcase). I use a SC.TreeController and set the parsed JSON as content:

MyApp.thisController = SC.TreeController.create({
    treeItemChildrenKey: 'children',
    content: []
});

The property treeItemChild is set accordingly to the property in the objects and leads to the child objects.

The content in the SC.TreeController contains several objects (JSON data) which base on the following structure (this is an example of one of those objects I want to push into the tree view):

children: Array[3]
    0: Object
        children: Array[1]
        data: "Boogie"
        metadata: Object
        __proto__: Object
    1: Object
    2: Object
data: "Blues"
metadata: Object
__proto__: Object

I want to put the data property in my SC.SourceListView so that it reads.

Blues
    Boogie
    ...
    ...

This content is now binded to the SC.SourceListView and should show the data property on the screen:

viewname: SC.SourceListView.extend({
    contentBinding: SC.Binding.oneWay('MyApp.thisController.arrangedObjects'),
    exampleView: SC.ListItemView.extend({
        contentValueKey: 'data'
    }),
    groupExampleView: SC.ListItemView.extend({
        contentValueKey: 'data'
    })
})

With this I am able to get the data of the top layer of the different objects. But there is no dropdown, which consists of the objects in the deeper layers. How do I set up this view properly? What is the difference between SC.SourceListView and SC.SourceListGroupView?

(Google Group Link)

Answer 1

The SC.SourceListGroupView is the actual list-item view used to render the group within the SC.SourceListView. Currently, you're using

groupExampleView: SC.ListItemView.extend()

However, SC.ListItemView doesn't, by default, know how to render itself as a group, so you should probably change this to

groupExampleView: SC.SourceListGroupView.extend()

After that, it should show you the tree.

Lastly (and I'm assuming this is just a typo in the question): you have

MyApp.thisController.anrrangedObjects

I'm pretty sure you really meant

MyApp.thisController.arrangedObjects

Please add a comment or update your question if changing it to SC.SourceListGroupView doesn't solve your problem! If you still need help, it would also be helpful to see the JSON structure that you are attempting to render :-)

Edit: Okay, so, I'm not 100% sure on this as I can't seem to find any documentation, but according to the SproutCore Showcase, you may need to ensure that your parent objects (those that have children) have a group attribute set to true. Please let us know if that helps or not!