javascript - 如何动态生成 Blockly 下拉菜单的内容？

Question

我正在使用 python 和 flask 编写一个应用程序。在网络界面中，用户可以使用 blockly 制作小的定制程序。

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

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

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

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

有谁知道这样做的方法吗？

非常感谢您!

Answer 1

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

我们的应用程序(尽管使用的是 nodejs 后端)中的情况并无不同，我们根据从 Google Cloud Datastore 检索到的选项填充下拉列表。我们有一个 React 应用程序，所以我们的解决方案是将一个 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 链换成回调。您还可以在 block 内进行调用并在 block 本身上设置一个变量(this.store 或其他)，但这会导致对 block 的多个实例进行多次调用，因此可能不适合您。