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:
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:
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