Connecting Array controller, Statechar and view

labels.js

Pharos360.labelsController = SC.ArrayController.create(
/** @scope Pharos360.labels.prototype */ {
       
  // TODO: Add your own code here.
          
}) ;

loggedIn.js

  /*
   * This is the portion of the Ki state that sets up the labels' store.
   */

  enterState: function() {
    /*
     * Normally we'd start talking to the server and setup a callback that would
     * fire when the data was received (or we'd observe the datastore and wait for the
     * data to be available). Since this is just a fixtures DataStore...we won't worry
     * about that currently.
     */
    var coursesStore = Pharos360.store.find(Pharos360.Course);
    var labelsStore = Pharos360.store.find(Pharos360.Label);
    
    if (coursesStore != null && labelsStore != null) {
     
      // Setup the controllers
      Pharos360.coursesController.set('content', coursesStore);
      Pharos360.labelsController.set('content', labelsStore);
      
      // Show the UI
      Pharos360.getPath('mainPage.mainPane').append();
      
    } else {
      console.log('An error occured while attempting to load the course/label information.');
    } 
  },

main_page.js

// In your main_page.js, where you actually use the view, is where you should create any of the bindings.

// ScrollView is designed to take a 'contentView' and scroll it, that's all.
navView: SC.ScrollView.design({
  contentView: Pharos360.NavigationView.design({
    labelsBinding: 'Pharos360.labelsController.arrangedObjects'
  })
})

navigation.js

// ScrollView is special, you can't define your own render method for it, without breaking it.
Pharos360.NavigationView = SC.View.extend(SC.ContentDisplay, { 
  
  testVar: "something", 
      
  displayProperties: ['labels'],
      
  labels: null, // You should not set bindings in a view definition, only when your create your view (see below)
        
  render: function(context) {
    sc_super();
    console.log('render called');
        
    var data = {
      labels = this.get('labels'),
      sc_view:this 
    };
    var template = SC.TEMPLATES['navigation'];
          
    context.push(template(data));
  },      
          
  update: function(jquery) {
    console.log('event fired...');
          
    var labels_html = "",
        labels = this.get('myTest');

    labels.forEach(function (label, index) {
          
      labels_html += "<li class='label'>" + label.get('title') + "</li>";
    });   
          
    jquery.find('ul.labels').html(labels_html);
  }   

});