mercredi 29 juin 2016

Ember.js - Can I nest a component into another before it's added to the Handlebars template?

I'm developing an application with Ember CLI version 2.6.1 and I'm using a UI library called Webix.

Webix generates html through JavaScript like this:

var accordion = webix.ui({
    view:"accordion",
    type:"wide",
    cols:[
        { header:"col 1", body:"content 1", width:150 },
        { header:"col 2", body:"content 2", width:150 },
        { header:"col 3", body:"content 3", width:150 },
        { header:"col 4", body:"content 4", width:150 },
        { header:"col 5", body:"content 5", width:150 }
    ]
});

Webix is imported into my Ember app and I can generate a component with this syntax by creating an instance within the JS file of the component instead of the Handlebars file (where it would live if I were using html).

Like this:

    import Ember from 'ember';

    export default Ember.Component.extend({
        didRender: function() {

            webix.ui({ 
                container: this.container,
                height: 585,
                view:"accordion",
                    type: "line",
                    rows:[ 
                    { 
                        header:"Panel 1",
                        body: {
                            padding: 10,
                            rows: [
                                { 
                                   view:"textarea", 

                                   labelAlign:"right", 
                                   //height:150, 
                                   value: "type here"  
                                },
                                { 
                                   view:"textarea", 

                                   labelAlign:"right", 
                                   //height:150, 
                                   value: "type here"  
                                }

                            ]

                        }
                    }
                ]
            });

        }
    });
}

This works fine, but as the application grows in complexity I will have one GIANT component that is going to be impossible to maintain.

I would like to extract the nested Webix views into their own components that are instantiated as they are needed.

Like this:

enter image description here

My parent component is created in Handlebars, but since the Webix component has its own nesting methodology, I can't just drop in a new component:

enter image description here

Since component structure is usually composed through Handlebars with properties passed in there, how could I nest a component into another before its parent is loaded into Handlebars?




Aucun commentaire:

Enregistrer un commentaire