Ember 2.13中如何查找Handlebars里ui.select的定义位置

嘿，我来帮你梳理下在Ember 2.13里定位{{ui.select}}定义的具体方法——这个版本的Ember对命名空间组件/助手的查找逻辑还是比较清晰的：

1. 先判断是组件还是助手 #

首先，{{ui.select}}这种带参数的用法更大概率是组件，但也不排除是自定义助手，我们分两种情况看：

• 如果是组件：
  Ember 2.13中，点分隔的命名空间组件对应项目里的目录结构是app/components/ui/select.js（组件逻辑文件）和app/templates/components/ui/select.hbs（组件模板文件）。你可以直接去这个路径下找，点.会被解析成目录层级。
  如果是来自第三方addon，那它会在node_modules/[对应addon名]/addon/components/ui/select.js里，你可以先看项目package.json里的依赖，找UI类的addon（比如ember-cli-ui、ember-power-select这类），再去对应目录查找。
• 如果是助手：
  自定义命名空间助手的路径是app/helpers/ui/select.js，或者addon里的addon/helpers/ui/select.js。不过助手一般不会用来做复杂的UI渲染，所以这种情况概率较低。

2. 用Ember Inspector快速定位 #

这是最省心的方法：

• 安装浏览器的Ember Inspector扩展（Chrome或Firefox都有），打开你的Ember应用；
• 切换到Components面板，找ui-select（注意Ember会把点转成横杠），点击这个组件条目，就能看到它的定义文件路径，甚至可以直接跳转到本地源码（开发环境下）；
• 如果是助手，就去Helpers面板找ui-select。

3. 全局搜索项目代码 #

用你的IDE（比如VS Code）做全局搜索：

• 搜索export default Ember.Component.extend并筛选路径包含ui/select的文件；
• 或者搜索手动注册代码，比如Ember.Component.register('component:ui/select'——有些项目会手动注册命名空间组件，找到注册代码就能定位到对应的组件类；
• 也可以搜索{{ui.select}}的引用，看看有没有相关的注释或关联的定义文件提示。

4. 检查第三方addon的注册 #

如果上述方法都没找到，大概率是第三方addon提供的：

• 打开项目的package.json，查看dependencies里的UI相关addon；
• 进入node_modules里对应addon的目录，搜索ui/select相关的组件文件，或者查看addon的index.js文件，看有没有注册component:ui/select的代码。

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