javascript - 使用 Yeoman Generator 重复提示

原文 标签 javascript node.js yeoman yeoman-generator

我正在创建一个 Yeoman Generator 来自动创建几个数据库表。我需要向用户提供添加多列的提示(下面是 ColumnName 和 DataType 的组合)。

我的磁盘中保存了一个模板,我在其中绑定(bind)了来自用户输入的动态名称,并基于此模板,最终脚本由 Yeoman Generator 生成。您能否建议如何提示用户输入他想输入的 ColumnName/DataType 的重复组合?

var prompts = [{
    type: 'input',
    name: 'name',
    message: 'The Table Name?'
  }, {
    type: 'input',
    name: 'attributeName',
    message: 'Define your Schema - ColumnName?',
    default: 'ID'
  },{
    type: 'input',
    name: 'attributeType',
    message: 'Define your Schema - DataType?',
    default: 'S'
  }
];


  return this.prompt(prompts).then(function (props) {
    this.props = props;
  }.bind(this));

模板内容——
用户可以输入 1/2/3/4 或更多列的详细信息,一旦他这样做了,下面的模板应该足够智能以创建那么多列组合键。
{
  "Type" : "AWS::Table",
  "Properties" : {
    "AttributeDefinitions" :  
          {
            "AttributeName" : "<%= attributeName %>",
            "AttributeType" : "<%= attributeType %>"
          },
          {
            "AttributeName" : "<%= attributeName %>",
            "AttributeType" : "<%= attributeType %>"
          },
    "TableName" : <%= name %>,

    }
}

最佳答案

您可以在 prompting() 中添加递归函数钩。必须确保递归函数返回 this.prompts否则执行可能会停止。

我的策略如下

  • 声明一个基于输入
  • 重复的递归函数
  • this.columns 中递归时填充 Prop
  • 将此实例变量传递给 writing() 中的模板 Hook
  • 迭代 this.columns在模板中并填充您的列
  • 第一次进入 this.columns将有表名和第一列详细信息

  • 检查下面的代码,只要按预期调用递归函数,您就可以根据需要调整它。

    有一个额外的提示,询问是否重复。它也可以用一些逻辑丢弃,但这取决于你。

    提示()
    prompting() {
      // Have Yeoman greet the user.
      this.log(yosay(
        'Welcome to the remarkable ' + chalk.red('generator-react-starter-kit-relay-container') + ' generator!'
      ));
    
      const tableNamePrompt = [{
        type: 'input',
        name: 'name',
        message: 'The Table Name?'
      }];
    
      const columnPrompts = [{
        type: 'input',
        name: 'attributeName',
        message: 'Define your Schema - ColumnName?',
        default: 'ID'
      }, {
        type: 'input',
        name: 'attributeType',
        message: 'Define your Schema - DataType?',
        default: 'S'
      }, {
        type: 'confirm',
        name: 'repeat',
        message: 'Do you want to add more columns?',
        default: 'Y'
      }]
    
      this.columns = [];
    
      const loop = (relevantPrompts) => {
        return this.prompt(relevantPrompts).then(props => {
          this.columns.push(props);
    
          return props.repeat ? loop(columnPrompts) : this.prompt([]);
    
        })
      }
    
      return loop([...tableNamePrompt, ...columnPrompts]);
    }
    

    然后在 writing()勾通columns您之前填充的实例变量。

    写作()
    writing() {
      this.fs.copyTpl(
        this.templatePath('Schema.json'),
        this.destinationPath('./Schema.json'),
        {
          columns: this.columns
        }
      );
    }
    

    模板
    {
      "Type" : "AWS::Table",
      "Properties" : {
        "AttributeDefinitions" : [
          <% for (let i=0; i<columns.length; i++) { %>
            {
              "AttributeName": "<%= columns[i].attributeName %>",
              "AttributeType": "<%= columns[i].attributeType %>"
            }
          <% } %>
        ],
        "TableName" : "<%= (columns[0] || {}).name %>"
      }
    }
    

    sample 输入
         _-----_     ╭──────────────────────────╮
        |       |    │      Welcome to the      │
        |--(o)--|    │        remarkable        │
       `---------´   │ generator-react-starter- │
        ( _´U`_ )    │    kit-relay-container   │
        /___A___\   /│        generator!        │
         |  ~  |     ╰──────────────────────────╯
       __'.___.'__   
     ´   `  |° ´ Y ` 
    
    ? The Table Name? User
    ? Define your Schema - ColumnName? ID
    ? Define your Schema - DataType? Bigint
    ? Do you want to add more columns? Yes
    ? Define your Schema - ColumnName? Email
    ? Define your Schema - DataType? String
    ? Do you want to add more columns? Yes
    ? Define your Schema - ColumnName? Password
    ? Define your Schema - DataType? Text
    ? Do you want to add more columns? No
    

    输出
    {
      "Type" : "AWS::Table",
      "Properties" : {
        "AttributeDefinitions" : [
    
            {
              "AttributeName": "ID",
              "AttributeType": "Bigint"
            }
    
            {
              "AttributeName": "Email",
              "AttributeType": "String"
            }
    
            {
              "AttributeName": "Password",
              "AttributeType": "Text"
            }
    
        ],
        "TableName" : "User"
      }
    }
    

    关于javascript - 使用 Yeoman Generator 重复提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48634349/

    相关文章:

    angularjs - 如何在dist目录而不是app目录中运行grunt服务器?

    javascript - 根据javascript中的侧翼字符分割字符串

    android - Socket.io 适用于桌面 Safari 和 chrome,但不适用于移动设备

    node.js - 亚马逊 beanstalk tcp 应用程序没有响应

    css - Yeoman生成的webapp元素中dist文件夹中的空css文件

    node.js - Yeoman复制目录而不使用模板

    javascript - 在私有(private)项目之间共享前端组件

    javascript - 替换javascript中的某些字符

    javascript - 使用javascript/jQuery和“搜索”栏的内容,在单击按钮时搜索表并返回正确的表行

    javascript - Electron 窗口尺寸与屏幕分辨率