Question

我正在使用来自谷歌和jquery的材料设计灯。我似乎无法在pageload上显示小吃吧。我的错误得到的是

index.cshtml（extract）

<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);
}

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

我曾试图延迟它给其他东西加载时间？但是正如你所看到的那样，但由于某些原因，在实现函数addSnackbar（）

之前它实际上并没有等待延迟结束。

我认为mdl的某些元素会在document.ready之后进行设置，但是如何在完成后设置快餐栏呢？

Answer 1

我一直在误解jquery文档是如何工作的。一旦页面完成渲染，它将执行，但不会等待js库完成。在这种情况下，material.js尚未完成加载。所以我用下面的

替换了index.cshtml中的脚本

<script>
        $(window).load(function () {
            var ErrorStringValue = '@ViewBag.ErrorText';
            if (ErrorStringValue.length > 0) {
                addSnackbar(ErrorStringValue);
            }
        });
</script>

这很好用。所有库加载完成后，Window.load事件也将触发。

MDL - 页面加载弹出快餐栏

1 个答案: