我是 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);
}
等等。因此,在初始化时,我的画布是动态构建的。
在组件方面我有:
<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;
}
但是没有用。 预先感谢您的任何帮助
答案 0 :(得分:0)
完整示例位于: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 不熟悉,所以我无法回答有关它的任何问题。