Ember.js索引页面异常：ASP.NET MVC5中SPA的Handlebars模板无法执行求助

我之前也在ASP.NET MVC里整合过Ember SPA，碰到过类似的Handlebars模板不生效的问题，给你梳理几个最常见的排查点：

• 先检查脚本加载顺序
  一定要保证Handlebars库在Ember.js之前加载，你的自定义脚本（application.js、routes.js）要放在最后。比如在index.cshtml的底部应该是这样的顺序：

  <script src="~/Scripts/handlebars.js"></script>
  <script src="~/Scripts/ember.js"></script>
  <script src="~/Scripts/application.js"></script>
  <script src="~/Scripts/routes.js"></script>
  

  而且内联的Handlebars模板要放在这些脚本之前，不然Ember初始化的时候找不到模板。

• 确认模板的标签类型和ID
  所有Handlebars模板都要放在<script type="text/x-handlebars">标签里，并且模板ID要和路由/组件名称对应，还要记得添加{{outlet}}用来渲染子路由内容：

  <!-- 应用主模板 -->
  <script type="text/x-handlebars" id="application">
    <nav>
      {{#link-to 'index'}}Home{{/link-to}}
      {{#link-to 'about'}}About{{/link-to}}
    </nav>
    {{outlet}} <!-- 这个是子路由内容的渲染容器，必须添加 -->
  </script>
  
  <!-- About路由对应的模板 -->
  <script type="text/x-handlebars" id="about">
    <h2>About this app....</h2>
  </script>
  

• 避免Razor引擎干扰Handlebars语法
  ASP.NET MVC的Razor会把{{}}当成自己的语法解析，导致模板内容被破坏。解决办法有两个：

  1. 用@Html.Raw()包裹整个模板脚本：

     @Html.Raw("<script type='text/x-handlebars' id='application'>")
       <nav>
         {{#link-to 'index'}}Home{{/link-to}}
         {{#link-to 'about'}}About{{/link-to}}
       </nav>
       {{outlet}}
     @Html.Raw("</script>")
     

  2. 或者在Views文件夹下的web.config里配置Razor忽略双大括号：

     <system.web.webPages.razor>
       <pages pageBaseType="System.Web.Mvc.WebViewPage">
         <razor>
           <add key="disableImplicitHtmlEncoding" value="true" />
         </razor>
       </pages>
     </system.web.webPages.razor>
     

• 检查Ember应用的挂载配置
  确保你的Ember应用挂载到了正确的DOM元素上。在application.js里初始化时指定rootElement：

  App = Ember.Application.create({
    rootElement: '#ember-app' // 对应index.cshtml里的<div id="ember-app"></div>
  });
  

  如果没指定，Ember默认挂载到body，但MVC的布局页可能有其他容器元素，容易导致渲染异常。

• 查看浏览器控制台的错误
  按F12打开开发者工具，看Console里的报错信息——比如模板找不到、路由未定义、脚本加载失败这些，都是快速定位问题的关键。比如如果看到"Assertion Failed: The route 'about' was not found"，那就是routes.js里的路由定义有问题。

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