Dashcode Web App: How to programmatically manipulate bound array in dataSource?

Question

I've started using Dashcode to write an interface for presenting the report data for some of our Cocoa tools. I am using a Dashcode data source and bindings to populate the elements in the WebView, and it all seems to be working well so far.

One of the objects in my dataSource is an array of objects that I would like to manipulate programmatically. I can change the object values in the array just fine but if I want to replace the array, or any objects in the array, my bound table isn't able to observe the added objects.

Here is the code that I thought would let me easily replace the bound array with new content:

var dataSource = dashcode.getDataSource("reportData");
var newDetailArray = testArray();
dataSource.setValueForKeyPath(newDetailArray, "content.detailArray");

But this throws the exception:

Exception while binding "content" to keypath "arrangedObjects " TypeError: Result of expression 'this.object.valueForKeyPath' [undefined] is not a function.

Is there something I'm missing that will let me easily manipulate the array's contents programmatically?

Answer 1

here is a solution to the problem:

1) Define a KVO object in main.js first. This step is important since the data of a given dataSource has to be bindable:

anObj = Class.create(DC.KVO, {
    constructor: function(name) {
        this.name = name;
    }
});

2) Create an array that contains objects that belong to the "anObj" class:

function switchContent(event)
{   
    var myPerson = new anObj('Paul');
    var myArray = new Array();
    myArray.addObject(myPerson);

    // 'dataSource' has to be defined in Dashcode as usual
    var ds = dashcode.getDataSource('dataSource');

    // replace content of datasource ds with myArray
    ds.setContent(myArray);   
}

I hope this information helps!