javascript - MDL - 页面加载时弹出 snackbar

Question

我正在使用来自谷歌的 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);
}

我遇到的错误是，当加载带有 errortext viewbag 的页面时，它将 立即 执行 addSnackbar，然后 snackbarConatiner.MaterialSnackbar 将为空

我曾试图延迟它以便让其他东西有时间加载？但正如您所见，但由于某种原因，它实际上并没有等待延迟结束才执行函数 addSnackbar()

我假设有一些 mdl 元素在 document.ready 之后得到设置，但是我如何在完成后设置 snackbar？

Answer 1

我一直误解了 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 事件也将在所有库加载完成后触发。