Rendering a tree with ampersand

index.js

var AmpersandState = require('ampersand-state');
var AmpersandCollection = require('ampersand-collection');
var View = require('ampersand-view');

var NodeList = AmpersandCollection.extend({
});

var Node = AmpersandState.extend({
  props: {
    id: 'string',
    name: 'string'
  },
  
  collections: {
    children: NodeList
  }
});

NodeList.prototype.model = Node;

var data = {
  id: '1',
  name: 'root',
  children: [
    { id: '2', name: '1-2', children: [
      { id: '5', name: '1-2-5' }, { id: '6', name: '1-2-6' }, { id: '7', name: '1-2-7' },
    ]},
    { id: '3', name: '1-3' },
    { id: '4', name: '1-4' },
  ]
};

    
var rootNode = new Node(data);
    
var NodeView = View.extend({
    template: '<li><span data-hook="id"></span>: <span data-hook="name"></span><ul data-hook="children"></ul></li>',
    bindings: {
        'model.id': "[data-hook=id]",
        'model.name': "[data-hook=name]"
    },
    render: function () {
        this.renderWithTemplate();
        if (this.model && this.model.children) {
          this.renderCollection(this.model.children, NodeView, this.queryByHook('children'));
        }
    }
});
    
var view = new NodeView({ model: rootNode });
var ul = document.createElement('ul');
document.body.appendChild(ul);
view.render();
ul.appendChild(view.el);    

Hi ya, I was wondering why you used NodeList.prototype.model = Node; instead of passing the Node model to NodeList as you did in the first version?