Canjs observable list of records to automatically update DOM

Question

How should I define observable object instead of {cases: records} in this code to update dom automatically once this observable is updated:

init : function( element , options ){
                    var el = this.element;debugger;
                    SObjectModelExt.findAll({sobject: new SObjectModel.Case()}).then(function(records){
                        el.html( can.view('casesView', {cases: records}));
                    });
                }

Is this can.Map({case: []}) or can.List? How use it in the mustache helper? {{#each cases }} ?

I've tried to use like

this.records = new can.Map({case: []});
el.html( can.view('casesView', {cases: records}));

and later in the code to do

this.records.attr('cases', entries);

but it doesn't update dom.

Answer 1

You should be able to initialize an empty List and then replace it with the data you got back which should update the list. You can also assign that list for later reference:

init : function( element , options ){
    var el = this.element;
    var cases = this.cases = new can.List();

    SObjectModelExt.findAll({sobject: new SObjectModel.Case()}).then(function(records){
        cases.replace(records);
        el.html( can.view('casesView', { cases: cases }));
    });
}

Then you should just be able to reference it via this.cases later on and remove and add items to that list.