can.Model with can.view to populate DOM dynamically or once records are loaded

Question

There is the following can.Model:

var CaseModel = can.Model.extend({
    findAll: function(args){
        var def = $.Deferred();
        args.sobject.retrieve(args.criteria, function(err, records) {//records should be populated into view
            if(err) def.reject(err);
            else def.resolve(records);
        });
        return def;
    }}, {});

How should I implement the can.Control with init method to populate can.view with deffered=CaseModel.findAll({sobject: new SObjectModel.Case()}) like here:

this.element.html(can.view('recipes', Deffered));

and how these records are looped in mustache template: {{#each ???? }}

Thanks

Answer 1

Here is an example of how to do it with deferreds:

var CaseModel = can.Model.extend({
    findAll: function(args){
        var def = $.Deferred();

         setTimeout(function () {
            console.log('time');
           def.resolve([{name: 'sam'}]);
        }, 1000);

        return def.promise();
    }}, {});

var Control = can.Control({
  init: function (ele, options) {
    var self = this;
    var pro = CaseModel.findAll({});


    can.view('view', {records: pro})
    .then(function(frag) {
      self.element.html(frag);
    });

  }
});

var control = new Control('.app');


 <script type="text/mustache" id="view">
  VIEW
  <ul>  
    {{#each records}}
            <li>    
                {{name}}
           </li>
       {{/each}}
   </ul>
 </script>

And here is a demo http://jsbin.com/kedih/1/edit

You should be able to adapt this to include your args.sobject.retrieve instead of the setTimeout in the example.