MDL -页面加载时弹出的snackbar

Question

我使用的材料设计灯，来自谷歌，和jquery。我似乎无法让零食条显示在页面上。我所犯的错误是

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>

scripts.js

function addSnackbar(string) {
    var snackbarContainer = document.querySelector('#demo-toast-example');
    var data = { message: string, timeout: 2000 };
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
}

我遇到的错误是，当使用错误文本视图包加载页面时，它将立即超出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事件也将在所有库完成加载后触发。