Ruby on Rails 3.2集成MDC-Web独立组件时遇window.mdc.autoInit报错

我之前维护老旧Rails项目时也踩过这个坑，咱们来一步步搞定它。

问题根源 #

完整的MDC-Web包会把autoInit这个工具函数和所有组件打包在一起，但单独引入组件包时，autoInit是一个独立的模块（mdc-auto-init），默认不会被包含进来，所以直接调用window.mdc.autoInit()就会触发这个报错。

解决方案 #

1. 单独引入mdc-auto-init模块

在你的Rails 3.2项目的asset pipeline配置里，必须先引入mdc-auto-init，再引入其他组件：

• 在app/assets/javascripts/application.js中：

  // 先引入auto-init工具
  //= require mdc-auto-init
  // 再引入你需要的组件，比如文本框、按钮等
  //= require mdc-textfield
  //= require mdc-button
  

• 在app/assets/stylesheets/application.css中（同步引入组件依赖样式）：

  /*= require mdc-auto-init */
  /*= require mdc-textfield */
  /*= require mdc-button */
  

2. 确保asset路径配置正确

如果你是通过npm安装的MDC-Web组件，需要让Rails的asset pipeline能找到这些模块的文件。在config/application.rb中添加对应的路径：

config.assets.paths << Rails.root.join('node_modules', '@material', 'auto-init', 'dist')
config.assets.paths << Rails.root.join('node_modules', '@material', 'textfield', 'dist')
# 其他用到的组件路径也要依次添加

3. 正确时机调用autoInit

要确保在DOM加载完成后再调用mdc.autoInit()，避免因为组件还没加载完成导致的问题。可以在页面底部添加：

document.addEventListener('DOMContentLoaded', function() {
  mdc.autoInit();
});

验证一下 #

做完上面的配置后，重启Rails服务器，刷新页面应该就能正常调用mdc.autoInit()，不会再出现函数不存在的错误了。

内容的提问来源于stack exchange，提问作者Marcel