ruby-on-rails - Ruby on Rails - 为什么 Materialize.updateTextFields 不是一个函数？

Question

我有一个使用 material-saas gem 的 Ruby on Rails 项目。我最近注意到文本字段动画已停止工作。更具体地说，当文本字段处于事件状态时，标签不会在页面上向上移动，并且用户在输入字段中键入的任何内容都会覆盖标签文本，看起来很糟糕。 Here (https://github.com/Dogfalo/materialize/issues/682)是我遇到的风格问题的一个例子。除了标签文本无法正确移动之外，表单还有一个无法正常工作的文件字段。当用户选择要上传的文件时，文件名不会出现在表单中，这是预期的行为。

我最近运行了 rake assets:clobber 和 rake assets:precompile，我想知道这是否与此问题有关。

我做了一些研究，在 Material CSS 文档中他们说:

You can also call the function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

我尝试了此修复，但是当我加载页面时，我在控制台中收到Uncaught TypeError: Materialize.updateTextFields is not a function。

这是我的表单 View :

<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for @photo, multiple: true do |f| %>

  <div class="input-field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div class="input-field">
    <%= f.label :caption %>
    <%= f.text_area :caption, class: "materialize-textarea" %>
  </div>

  <%= f.label :date %>
  <%= f.date_field :date, class: "datepicker"%>

  <div class="file-field input-field">
    <div class="btn waves-effect waves-light yellow accent-4 white-text">
      <span>File</span>
      <%= f.file_field :image %>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text">
    </div>
  </div>

  <div class="input-field center-align">
    <%= f.submit "Upload", class: "btn-large waves-effect waves-light"  %>
  </div>

<% end %>

这是我的 Assets /application.js

//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .

这是我的 Assets /custom.js

$(document).ready(function() {
  Materialize.updateTextFields();
});

这真的很奇怪，因为我知道表单样式动画正在工作。我没有更改表单的代码。我唯一能想到的是 clobber/precompile 命令，我需要运行它来对生产环境进行一些 ui 改进。

感谢您花时间查看此内容，非常感谢您的帮助!

Answer 1

对我来说似乎有一些问题:

Rails 很神奇，它可以执行称为“turbolinks”的操作。基本上，页面是动态替换的，而不是实际更改页面。它使您的网站速度更快，但并不总是发出相同的 Javascript 事件。

您还需要 JQuery 2(根据 Dmitry 的建议，我更新了我的答案)。

将应用程序 JS 的前几行更改为:

//= require jquery2
//= require turbolinks
//= require materialize-sprockets

其次，我发现了实体化库中存在的第二个错误。基本上，在 Turbo 链接加载页面之前，它不会定义 updateTextFields() 。为了解决这个问题，我 submitted a PR ，但与此同时，我会通过复制/粘贴 source 中的方法来修补这个问题。到您的代码(在 $(document).ready 内)。使用类似的东西让你的代码在修复错误后得到更新(几乎是一个填充)。

Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js