Two-level controls+views and live binding?

Hello

I'm exploring with CanJS controls, views and live binding.

I want to create a two-level control structure where I have one ItemsController
that holds multiple ItemController inside:

Here are my EJS templates:

itemsTemplate.ejs :

1. <% items.each(function(item) { %>
   
2.     <div id="itemHolder-<%=item.attr('id') %>"></div>
   
3. <% }); %>
   

itemTemplate.ejs :

1. <div class="item" <%= (el) -> el.data('item', item) %>>
   
2.     <%=item.attr('name') %>
   
3. </div>
   

This is my current structure:

1. var itemsTemplate = require('text!views/itemsTemplate.ejs');
   
2. can.view.ejs('itemsTemplate', exampleTemplate);
   
3. var ItemsControl = can.Control({
   
4. 
   
5.     init: function(el, options) {
   
6. 
   
7.         can.view('itemsTemplate', {items: options.items}, function(template){
   
8.             that.element.html(template);
   
9. 
   
10.             // Create items into itemHolder "sandboxes"
    
11.             $.each(options.items, function(key, item){
    
12.                 var itemControl = new ItemControl('#itemHolder-'+item.attr('id'), {item: item});
    
13.             }
    
14.         });
    
15.     },
    
16. 
    
17.     destroy: function() {
    
18.         console.log('destroy called for ItemsControl');
    
19.         can.Control.prototype.destroy.call( this );
    
20.     }
    
21. });
    
22. 
    
23. 
    
24. var itemTemplate = require('text!views/itemTemplate.ejs');
    
25. can.view.ejs('itemTemplate', itemTemplate);
    
26. 
    
27. var ItemControl = can.Control({
    
28. 
    
29.     init: function(el, options) {
    
30.         can.view('itemTemplate', {item: options.item}, function(template){
    
31.             that.element.html(template);
    
32.         });
    
33.     },
    
34. 
    
35.     destroy: function() {
    
36.         console.log('destroy called for ItemControl');
    
37.         can.Control.prototype.destroy.call( this );
    
38.     },
    
39. 
    
40.     'click': function() {
    
41.         console.log('You clicked item!');
    
42.     }
    
43. });
44. 
    
45. // Testing
46. var testItems = new can.List();
    
47. testItems.push({id: 1, name: 'Item #1'});
    
48. testItems.push({id: 2, name: 'Item #2'});
    
49. testItems.push({id: 3, name: 'Item #3'});
    
50. 
    
51. // Render test items
    
52. var testItemsControl = new ItemsControl('#items', {items: testItems});
    
53. 
    

This seems to work well on init but when I later push new item to testItems, all 3 existing items completely dissappear from the view and ItemControl.destroy gets called 3 times.

Could someone give me an example how to do this two-level control structure so that it works well with live binding?