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

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.