如何动态生成 Blockly 下拉菜单的内容？答案

【问题标题】：How can I dynamically generate content of a Blockly dropdown menu?如何动态生成 Blockly 下拉菜单的内容？
【发布时间】：2017-03-08 15:31:09
【问题描述】：

我正在使用 python 和烧瓶编写应用程序。在网页界面中，用户可以使用blockly制作小型定制程序。

一些已经存在的块有一个下拉菜单。

一切正常。但是现在我想要一个带有下拉菜单的块，其中选项是 USB 棒上的某些文件，通过遍历 USB 棒目录找到 python 后端。

我现在想用这些文件填充下拉菜单。但是，我无法提前知道它们，这就是为什么它们必须动态生成 - 而是通过 python，而不是通过 javascript 或类似的。

我已经在这里找到了这个：https://developers.google.com/blockly/guides/create-custom-blocks/dropdown-menus（在最后的“动态菜单”处），但这对我来说没有帮助，因为我希望信息来自 python 后端而不是来自 javascript。

有人知道怎么做吗？

非常感谢您！

【问题讨论】：

同时我已经使用一种不太优雅的技术克服了这些问题：我的 python 脚本会动态覆盖包含 JSON 配置的 .js 文件，并在重新启动时将其重置。不优雅但有效....和一个解决方案。如果不直接写入 js 文件而是写入通过 javascript 读取的 JSON 文件，这也将起作用。
来自 Blockly 文档：developers.google.com/blockly/guides/create-custom-blocks/…

标签： javascript python json flask blockly

【解决方案1】：

这是一个很老的问题，所以我不确定 OP 是否仍然需要答案，但我假设这是 OP 使用异步 JavaScript 调用后端的情况，并且因此不能只返回结果。

我们的应用程序（尽管使用 nodejs 后端）中的情况并没有什么不同，我们根据从 Google Cloud Datastore 检索到的选项填充下拉列表。我们有一个 React App，所以我们的解决方案是在窗口上附加一个 Flux 存储，我们的异步调用在完成时填充该存储，然后让下拉生成代码访问该存储。显然，一个完整的 Flux 存储可能并不适合所有情况，但我在这里的一般建议是传入一个选项生成器函数并让它从窗口上的存储或其他变量中读取，然后调用后端在页面加载时运行（或在其他情况下）并在窗口上填充存储。如果您的应用在调用完成之前启动，您可以将其设置为根据商店上的标志显示它正在加载选项。

作为一个非常简化的案例，您可能有：

// on page load
window.store = {done: false};
myBackendCall()
.then(function(results){
    window.store = {
        results: results,
        done: true
    };
})
.catch(function(error){
    console.error(error);
    window.store = {results: [], done: true};
});

然后在您的选择器中，您可能会使用以下内容：

function generateOptions(){
    if(!window.store.done) {
        return [['Loading...', 'loading']];
    } else {
        return [['Select a file', '']].concat(window.store.results);
    }
}
this.appendDummyInput()
    .appendField(new Blockly.FieldDropdown(generateOptions), fieldName);

显然，这是一个粗略的简化，但我认为这足以展示技术。实际上，出于其他原因，我们制作了自己的自定义 Blockly 字段，但这仍然适用于普通的 Blockly 下拉菜单。如果您的设置是这样，则将 Promise 链换成回调。您也可以在块内进行调用并在块本身上设置一个变量（this.store 或其他），但这会导致对块的多个实例进行多次调用，因此这可能不适合您。

【讨论】：