[英]How to isolate js variables between different instances of the same component?
我有一個使用結構 js 和 canvas 的 blazor 組件。
我使用經典的 JS 隔離方式,導入模塊,調用導出的 js 函數,等等。
MyComponent.razor
<canvas id="@canvasId">
</canvas>
MyComponent.razor.cs
[Inject] private IJSRuntime _jsRuntime { get; init; }
private IJSObjectReference module;
private string canvasId ;
protected override async Task OnInitializedAsync()
{
canvasId = $"canvas_MediaLabelEditor_{Guid.NewGuid().ToString()}";
Reload();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
...
string[] args = new string[] { canvasId };
module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/fabricBboxLabel.js");
await module.InvokeVoidAsync("loadCanvas", args);
}
protected async Task DoAmazingThings()
{
string[] args = new string[] { ..., ..., ... };
await module.InvokeVoidAsync("doAmazingThings", args);
}
我使用一個數組來保存 canvas 上淹沒的當前對象。 然后我可以移動並調整它們的大小以最終調用保存 function ,它將所有對象返回到 c# 代碼。
./js/fabricBboxLabel.js
var canvas;
var data; //array
export function loadCanvas(id){
canvas = new fabric.Canvas(id);
}
export function doAmazingThings(a,b,c){
array.push( ... )
...
canvas.renderAll();
}
當我有多個此組件的實例時會出現問題。 所有實例似乎都在訪問相同的 canvas 和數據變量。
一個實用的解決方案是定義一個 canvas 陣列或 map,但這不是隔離。 我怎樣才能隔離這些變量?
復制
創建一個帶有按鈕的組件
隔離測試.razor
<button @onclick="@(async () => await OnClick())">
</button>
隔離測試.razor.cs
[Inject] private IJSRuntime _jsRuntime { get; init; }
private IJSObjectReference module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/isolationtest.js");
}
}
public async Task OnClick()
{
object[] args = new object[] { 5 };
await module.InvokeVoidAsync("sumar", args);
}
隔離測試.js
var sum=0;
export function sumar(inte) {
console.log("before sum="+sum)
sum=sum+inte;
console.log("after sum="+sum)
}
alert(sum);
索引.razor
<IsolationTest></IsolationTest>
<IsolationTest></IsolationTest>
<IsolationTest></IsolationTest>
output:(隨機點擊時)
before sum=0
after sum=5
before sum=5
after sum=10
before sum=10
after sum=15
before sum=15
after sum=20
before sum=20
after sum=25
before sum=25
after sum=30
我建議在你的 js 中使用 Sum 數組:
var sum=[];
export function sumar(id,inte) {
console.log("before sum="+sum[id])
sum=sum[id]+inte;
console.log("after sum="+sum[id])
}
alert(sum[id]);
...
[Parameter] public string Id { get;set;}
public async Task OnClick()
{
object[] args = new object[] { 5 };
await module.InvokeVoidAsync("sumar",this.Id,args);
}
...
<IsolationTest Id="theFirst"></IsolationTest>
<IsolationTest Id="theSecond"></IsolationTest>
<IsolationTest Id="theThird"></IsolationTest>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.