I am trying to embed an Ember app in my Rails view, but I can't get a simple view to load.
Relevant part of gemfile:
gem "ember-rails"
gem 'ember-source'
gem 'emblem-rails'
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require underscore
//= require ../../../vendor/assets/javascripts/paper.js/dist/paper-full.min.js
//= require handlebars
//= require ember
//= require ember-data
... some more
//= require_tree .
window.Tabbasco2 = Ember.Application.create({
rootElement: '#ember',
LOG_TRANSITIONS: true,
LOG_BINDINGS: true,
LOG_VIEW_LOOKUPS: true,
LOG_STACKTRACE_ON_DEPRECATION: true,
LOG_VERSION: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_ACTIVE_GENERATION: true,
debugMode: true,
});
Tabbasco2.ApplicationView = Ember.View.extend({
//templateName: 'nav'
})
Tabbasco2.ApplicationController = Ember.Controller.extend({
init: function() {
// Do stuff
}
})
And here is the HAML for the Rails view that is loading:
... other html
#ember
-# http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes
%script#application{ :type => 'text/x-handlebars', :data => {:template_name => 'application' }}
{{outlet}}
%script{ :type => 'text/x-handlebars', :data => {:template_name => 'index' }}
test
... other html
The ember folders controllers, helpers, models etc are listed directly under /app/assets/javascripts
The strange thing about this is that no matter what I seem to try, Ember never logs anything more than the bootstrapping info from ember itself. The application just doesn't seem to load even though I can see in the network inspector that all the javascript is being loaded. In the chrome console:
DEBUG: -------------------------------
ember.js:3522DEBUG: Ember : 1.5.0
ember.js:3522DEBUG: Handlebars : 1.3.0
ember.js:3522DEBUG: jQuery : 1.10.2
ember.js:3522DEBUG: -------------------------------
ember.js:3522DEBUG: For more advanced debugging, install the Ember Inspector from https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi
Ember does find the templates, as can be seen in the Ember object:
> Ember.TEMPLATES
Object
-> application: function (context, options) {
-> index: function (context, options) {
-> __proto__: Object
However, it doesn't seem to even try loading anything. Should I setup routing differently? Reorder the Controller or View? My page is loading under the following Rails route:
get '/partiture/show/:hash/', to: 'partitures#show'
I must be overlooking something very simple. Any help would be greatly appreciated.
