我正在使用来自谷歌的Material Design Light和jquery。 我似乎无法让 snackbar 在页面加载时显示。我所犯的错误 得到的是
index.cshtml(摘录)
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar mdl-color--accent">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button" style="display:none;"></button>
</div>
<script>
$(function () {
var ErrorStringValue = '@ViewBag.ErrorText';
if (ErrorStringValue.length > 0) {
setTimeout(addSnackbar(ErrorStringValue), 2000);
}
});
</script>
脚本.js
function addSnackbar(string) {
var snackbarContainer = document.querySelector('#demo-toast-example');
var data = { message: string, timeout: 2000 };
snackbarContainer.MaterialSnackbar.showSnackbar(data);
}
我遇到的错误是,当加载带有错误文本viewbag的页面时,它将立即执行addSnackbar,然后snackbarConatiner.MaterialSnackbar将为空
我曾尝试延迟它以给其他东西加载时间?但正如你所看到的,但由于某种原因,它实际上并没有等待延迟结束才执行函数 addSnackbar()
我认为 mdl 的某些元素在 document.ready 之后进行设置,但如何在完成后设置 snackbar ?
最佳答案
我一直误解 jquery document.ready 的工作原理。它会在页面渲染完成后执行,但不会等待 js 库完成。在这种情况下,material.js 尚未完成加载。所以我用以下内容替换了index.cshtml中的脚本
<script>
$(window).load(function () {
var ErrorStringValue = '@ViewBag.ErrorText';
if (ErrorStringValue.length > 0) {
addSnackbar(ErrorStringValue);
}
});
</script>
这工作得很好。所有库加载完成后,Window.load 事件也会触发。
关于javascript - MDL - 页面加载时弹出 snackbar ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36088055/