Setting up a SC.DataSource which contains just a single object

Question

I have place the full source at https://github.com/ericgorr/myproject.git with the cascading_datasource app.

I have a item_model.js with the following code:

CascadingDatasource.Item = SC.Record.extend(
{
      name:     SC.Record.attr(String),
      ph:       SC.Record.attr(String)
});

CascadingDatasource.Item.itemQuery = SC.Query.remote( CascadingDatasource.Item, { targetDataSource: 'itemDataSource' });

My data_source.js is:

sc_require('data_sources/itemDataSource');

CascadingDatasource.dataSource = SC.CascadeDataSource.create(
{
      dataSources: ['itemDataSource'],

      itemDataSource: CascadingDatasource.itemDataSource,

});

My itemController.js is:

CascadingDatasource.itemController = SC.ObjectController.create({
});

My itemDataSource.js is:

sc_require( 'models/item_model' );

CascadingDatasource.itemDataSource = SC.DataSource.create(
{
    fetch: function( store, query ) 
    {
        var handled     = false,
            itemRecord;

        if ( query.recordType === CascadingDatasource.Item && query.targetDataSource === 'itemDataSource') 
        {       
            CascadingDatasource.store.loadRecord( CascadingDatasource.Item, {
                name:   'the name',
                ph:     'the phone number'
            }); 

            var theRecords = CascadingDatasource.store.recordsFor( CascadingDatasource.Item );

            // Indicate that we took this request.
            handled = true;
        }

        return handled;
    }
});

It is here that I am missing a key piece. I want this data source to contain just a single object, but I am not sure how to return it content

My ready_state.js is:

CascadingDatasource.ReadyState = SC.State.extend({ 

    enterState: function() 
    {
        CascadingDatasource.itemController.set( 'content', CascadingDatasource.store.find( CascadingDatasource.Item.itemQuery ) );

        CascadingDatasource.getPath('mainPage.mainPane').append();        
    },

    exitState: function() 
    {
        CascadingDatasource.getPath('mainPage.mainPane').remove();
    }

});

I have a SC.LabelView with the following:

valueBinding:   SC.Binding.oneWay( 'CascadingDatasource.itemController.name' )

Again, what appears to be the problem is that:

CascadingDatasource.store.find( CascadingDatasource.Item.itemQuery )

Is not returning any content and I am not sure why.

If everything is working properly, there are to SC.LabelView's on the main page which should be bound to the 'name' and 'ph' properties of the result being held in CascadingDatasource.itemController. However, currently, the main page is blank.

I am not currently seeing any errors in the Chrome console.

Answer 1

Okay, so after cloning your project, I was able to find the real issue.

According to the docs on fetch, you must call loadQueryResults on the store so that it knows to update everything properly. Change your code to the following and it works for me:

var storeKey = CascadingDatasource.store.loadRecord( CascadingDatasource.Item, {
  name:   'the name',
  ph:     'the phone number'
});

store.loadQueryResults(query, [storeKey]);

I can also send you a pull request with the proper fixes if this doesn't work, but my text editor did all sorts of funny things to the actual files because I use spaces instead of tabs :-P