javascript - ember 模板无法在 Rails 应用程序中呈现的最常见原因

Question

我知道这是一个广泛的问题，但我未能找到具体的答案，现在我觉得我只需要采用散弹枪方法。

我正在尝试在 Rails 应用程序中加载一个 ember 应用程序。我有 ember_controller.rb:

class EmberController < FrontendController
  layout 'ember'
  def load
  end
end

我的 Rails 路线是这样的:

MdmFrontEnd::Application.routes.draw do

  resources :sessions, only: [:create, :new, :destroy]

  match '/signin', to: 'sessions#new'
  match '/signout', to: 'sessions#destroy', via: :delete
  match '*path' => 'ember#load'
  root to: 'ember#load' #makes the root of the app, the ember root.
end

我的 rails 布局如下所示:

!!! 5
%html
  %head
    %meta{charset:"utf-8"}
    %title= t("layouts.mobile_manager")
    %meta{name:"viewport", content:"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }
    %link{rel: "icon", type:"image/png", href:"/assets/favicon_16x16.png"}
    = javascript_include_tag "i18n"
    :javascript
      window.locale = "<%= I18n.locale %>";
    = stylesheet_link_tag 'application', media: 'all' 
    = csrf_meta_tags 
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    -if Rails.env.production? 
      :javascript
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-33246783-1']);
        _gaq.push(['_trackPageview']);
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    = render 'shared/js_constants'
    = javascript_include_tag 'app_ember'
  %body

我正在 app_ember.coffee 中使用以下内容初始化一个新的 ember 应用程序:

#= require jquery
#= require jquery_ujs
#= require handlebars
#= require ember
#= require_self
#= require_tree ./app/routes
#= require_tree ./app/controllers
#= require_tree ./app/models
#= require_tree ./app/templates
#= require_tree ./app/views

window.Mdm = Ember.Application.createWithMixins
  LOG_TRANSITIONS: true

  ajax: ->
  $.ajax.apply(this, arguments)

  getUrl: (path) ->
    "/#{path}"

然后我有我的模板、application.hbs 和 index.hbs，在应用程序内部有一个 {{outlet}}。

但是当我尝试渲染根目录时，我只得到一个空白屏幕。

我知道它看到的是模板，因为在控制台中，当我运行 Ember.TEMPLATES 时，它会列出每个模板对象。

我觉得它是 b/t rails 和 ember 的问题，但我不知道。

感谢任何想法!

编辑::我的控制台

如您所见，它正在加载我的模板对象，但随后它还表示找不到应用程序或索引模板。我的模板目录的命名和位置与其他目录(模型、 Controller 等)一样。

Answer 1

这里发生了很多事情，很难确定。一些需要考虑的事情

1. 如果您的 ember 应用程序已正常启动，您应该会看到一些 console.log 输出。这将包括来自 ember re 的 DEBUG 信息:加载了哪些版本。如果您没有看到，则说明您的环境有问题。

2. 由于您设置了 LOG_TRANSITION: true，您应该看到 console.log 消息如下:Transitioned into 'post.index' 当路由器转换到当前路线。如果您在页面加载时没有在控制台中看到任何这些消息，则应用未正确启动。

3. 当我遇到此类问题时，通常是因为我的命名约定与 ember 的预期不符。结果，我的代码被忽略了，ember 正在使用生成的默认值。要查看幕后发生的事情，请在创建应用程序时设置另外两个属性:

-

LOG_ACTIVE_GENERATION: true,
LOG_VIEW_LOOKUPS: true

有了这个，每当 ember 生成路由/ Controller 或呈现 View 时，您应该会看到 console.log 输出。一切就绪后，您的 console.log 应该看起来像这样:

DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0-rc.4 
DEBUG: Handlebars.VERSION : 1.0.0-rc.4
DEBUG: jQuery.VERSION : 1.8.3
DEBUG: ------------------------------- 
generated -> route:post.index Object {fullName: "route:post.index"}
Rendering application with <App.ApplicationView:ember785> Object {fullName: "view:application"} 
Rendering post with <App.PostView:ember789> Object {fullName: "view:post"} 
generated -> controller:post.index Object {fullName: "controller:post.index"} 
Rendering post.index with default view <Ember._MetamorphView:ember796> Object {fullName: "view:post.index"}
Transitioned into 'post.index' 

在这里您可以看到正在生成哪些类、正在呈现哪些模板以及正在使用哪些 View 类。