moon.DataList in a moon.Accordion in enyojs

Question

I have this data :

....
    [
        {"id_category": 1, 
        "name": "Category 01",
        subcategories:[
            {"id_sub":1, "name":"suba 1"},
                {"id_sub":2, "name":"subaa 2"}
            ]},
        {"id_category": 2
        ,"name": "Category 02"
        ,subcategories:[
            {"id_sub":1, "name":"sub 1"},
            {"id_sub":2, "name":"sub 2"}
        ]}
    ]
....

and I want to set it to an moon.Accordion I have this code: first my components:

....
    enyo.kind({
        name: "myapp.ResultList",
        kind: "moon.DataList",
        selectionProperty: "selected",
        mixins: ["Group"],
        create: function() {
            this.inherited(arguments);
            this.addClass(this.orientation);
        }
    });
    enyo.kind({
        kind: "moon.Accordion",
        name: "myapp.ResultAccordion",
        content: "",
        mixins : ["moon.DataList"],
        bindings: [
            {from: ".model.name", to:".content"}
        ],
        subcategories:[],
        create: function() {
            this.inherited(arguments);
        },
        modelChanged: function() {
            this.inherited(arguments);
            if (!this.model) {
                return;
            }
            this.model.set("item", this);
            this.subcategories = this.model.attributes.subcategories;
            this.controller = new enyo.Collection([]);
            var objects=[];
            for( var sc in this.subcategories){
                var m = new myapp.SubCategoryModel(this.subcategories[sc]);
                objects.push(m);
            }
            this.controller.add(objects);
            this.resized();
        }
    });
    enyo.kind({
        name: "myapp.ResultAccordionItem",
        bindings: [
            {from: ".model.name", to:".content"}
        ]
    });
....

then in a Panel:

....
    enyo.kind({
    name: "myapp.PartialPanel",
    classes: "moon enyo-unselectable main-view enyo-fit",
    kind: "moon.Panels",
    ....
    components:[{
        kind: "myapp.ResultList",
        style: "position: inherit !important;",
        fit: true,
        controller: ".app.$.categoryCollection",
        components: [{
            kind: "myapp.ResultAccordion",
            onSpotlightRight:"onFocusCategoryRight",
            components:[{
                kind: "myapp.ResultAccordionItem"
            }]
        }] 
    ....
....

In my controller , set my data:

....
    setdata: function(){
        var test= {
            "count": 1,
            "next": null,
            "previous": null,
            "results": [
                {"id_category": 1, "name": "Category 01",
                    subcategories:[
                        {"id_sub":1, "name":"suba 1"},
                        {"id_sub":2, "name":"subaa 2"}
                    ]
                },
                {"id_category": 2,"name": "Category 02",
                    subcategories:[
                        {"id_sub":1, "name":"sub 1"},
                        {"id_sub":2, "name":"sub 2"}
                    ]
                }
            ]};
            var models = test.results;
            this.next = test.next;
            this.previous = test.previous;
            this.count = test.count;
            var objects = [];
            for(var p in models){
                console.log(models[p]);
                var m = new myapp.CategoryModel(models[p]);
                objects.push(m);
            }
            this.app.controllers.categoryCollection.add(objects);
            return objects;
        ....
    ...
....

But only render categories , and not my subcategories , help me please.

Answer 1

The issue is that you can't use mixins to mash component types together. There are some very specific mixins you can use that add functionality to existing kinds. Check out this list of mixins: http://enyojs.com/docs/latest/#/namespaces:enyo-mixins

Additionally, you can replace all this code:

        this.subcategories = this.model.attributes.subcategories;
        this.controller = new enyo.Collection([]);
        var objects=[];
        for( var sc in this.subcategories){
            var m = new myapp.SubCategoryModel(this.subcategories[sc]);
            objects.push(m);
        }
        this.controller.add(objects);

with:

        this.controller = new enyo.Collection({model: "myapp.SubCategoryModel"});
        this.controller.add(this.subcategories);

(This assumes you're on 2.5.1. If so, you can also drop the leading dot on your bindings.)