物化/流星 - select 表格不工作

Question

我正在尝试在我的 Meteor 应用程序上使用物化 select 表单，但它似乎不起作用....

这是我的代码：

html

<template name="createAutomatedaction">
    <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
</template>

js

Template.createAutomatedaction.onRendered(function(){
  this.$('select').material_select();
});

当我单击 select 表单时，下拉菜单没有显示。谁能告诉我我错过了什么？非常感谢您的帮助。

和这个 https://www.dropbox.com/s/nzh7sp5x7by6e1t/Screenshot%202015-05-09%2018.20.54.png?dl=0

没有这个 https://www.dropbox.com/s/e1asl3y5pbtg5yp/Screenshot%202015-05-09%2018.24.08.png?dl=0

Answer 1

将您的 jquery 代码放入模板事件中：

Template.templatename.events({
      this.$('select').material_select();
});

希望有用

Answer 2

初始化 select 的正确代码是这样的（假设 'createAutomatedaction' 是您的模板名称）

Template.createAutomatedaction.onRendered(function() {
  $('select').material_select();
});

如果您使用的是 Materialize (v0.97.2) 的最新版本（在撰写本文时）there is a bug that causes the dropdown not to be generated fixed on this commit。

如果您想手动快速修复它，请从他们的回购协议 (dist/js/materialize.js) 中获取未缩小的 js，并替换 'bodyElement' 的每个“$body”实例并使用它。

选择即可。

Answer 3

在 select 标签中添加 class="browser-default" 对我有用。

Answer 4

我删除了 class="input-field"，它对我有用。

物化/流星 - select 表格不工作

materialized / meteor - select form is not working

materialized

meteor

html

js