繁体   English   中英

在Meteor应用中刷新之前,materialize material_select()不起作用

[英]Materialize material_select() not working before refresh in Meteor app

我在Meteor项目的模板中使用了以下select

    <div class="input-field">
        <select name="color" id="color">
            <option value="%23B1365F">Pink</option>
            <option value="%232952A3">Blue</option>
            <option value="%23711616">Red</option>
            <option value="%2328754E">Green</option>
            <option value="%23BE6D00">Orange</option>
            <option value="%23113F47">Sea Blue</option>
            <option value="%235229A3">Purple</option>
            <option value="%23528800">Olive</option>
            <option value="%2388880E">Gold</option>
            <option value="%23333333">Black</option>
        </select>
        <label for="color">Colour: </label>
    </div>

在我的js文件中使用以下命令初始化Materialize选择下拉列表

    if (Meteor.isClient) {
      Template.layout_settings.onRendered(function () {
        $('select').material_select();
      });
    }

但是,选择对话框仅在刷新后有效/显示,刷新之前,我在控制台中收到以下错误:

    TypeError: $(...).material_select is not a function
      at null.<anonymous> (settings.js:48)
      at template.js:116
      at Function.Template._withTemplateInstanceFunc (template.js:457)
      at fireCallbacks (template.js:112)
      at null.<anonymous> (template.js:205)
      at view.js:107
      at Object.Blaze._withCurrentView (view.js:538)
      at view.js:106
      at Object.Tracker._runFlush (tracker.js:497)
      at onGlobalMessage (setimmediate.js:102)

刷新后,它可以很好地工作,是否有人知道为什么会发生这种情况? 在Google上找不到任何内容。

刷新之前

刷新后

提前致谢!

这不是最漂亮的解决方法,但是它解决了该问题。

Materialze似乎没有及时添加其jQuery函数以在Blaze模板的onRendered函数中使用它们。

但是,它确实将函数添加到Package.jquery.$.fn.material_select对象。

我刚刚创建了自己的jQuery函数,该函数引用了该对象的函数体:

    (function($){
        $.fn.material_select_fix = Package.jquery.$.fn.material_select;
    })(jQuery)
    $("select").material_select_fix();

我希望这也适用于其他情况...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM