在页面加载时修改 MDL 元素答案

【问题标题】：Modifying MDL elements on page load在页面加载时修改 MDL 元素
【发布时间】：2016-08-17 19:45:18
【问题描述】：

我正在尝试在页面加载时设置mdl 滑块的值。为 mdl 滑块设置值的推荐方法如下 -

document.querySelector('#slider').MaterialSlider.change(value);

但是，如果从 $(document).ready() 或 $(window).load() 调用，则会引发错误 TypeError: document.querySelector(...).MaterialSlider is undefined。

在它上面设置一秒的超时时间可以解决这个问题，但看起来很笨拙。是否有任何其他事件我可以将其绑定以确保其正常工作？

这就是我加载脚本的方式 --

    //mobile optimized
    meta(name='viewport', content='width=device-width, initial-scale=1.0')

    //css
    link(rel='stylesheet', href='/stylesheets/style.css')

    //material-design-lite
    link(rel='stylesheet', href='/bower_components/material-design-lite/material.min.css')
    script(src='/bower_components/material-design-lite/material.min.js')
    link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')

    //jQuery
    script(src='/bower_components/jquery/dist/jquery.min.js')

    //Material icon fonts
    //link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
    link(href='https://fonts.googleapis.com/css?family=Open+Sans', rel='stylesheet', type='text/css')

    //polyfill (support for dialog)
    script(src="/bower_components/dialog-polyfill/dialog-polyfill.js")
    link(rel="stylesheet", type="text/css", href="/bower_components/dialog-polyfill/dialog-polyfill.css")

【问题讨论】：

你是在异步加载 mdl 吗？
不，滑块是 html 文件的一部分
你是如何加载库的？你这样做<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script> 吗？
没有延迟位。
如果可以，请编辑您的问题并显示 JavaScript 在代码中的加载位置以及加载方式。还没有足够的信息。谢谢！

标签： javascript jquery material-design-lite

【解决方案1】：

我花了几个月的时间，但我终于找到了解决方案。只需要添加这个--

$( document ).ready(function() {
    componentHandler.upgradeAllRegistered();
    // --- do stuff on mdl elements here ---
});

这具有在完全加载之前隐藏 mdl 组件的丑陋版本的额外优势。

【讨论】：

【解决方案2】：

根据您的错误消息，我同意@e666 正在下降的问题行。要检查的其他一些事情是相对于其他脚本加载 MDL 的位置。 Script loading can get a bit tricky sometimes.

除此之外，如果您在服务器上动态构建 HTML 页面，您还可以考虑直接在 DOM 中设置滑块的值。

例如，滑块的 HTML 如下所示：

<p style="width:300px">
  <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

注意value 选项。如果这对您来说是一种可能的选择，您可以使用服务器端代码动态设置该值。

如果您使用的是 ASP.NET，您可能会这样做。

@model MyModel

<div>
  <p style="width:300px">
    <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="@Model.InitialValue" step="2">
  </p>
</div>

但是，如果您在加载 JavaScript 时遇到问题，我建议您在继续之前确保所有内容都正确加载，因为它可能会在以后影响您。

【讨论】：

我已经在 HTML 中设置了一个值，但它需要根据用户的位置进行更改。我也尝试过更改脚本加载的顺序。没有什么区别。现在我已经采取了非标准方式设置值（在滑块上调用.val()），这会导致轻微的 css 问题，但我还没有让它以任何其他方式工作。

【解决方案3】：

您的滑块和 JavaScript 代码的顺序是什么？如果您首先调用您的函数然后创建滑块，则该函数将找不到它。这可能是它未定义的原因。这也是它在等待一秒钟后工作的原因。在这一秒内页面已经加载完毕，可以找到滑块了。

如果您先创建滑块然后更改它，则可以对其进行操作。您可以使用滑块后的代码块来执行此操作，其中调用了更改滑块值的函数。

【讨论】：