Blazor使用js库调用js

Question

我是Blazor的新手。我有一个使用gojs库的js函数。Canvas，数据加载在js端动态处理。因为我不确定，仅仅在主机上添加js脚本是不够的，我必须使用IJSRuntime。从示例中，我发现使用return等调用简单函数是可以理解的，但我有以下几点：

 function init() {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        myDiagram =
            $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                {
                    initialContentAlignment: go.Spot.Center,
                    allowDrop: true,  // must be true to accept drops from the Palette
                    "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                    "LinkRelinked": showLinkLabel,
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    "undoManager.isEnabled": true  // enable undo & redo
                });
        // when the document is modified, add a "*" to the title and enable the "Save" button
        myDiagram.addDiagramListener("Modified", function (e) {
            var button = document.getElementById("SaveButton");
            if (button) button.disabled = !myDiagram.isModified;
            var idx = document.title.indexOf("*");
            if (myDiagram.isModified) {
                if (idx < 0) document.title += "*";
            } else {
                if (idx >= 0) document.title = document.title.substr(0, idx);
            }
        });

        myPalette =
            $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
                {
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                    model: new go.GraphLinksModel([  // specify the contents of the Palette
                        { category: "Start", text: "Start", figure: "Ellipse" },
                        { text: "Step" },
                        { text: "Check Trigger", figure: "Diamond" },
                        { category: "End", text: "End" }
                        //{ category: "Comment", text: "Comment" }
                    ])
                });
    }
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("jsonModel").value);

}

诸若此类。所以，在init上，我的画布是动态构建的。

在组件方面，我有：

<div onload="init()"></div> <span style="display: inline-block; vertical-align: top; padding: 5px; width:20%"> <div id="myPaletteDiv" style="border: solid 1px gray; height: 100%">

     ```   </div>```
  ```  </span>```

   ``` <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">```
       ``` <div id="myDiagramDiv" style="border: solid 1px gray; height: 100%"></div>```
    ```</span>```

<textarea style="display:inline-block" id="jsonModel"></textarea>

我如何在Blazor中处理所有这些？已尝试

[JSInvokable]
protected override Task OnAfterRenderAsync(bool firstRender = true)
{
    if (firstRender)
    {
        return jsRuntime.InvokeVoidAsync
            ("init").AsTask();
    }
    return Task.CompletedTask;
}

但是它并没有起作用。提前感谢您的帮助

Answer 1

下面是一个完整的示例：https://github.com/NorthwoodsSoftware/GoJS-Alongside-Blazor

它是这样做的：

    protected async override void OnAfterRender(bool firstRender)
    {
      if (firstRender)
      {
        // This calls the script in gojs-scripts.js
        await JSRuntime.InvokeAsync<string>("initGoJS");
      }
    }

遗憾的是，我对Blazor并不熟悉，所以我无法回答任何关于它的问题。