物化CSS-SELECT似乎不会呈现

Question

我目前正在使用materialize CSS，似乎我已经遇到了选择字段。

我使用的是他们站点提供的示例，但不幸的是，它呈现在视图中。我想知道是否有其他人能帮上忙。

我要做的是创建一个有两个结尾间隔提供填充的行-然后在内部的两个行项中应该有一个搜索文本输入和一个搜索选择下拉列表。

这是我正在使用的示例：http://materializecss.com/forms.html

提前谢谢你。

下面是所讨论的代码片段。

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

null

Answer 1

在我看来，物化CSS中select功能的设计是不使用它的一个很好的理由。

您必须使用material_select()初始化select元素，正如@littleguy23提到的那样。如果不这样做，选择框甚至不会显示！在一个老式的jQuery应用程序中，我可以在document ready函数中初始化它。你猜怎么着，现在我和其他很多人都没有使用jQuery，我们也没有在document ready钩子中初始化应用程序。

动态创建的选择。如果我是动态地创建选择，比如在Ember这样的框架中动态地生成视图，该怎么办？我必须在每个视图中添加逻辑，以便在每次生成视图时初始化选择框，或者编写一个视图mixin来为我处理这些。更糟糕的是：当生成视图时，用Ember术语来说，调用DidInsertElement时，对选择框选项列表的绑定可能还没有解决，所以我需要观察选项列表的特殊逻辑，直到填充了选项列表，然后再调用Material_Select。如果选项发生了变化，那么material_select就不知道这一点，也不会更新下拉列表。当选项更改时，我可以再次调用material_select，但这似乎没有任何作用（被忽略）。

换句话说，materialize CSS的选择框背后的设计假设似乎是它们在页面加载时都在那里，并且它们的值永远不会改变。

执行。从美学的角度来看，我也不赞成materialize CSS实现其下拉列表的方式，即在DOM中的其他地方创建一个平行的阴影元素集。诚然，select2这样的替代方案做了同样的事情，并且可能没有其他方法来实现某些视觉效果（真的吗？）。然而，对我来说，当我检查一个元素时，我想看到的是这个元素，而不是某些人神奇地创造出来的某个影子版本。

当烬撕下视图时，我不确定物化CSS是否撕下了它创建的阴影元素。事实上，如果真的发生了我会很惊讶的。如果我的理论是正确的，当视图被生成和拆下时，你的DOM最终会被几十组与任何内容都不相关的阴影下拉所污染。这不仅适用于Ember，而且适用于任何其他基于MVC/模板的OPA前端框架。

绑定。我也不知道如何让对话框中选择的值绑定回Ember这样的框架中的任何有用的东西，该框架通过{{view'Ember.select'value=country}}类型接口调用选择框。换句话说，当选定某项内容时，country不会更新。这是个破坏协议的人。

海浪。顺便说一下，同样的问题也适用于按钮上的“波浪”效应。您必须在每次创建按钮时初始化它。我个人并不关心wave的效果，也不明白为什么这么大惊小怪的，但是如果你真的想要wave，请注意，你将会花很大一部分时间在你的余生中担心如何在每个按钮被创建时初始化它。

我很欣赏实体化CSS的工作，有一些很好的视觉效果，但是它太大了，有太多像上面这样的问题，我不愿意使用。我现在正计划从我的应用程序中删除实体CSS，并返回到引导程序或在西装CSS上面的一个层。你的工具应该使你的生活更容易，而不是更困难。

Answer 2

因为它们覆盖了浏览器的默认值，所以select样式需要Javascript才能运行。您需要包含物化Javascript文件，然后调用

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

在你加载了那个文件之后。