Tras ver como podemos crear nuestro propio generador y los tipos de preguntas que podemos generar, ahora llega el momento de aprender como hacer para realizar una pregunta u otra en función de la respuesta que hayamos dado en la pregunta anterior. Este es un tema que a mi me ha costado
bastante trabajo encontrar la forma de realizarlo debido a la escasez de información que hay sobre este tema y que me gustaría compartir con vosotros.
var chalk = require('chalk');
var fs=require('fs');
var rows = [];
var layoutName;
var done;
module.exports = require('yeoman-generator').Base.extend({
askLayoutName: function () {
done = this.async();
var layoutNameQuestion = {
type : 'input',
name : 'layout_name',
message : 'Choose the layout name(witout layout-)',
default : this.appname // Default to current folder name
};
this.prompt(layoutNameQuestion).then(function (props) {
layoutName = props.layout_name;
this.askRowColumns();
}.bind(this));
},
askRowColumns: function () {
var addTypeQuestion = {
type : 'list',
name : 'addType',
message : 'What do you want to do to your Layout?',
choices: [{
name:'Add Row',
value: 'row',
checked: true
},{
name:"It is Done",
value: 'done'
}]
};
this.prompt(addTypeQuestion).then(function (props) {
if(props.addType == 'row'){
this.askDistribution();
}
else{
this.wt();
}
}.bind(this));
},
askDistribution: function () {
var fluidNotFluidQuestion = {
type : 'list',
name : 'fluidNotFluid',
message : 'Do you want a Row Fluid(100%) or a not Fluid(fixed container)?',
choices: [{
name:'Not Fluid',
value: 'notfluid',
checked: true
},{
name:'Fluid',
value: 'fluid',
}]
};
this.prompt([fluidNotFluidQuestion,numberColumnsQuestion]).then(function (props) {
rows.push(props.fluidNotFluid);
this.askRowColumns();
}.bind(this));
},
wt: function () {
var componentName = 'layout-'+layoutName+'.jade';
var content = '';
for (var i in rows){
switch(rows[i]){
case 'fluid':
content+='div(class="container-fluid")\n\n';
break;
case 'notfluid':
content+='div(class="container")\n\n';
break;
}
}
var c = this;
fs.writeFile(componentName,
content,function(){
c.log(chalk.bold.green('create ') + componentName);
}
);
return;
}
});
El código anterior realiza 3 preguntas, primero pregntará el nombre de la layout que queremos crear.
Lo segundo será si queremos añadir una row o si ya hemos acabado de crearla. En caso de que le digamos que queremos añadir una row nos preguntará si la queremos Fluid o Not Fluid. Tras esto nos volverá al punto 2 donde nos preguntaba si queríamos añadir una row o terminar y el proceso continuará hasta que le digamos que ya hemos terminado.
Cuando digamos que ya hemos terminado se llamará a la función .wt() que hemos creado y que se encargará de recopilar los datos que hemos introducido, añadirá las rows que hemos configurado a una variable que actuará como contenido del archivo final que generará. Una vez haya creado el archivo jade y añadido en él el contenido de rows, mostrará un mensaje por pantalla y terminará.
La conclusión que sacamos es que tenemos una seríe de funciones que se llaman entre si para conformar los datos necesarios para generar el archivo final y que una vez terminamos de contestarlo todo se llama a tra función que se encarga de hacer el trabajo fisico de crear el archivo .jade con los datos.
Soy consciente de que es un código algo más complejo que lo que veíamos anteriormente asi que cualquier duda que tengáis no dudeis en preguntar.