Sproutcore tips and tricks

The information on the sproutcore tutorials is a great start for creating an application,  but once you veer off that path you get into uncharted territory.  Here are some things that I ran across while creating an app that connects to a RESTFUL web service.

  • When your creating a view,  to get data into an object you need to use bindings.
  • Values are set via the controller
  • if you bind to arrangedObjects you will need to set the content attribute for that controller
  • when you are using loadRecords you need to have a unique key value.  If you don't have a data field named guid you either need to change the default key in the model you are importing into to.  
  • If you have a compound data structure being returned from a restful call you do not need to persist the entire object.  You only need to ensure that the the data is enumerable.
  • For me I needed to set the results returned from a restful call in the callback function in order to avoid timing issues with the data being set.

 

ie for a flot graph you would have the following in your main_page.js file.

 

graph: Flot.GraphView.design({

    layout: { left: 0, top: 0, height: 400, right: 0 } ,

                  dataBinding: 'MyApp.myController.arrangedObjects',

            optionsBinding: 'MyApp.myController.options'


  })

 

 In your datasource 

 

 

MyApp.MyDataSource = SC.DataSource.extend(


 {


    // ..........................................................

    // QUERY SUPPORT

    //


    fetch: function(store, query) {


        // TODO: Add handlers to fetch data for specific queries.

        // call store.dataSourceDidFetchQuery(query) when done.


        if (query === MyApp.MY_QUERY) {

            SC.Request.getUrl('/some_request/all').header({'Accept': 'application/json'}).json()

                    .notify(this, 'didFetchStuff', store, query)

                    .send();

            console.log("got response");

            return YES;

        }


        return NO;

    },


    didFetchStuff: function(response, store, query) {


    data = response.get('body');

    if (SC.ok(response)) {

    store.loadRecords(MyApp.MyModel, data.some_nested_structure.isEnumerable ?       data.some_nested_structure: [data.some_nested_structure]);

    // I am binding to a flot object so it would look like this.





    my_flot_data = SC.Object.create({label: 'My wonderful data',  data : my_objects}); 

    // this will set the value for arrangedObjects that you bound to that controller in your flot display objects under the dataBinding attribute

 







    MyApp.myController.set('content', some_data);

 

   } else store.dataSourceDidErrorQuery(query, response);


}

});

 

 

Published on Tue, 19 Apr 2011 20:13
0 comments

RSS