如何让 onclick 元素与 requirejs 模块一起工作

Question

我正在开发一个使用 requirejs 和 html 的项目。我有一个具有 onclick 事件的 HTML 元素：

<li><a href="#" onclick="filesystem.newFloorplan()">New <p class="shortcut">(Ctrl + D)</p></a></li>

单击此按钮后，它不起作用。这是调用代码的主文件：

define(function (require) {
"use strict";

var $ = require('jquery'),
    go = require('goJS');

require('bootstrap');
require('jqueryUI');
require('floorWarmingDesignTool-Floorplan');

if ($("#floorWarmingDesignTool").length === 0) {
    return;
}

function init() {
    require(['floorWarmingDesignTool-Floorplan'], function (fp, FloorplanFilesystem) {
        // Floorplan
        var myFloorplan = new fp.Floorplan("myFloorplanDiv");

        // Filesystem
        var filesyestem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);
        //var ui = new fp.FloorplanUI(myFloorplan, "ui", "myFloorplan", fp.GUI_STATE);

        // Palettes - Node Data Arrays
        var furniturePalette = new fp.FloorplanPalette("furniturePaletteDiv", myFloorplan, fp.FURNITURE_NODE_DATA_ARRAY);
        var wallPartsPalette = new fp.FloorplanPalette("wallPartsPaletteDiv", myFloorplan, fp.WALLPARTS_NODE_DATA_ARRAY);

        // Enable Hotkeys
        var body = document.getElementById('floorWarmingDesignTool');
        body.addEventListener("keydown", function (e) {
            var keynum = e.which;
            if (e.ctrlKey) {
                e.preventDefault();
                switch (keynum) {
                    case 83: filesystem.saveFloorplan();                        // ctrl + s
                        break; 
                    case 79: filesystem.showOpenWindow();                       // ctrl + o
                        break;
                    case 68: e.preventDefault(); filesystem.newFloorplan();     // ctrl + d
                        break; 
                    case 82: filesystem.showRemoveWindow();                     // ctrl + r
                        break; 
                    case 49: ui.setBehavior('wallBuilding', myFloorplan);       // ctrl + 1
                        break;
                    case 50: ui.setBehavior('dragging', myFloorplan);           // ctrl + 2
                        break; 
                    case 72: ui.hideShow('diagramHelpDiv');                     // ctrl + h
                        break; 
                    case 73: ui.hideShow('selectionInfoWindow');                // ctrl + i
                        break; 
                    case 80: ui.hideShow('myPaletteWindow');                    // ctrl + p
                        break; 
                    case 69: ui.hideShow('myOverviewWindow');                   // ctrl + e
                        break; 
                    case 66: ui.hideShow('optionsWindow');                      // ctrl + b
                        break; 
                    case 71: ui.hideShow('statisticsWindow');                   // ctrl + g
                        break; 
            }
        });

        // Default Model Data
        myFloorplan.floorplanFilesystem.loadFloorplanFromModel(fp.DEFAULT_MODEL_DATA);

        // See all exposed Floorplan classes
        console.log(fp);
    });
}

init();

console.log("Floor Warming Design Tool - Ready!");

});

这是来自另一个模块的代码片段：

define(function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var $ = require('jquery'),
    go = require('goJS');

if ($("#floorWarmingDesignTool").length === 0) {
    return;
}

/*
* Instance methods
* New Floorplan, Save Floorplan, Save Floorplan As, Load Floorplan, Remove Floorplan
* Show Open Window, Show Remove Window
* Set Current File Name, Get Current File Name
*/

// Create new floorplan (Ctrl + D or File -> New)
FloorplanFilesystem.prototype.newFloorplan = function () {
    var floorplan = this.floorplan;
    // checks to see if all changes have been saved
    if (floorplan.isModified) {
        var save = confirm("Would you like to save changes to " + this.getCurrentFileName() + "?");
        if (save) {
            this.saveFloorplan();
        }
    }
    this.setCurrentFileName(this.UNSAVED_FILENAME);
    // loads an empty diagram
    var model = new go.GraphLinksModel;
    // initialize all modelData
    model.modelData = this.DEFAULT_MODELDATA;
    floorplan.model = model;
    floorplan.undoManager.isEnabled = true;
    floorplan.isModified = false;
    if (floorplan.floorplanUI) {
        floorplan.floorplanUI.updateUI();
        floorplan.floorplanUI.updateStatistics();
    }
}

exports.FloorplanFilesystem = FloorplanFilesystem;

});

如何让这个 onclick 起作用？

谢谢你提前-

Answer 1

首先设置标签的Id。

然后：

function init() {
require(['floorWarmingDesignTool-Floorplan'], function (fp) {
    var newAnchor = document.getElementById("id");
    newAnchor.onclick = function(){
        fp.filesystem.newFloorplan();
    }
});

}

如何让 onclick 元素与 requirejs 模块一起工作

How to get an onclick element to work with requirejs modules

javascript

html

requirejs

prototype