"Uncaught TypeError: Cannot set property..." on Blockly

Question

我开始在 Blockly 上编码，但在尝试创建新块时遇到问题。我做的步骤：

下载 Blockly 应用程序 code。
我把所有的文件都放在一个名为Blockly.
我在该文件夹中创建了一个新的 html 文件以查看工具箱是否正常工作。
我用 Block Factory 创建了两个新块。
我尝试使用新的 customBlocks.js 文件将这些新块添加到工具箱中。

当我尝试进行第四步时出现问题，因为我添加了两个新块，但它只显示在工具箱上，第一个我在js上有，但没有显示第二个，没关系块的顺序，只有第二个永远不会正确显示。

这是我的 html 文件：

<!DOCTYPE html>
<html>
    <head>
        <script src="blockly_compressed.js"></script>
        <script src="blocks_compressed.js"></script>
        <script src="customBlocks.js"></script>
        <script src="msg/js/en.js"></script>
    </head>
    <body>
        <h1>This is a prove </h1>
        <div id = "blocklyMove" style = "height: 100px; width: 100px; background-color: red;"></div>
        <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

        <xml id="toolbox" style="display: none">
          <block type="controls_if"></block>
          <block type="controls_repeat_ext"></block>
          <block type="logic_compare"></block>
          <block type="math_number"></block>
          <block type="math_arithmetic"></block>
          <block type="text"></block>
          <block type="text_print"></block>
          <block type="move_right"></block>
          <block type="blockObject"></block>
        </xml>

        <script>
          var workspace = Blockly.inject('blocklyDiv',
              {toolbox: document.getElementById('toolbox')});
        </script>
    </body>
</html>

这是我的 customBlocks.js 文件：

'use strict';

/* *********************** MOVES TO RIGHT *********************** */

Blockly.Blocks['move_right'] = {
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField("move to right");
    this.setInputsInline(true);
    this.setOutput(true, null);
    this.setColour(120);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['move_right'] = function(block) {
  var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = "$(document).ready(function(){ " +
                "$(\"blocklyMove\").animate({ " + 
                    "right: " + value_pixels + "px" +
                "});" +
            "});";
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

/* *********************** BLOCK *********************** */

Blockly.Blocks['blockObject'] = {
  init: function() {
    this.appendValueInput("MOVEMENT")
        .setCheck(null)
        .appendField("Block");
    this.setColour(20);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['blockObject'] = function(block) {
  var value_movement = Blockly.JavaScript.valueToCode(block, 'MOVEMENT', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = '...;\n';
  return code;
};

我可以看到它在 Google Chrome 的控制台上给我以下错误：

Uncaught TypeError: Cannot set property 'move_right' of undefined

我被困在这里，无法弄清楚问题出在哪里。任何帮助将不胜感激。

P.S：不要关注块的逻辑，因为我还没有完成它们，但我想在完成逻辑之前看到两个块都能正确显示。

提前致谢！

Answer 1

终于，我找到了解决办法。在 html 文件中，我必须添加以下 <script> 标记以引用另一个 js 文件 (javascript_compressed.js)，其中定义了 Blockly.JavaScript：

<script src="javascript_compressed.js"></script>

"Uncaught TypeError: Cannot set property..." on Blockly

"Uncaught TypeError: Cannot set property..." on Blockly

javascript

jquery

blockly