Collection is not showing up

[ghost]

I have simple collection and view

var myCollection = new Collection([
    {
        name: 'Kevin',
        hometown: 'San Francisco',
        avatar: '/assets/kevin.png',
        height: 6.0
    },
    {
        name: 'Gray',
        hometown: 'San Jose',
        avatar: '/assets/gray.png',
        height: 6.1
    },
    {
        name: 'Cole',
        hometown: 'Santa Clara',
        avatar: '/assets/cole.png',
        height: 5.9
    }
]);

var MyView = kind({
    name: 'MyView',
    data: myCollection, // expects an enyo/Collection
    components: [
        {kind: DataRepeater, name: 'repeater', components: [
            {
                components: [
                    {kind: Control, name: 'nameLabel'},
                    {kind: Control, name: 'heightLabel'}
                ],
                bindings: [
                    {from: 'model.name', to: '$.nameLabel.content'},
                    {from: 'model.height', to: '$.heightLabel.content'}
                ]
            }
        ]}
    ]
});

And I have main view

var MainView = kind({
    name: 'MainView',
    classes: 'moon enyo-fit',
    components: [
      ....
        {
            kind: MyView,

        }

    ],

But the collection is not showing up. If I use SimpleRepeater (code below), everything works fine

var SimpleRepeater = kind({
    name: 'SimpleRepeater',
    data: [
        {
            "name" : "test",
            "age" : "age",
        }
    ], // expects plain JS array array
    components: [
        {kind: Repeater, name: 'repeater', onSetupItem: 'setupItem', components: [
            {kind: Control, name: 'nameLabel'},
            {kind: Control, name: 'ageLabel'}
        ]}
    ],
    create: function () {
        this.inherited(arguments);
        this.dataChanged();
    },
    dataChanged: function () {
        if (this.data) {
            this.$.repeater.set('count', this.data.length);
        }
    },
    setupItem: function (sender, ev) {
        var record = this.data[ev.index];
        console.log(this.$);

        ev.item.$.nameLabel.set('content', record.name);
        ev.item.$.ageLabel.set('content', record.age);
    }
});

What am I doing wrong ? Thx

[webOS101]

It would be a lot easier to debug if you could create a jsFiddle showing the problem. Are you making sure the repeater is in a sized container? You might need to set the class enyo-fit on it to be sure it is sized appropriately. A big mistake people often make is leaving it unsized, so it ends up with a height of zero.

[ghost]

Thx for the answer First example (doesn't work with Collection): http://jsfiddle.net/8uvJE/64/ Second example (works with Simplerepeater): http://jsfiddle.net/8uvJE/67/

[webOS101]

You need to assign the collection property of your DataRepeater or else it has no collection to work with. See updated fiddle: http://jsfiddle.net/8uvJE/70/

You could use a binding on MyView to bind from this.data to this.$.repeater.collection