在页面加载时修改MDL元素

Question

我尝试在页面加载时设置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")

Answer 1

我花了几个月的时间，但我终于找到了解决这个问题的办法。只是需要加上这个--

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

这有一个额外的优点，即在mdl组件完全加载之前隐藏它们的丑陋版本。

Answer 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加载有问题，我建议你在继续下一步之前，确保一切都正确加载，因为这可能会影响你以后。

Answer 3

你的滑块和javascript代码是按什么顺序排列的？如果您首先调用函数，然后创建滑块，函数将找不到它。这可能是它未定义的原因。这也是为什么它在等待一秒钟后才能工作的原因。在这一秒内，页面已经完全加载，并且可以找到滑块。

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