如何在Blazor WebAsambly中初始化现有的Jquery
如何在Blazor WebAsambly中初始化现有的Jquery
提问于 2021-06-04 04:42:52
我正在迁移一个现有的网站到.NET核心5上的blazor，我在从Blazor初始化/调用这个插件时遇到了一些困难。参见下面的HTML和JS代码：
在我当前的网站上，我初始化这个插件如下：
<script src="./hs-unfold.min.js"></script>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>然后在HTML页面上
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>Dropdow on hover</a>
<div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>如上文所示，此JQuery插件的属性通过HTML传递：
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-09 03:48:05
@Neil感谢您对上面代码的帮助。我能够通过在.js初始化程序文件中提供js函数选项/参数来解决这个问题。以下为供参考的守则：
在www.root上创建.Js文件/作为中间件来初始化JS代码
**hs-unfold-initializer.js**
(function () {
// INITIALIZATION OF HS-Unfold
// ======================================================
window.HSUnfoldFuntions = {
AddHSUnfold: function (unfoldElement) {
//unfold options
var options = {
target: '#editDropdownElement',
type: "css-animation"
};
//set a new intance of HSUnfold
new HSUnfold(unfoldElement, options).init();
},
};
})();初始化脚本在Blazor Index.html页面的标题中：
<head>
<script src="./hs-unfold.min.js"></script>
<script src="./hs-unfold-initializer.js"></script>
</head>组件中的
@inject IJSRuntime JS
@inject ElementReference hsUnfoldEditElement
<div class="hs-unfold">
<a @ref="@hsUnfoldEditElement" class="js-hs-unfold-invoker btn btn-primary dropdown-toggle">
Dropdow on hover</a>
<div id="editDropdownElement" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//hsUnfold
await JS.InvokeAsync<string>("HSUnfoldFuntions.AddHSUnfold", hsUnfoldEditElement);
}
}
}Stack Overflow用户
发布于 2021-06-04 09:06:09
要在Blazor中复制这一点，您需要连接到组件生命周期事件，并使用一些JSInterop。
创建一个js文件来保存您自己的初始化代码。
**hs-unfold-initializer.js**
window.MyJS = {
initialiseHSUnfold: function() {
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
}
}将插件脚本和初始化脚本加载到Blazor Index.html页面的标题中：。
<head>
<script src="./hs-unfold.min.js"></script>
<script src="./hs-unfold-initializer.js"></script>
</head>组件中的：
注入JS (IJSRuntime)，添加html，并在呈现后触发初始化程序。注意，在组件初始化期间不能这样做，因为DOM在这一点上没有加载。OnAfterRenderAsync生命周期方法允许您在DOM加载之后执行操作。
@inject IJSRuntime IJS
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>Dropdow on hover</a>
<div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
@code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await IJS.InvokeVoidAsync("MyJS.initialiseHSUnfold")
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67831578
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号