需要帮助使用Meteor.js加载Dat-GUI

时间:2014-07-18 17:22:46

标签: javascript user-interface meteor requirejs dat.gui

我正在尝试加载Dat-GUI:https://github.com/dataarts/dat.gui 与我的流星项目。我在client / lib文件夹中添加了dat-GUI源代码。 这是我的代码:

Template.EditorControllbar.rendered = function () {
    var controllBar = document.getElementById('controllbar'),
        gui, folder, controller;

    // Create GUI
    gui = new dat.GUI({autoPlace:false});
    controllBar.appendChild(gui.domElement);

    // Create folders
    var renderFolder = gui.addFolder('Render'),
    meshFolder = gui.addFolder('Mesh'),
    lightFolder = gui.addFolder('Light'),
    exportFolder = gui.addFolder('Export');

};

当我运行服务器时,我收到以下错误:

Exception from Deps afterFlush function function: ReferenceError: dat is not defined
    at Object.Template.EditorControllbar.rendered (http://localhost:3000/client/views/toons/toon_edit/editor_controllbar/editor_controllbar.js?5613eb3f7dfe2c5aed33925dfe2970dcc11a04b4:33:15)
    at http://localhost:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:439:23
    at _assign.flush (http://localhost:3000/packages/deps.js?4a82362ae66e863a1c1a8b0a5fec6f665e2038d1:348:13) debug.js:4

相同的代码适用于codepen: http://codepen.io/praneybehl/pen/DabKv

有谁知道如何使用Meteor加载Dat-GUI。 任何帮助将受到高度赞赏。

提前致谢, Praney

1 个答案:

答案 0 :(得分:2)

您在client/lib中添加了文件https://github.com/dataarts/dat.gui/blob/master/build/dat.gui.min.js? Meteor会将所有js文件包装在一个函数中,因此var - js文件中的变量在其他文件中不可见,因此如果dat变量不能使用client/compatibility变量你这样添加文件。相反,您需要在{{1}}文件夹中添加该文件。此文件夹中的js-files不会被包装在函数中,因此var变量将是一个全局变量,您可以在其他文件中使用它。