Trouble trying to create a CanJS small widget

1.   <form enctype="multipart/form-data" novalidate="novalidate" method="post" class="form-horizontal" action="/conta/Plati/ExecutaSelectieDosare">
2.                <div class="modal-header">
3.                 <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
4.                 <h3>Selectati dosare de platit</h3>
5.             </div>             
6.             <div class="model-body overflow">
7.                 <section>
8.                     {{#if Errors.length}}
9.                        <div class="alert alert-block alert-error">
10.                             {{#each Errors}}
11.                                 <p>{{Message}}</p>
12.                             {{/each}}
13.                        </div>
14.                     {{/if}}
15.                      <input type="hidden" value="{{Id}}" name="SelectieId" data-val-required="Trebuie aleasa o selectie de plati" data-val-number="Campul de identificare a selectie trebuie sa fie format dintr-un numar" data-val="true">
16.                     {{#each DosareSelectate}}
17.                         <input type="hidden" name="Dosare[0].DosarId" value="{{DosarId}}"/>
18.                         <input type="hidden" name="Dosare[0].EsteFinal" value="{{IsSelected}}">
19.                         <input type="hidden" name="Dosare[0].Suma" value='{{Suma}}' data-val-required="E necesara o suma!" data-val-range-min="1" data-val-range-max="{{SumaMaxima}}" data-val-range="Suma trebuie sa fie mai mare decat 0" data-val-number="Suma trebuie sa fie un numar." data-val="true">
20.                      {{/each}}
21.                     <div class="control-group required ">
22.                         <label class="control-label" for="SumaExecutata">Suma</label>
23.                         <div class="controls">
24.                             <input type="text" value="{{Suma}}" readonly="readonly" name="SumaExecutata" data-val-required="E necesara o suma!" data-val-range-min="1" data-val-range-max="{{SumaMaxima}}" data-val-range="Suma trebuie sa fie mai mare decat 0" data-val-number="The field Suma must be a number." data-val="true">
25.                             <span data-valmsg-replace="true" data-valmsg-for="SumaExecutata" class="field-validation-valid help-inline"></span>                        
26.                         </div>
27.                     </div>
28.                   <div>
29.                       <table class="table table-hover table-condensed">
30.                         <thead>
31.                             <tr>
32.                                 <th>Numar Dosar</th>
33.                                 <th>Numar Polita</th>
34.                                 <th>Data Propunere</th>
35.                                 <th>Banca</th>
36.                                 <th>Cont</th>
37.                                 <th>Titular</th>
38.                                 <th>CNP</th>
39.                                 <th>DataMaxPlata</th>
40.                                 <th>Valoare</th>
41.                                 <th><button class="btn btn-mini" type="button">Ales</button></th>
42.                                 <th>Suma executata</th>
43.                                  <th><button type="button" class="btn btn-mini">Final</button></th>
44.                             </tr>
45.                         </thead>
46.                         <tbody>
47.                              {{#each Dosare}}
48.                            <tr>
49.                                     <td>{{NumarDosar}}</td>
50.                                     <td>{{NumarPolita}}</td>
51.                                     <td>{{DataPropunere}}</td>
52.                                     <td>{{Banca}}</td>
53.                                     <td>{{Cont}}</td>
54.                                     <td>{{Titular}}</td>
55.                                     <td>{{CNPCUI}}</td>
56.                                     <td>{{DataMaxPlata}}</td>
57.                                     <td>{{Valoare}}</td>
58.                                     <td>
59.                                         <input type="checkbox" can-value='IsSelected'/ >
60.                                     </td>
61.                                     <td>
62.                                         <input type="text" name="Dosare[0].Suma" can-value='Suma' {{#IsSelected}} disabled="disabled" {{/IsSelected}} class="input-small" data-val-required="E necesara o suma!" data-val-range-min="1" data-val-range-max="{{SumaMaxima}}" data-val-range="Suma trebuie sa fie mai mare decat 0" data-val-number="Suma trebuie sa fie un numar." data-val="true">
63.                                         {{#IsSelected}}
64.                                             <span data-valmsg-replace="true" data-valmsg-for="Dosare[0].Suma" class="field-validation-valid help-inline"></span> 
65.                                         {{/IsSelected}}   
66.                                     </td>
67.                                     <td><input type="checkbox" name="Dosare[0].EsteFinal" value="true" {{#IsSelected}} disabled="disabled" {{/IsSelected}}></td>
68.                             </tr>
69.                              {{/each}}
70.                         </tbody>
71.                     </table>
72.                    <ul class="pager">
73.                     <li class="{{#unless CanPrev}}disabled{{/unless}}"><a href="#" can-click="Prev">Previous</a></li>
74.                     <li class="{{#unless CanNext}}disabled{{/unless}}"><a href="#" can-click="Next">Next</a></li>
75.                    </ul>
76.                   </div>
77.                 </section>
78.             </div>  
79.             <div class="modal-footer">
80.                 <button class="btn btn-success" id="submitExecutie" type="submit" {{#if Errors.length}} disabled="disabled" {{/if}}>Salvati selectie</button>
81.                 <button data-dismiss="modal" class="btn" type="reset">Inapoi</button>
82.             </div>
83.    </form>

And the following javascript code:

1. (function ($, can) {
2. 
   
3.     var DosareDauna = can.Model.extend({
4.         findAll: "/conta/Plati/GetDosareForSelectie"
5.     }, {});
6. 
   
7.     can.Component.extend({
8.         tag: "executadosare",
9.         template: can.view("selecteazaDosare"),
10.         init: function() {
11.         },
12.         scope: {
13.             Count: Infinity,
14.             Offset: 0,
15.             Limit: 25,
16.             Prev: function () {
17.                 //todo
18.             },
19.             Next: function () {
20.                 //todo
21.             },
22.             CanNext: function () {
23.                 return this.attr('Offset') < this.attr('Count') - this.attr('Limit');
24.             },
25.             CanPrev: function () {
26.                 return this.attr('Offset') > 0;
27.             },
28.             ToateDosarele: can.compute( function () {
29.                 var self = this;
30.                 var id = self.attr('id');
31.                 dosareDeferred = DosareDauna.findAll({ id: 26 }),
32.                 dosareDeferred.then(function (dosare) {
33.                     self.attr('Count', dosare.length);
34.                 });
35.                 return dosareDeferred;
36.             }),
37.             Dosare : can.compute( function(){
38.                 var self = this;
39.                 var dosare = can.Deferred();
40.                 self.attr('ToateDosarele').then(function (toateDosarele) {
41.                     var lazyDosare = [];//def.resolve({ animals: [ 'pig', 'cow' ] })
42.                     toateDosarele.forEach(function (element, index, list) {
43.                         if (index >= self.attr('Offset') && index < (self.attr('Offset') + self.attr('Limit'))) {
44.                             lazyDosare.push(element);
45.                         }
46.                     });
47.                     dosare.resolve( lazyDosare );
48.                 });
49.                 return dosare;
50.             }),
51.             DosareSelectate: can.compute(function(){
52.                 var self = this;
53.                 var selectate = can.Deferred();
54.                 self.attr('ToateDosarele').then(function (toateDosarele) {
55.                     var lazyDosare = [];
56.                     toateDosarele.forEach(function (element, index, list) {
57.                         if (element.attr('IsSelected') === true) {
58.                             lazyDosare.push(element);
59.                         }
60.                     });
61.                     selectate.resolve(lazyDosare);
62.                 });
63.                 return selectate; // [1, 4, 9]
64.             }),
65.             Errors: [],
66.         }
67.     });
68. 
    
69. }(jQuery, can));

I try to create a paginated grid, which loads all the elements at once, and pages through them only at client side. The can.Model retrieves the number of correct elements (when called in ToateDosarele), and  Dosare and DosareSelectate resolve their promises with the correct number of elements at the time of the widget's creation. However, the html output is ... weird... It shows the template as above, except nothing is populated, and there are 8 rows, when it should be only 2. I have tried running the can.Component example in the web app that I'm using, and it worked, but I'm not sure how to tackle this problem. Any suggestions?