在 Meteor 应用程序中刷新之前，Materialize material_select() 不起作用答案

【问题标题】：Materialize material_select() not working before refresh in Meteor app在 Meteor 应用程序中刷新之前，Materialize material_select() 不起作用
【发布时间】：2016-06-10 20:35:30
【问题描述】：

我在 Meteor 项目的模板中使用以下选择

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

刷新后它工作得很好，有人知道为什么会这样吗？在谷歌上找不到任何东西。

Before refresh

After refresh

提前致谢！

【问题讨论】：

你是如何添加物化的？
@Stephen Woods Meteor add materialize:materialize in cmd in the cmd in the root folder
如果在material_select() 行之前执行console.log($('select')); 会输出什么？另外，当您执行meteor list 时，会显示什么版本的物化？看起来这是去年的一个已知问题：github.com/Dogfalo/materialize/issues/1946
@StephenWoods 我得到的输出是：this，我正在使用物化版本 0.97.5

标签： javascript jquery html meteor materialize

【解决方案1】：

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

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

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

【讨论】：

目前它不适合我。你知道为什么它不工作吗？我应该把这段代码放在哪里？在客户端Meteor.startup?还是部分？