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

score 0 · Answer 1 · answered Jun 10 '14 at 06:09

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.

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

1 Answers1