Reputation: 9193
I've created an Ember Component in my ember-rails app but it is not reading my main component js file for some unfathomable reason.
I'm using my component like this..
# app/assets/javascripts/templates/comment.hbs
<p>{{time-ago createdAt=comment.created_at}}</p>
Here is the component template, which I can see is rendering as I can see the static text "posted" shows up in the browser, but anything defined in the component js file just outputs blank, eg {{doesNotWork}} outputs nothing.
# app/assets/javascripts/tenmplates/components/time-ago.js
<p>posted <strong>{{timeAgo}} {{doesThisWork}}</strong></p>
And the component js file which DOES NOT SEEM TO LOAD as no variables I define here can I seem to get to render into the component template
# app/assets/javascripts/components/time-ago.js
App.TimeAgoComponent = Ember.Component.extend({
timeAgo: '',
oldTimeAgo: '',
doesThisWork: 'shows blank rather than this message',
clock: function() {
var newTimeAgo = moment(this.get('createdAt')).fromNow();
if (this.get('oldTimeAgo') !== newTimeAgo ) {
this.set('timeAgo', moment(this.get('createdAt')).fromNow());
}
Ember.run.later(this, this.clock, 1000 * 10);
}.on('didInsertElement')
});
My gut feel is there is an issue with how ember-rails is rendering or Not rendering files in app/assets/javascripts/components any ideas what it could be?
[Edit 1: Adding my rails js files per comments enquiry]
Here are my rails js files. Note the ember app is on the route /docs within my rails app.
# app/assets/javascripts/docs.js.coffee
#= require handlebars
#= require ember
#= require ember-data
#= require remarkable
#= require moment
#= require ember-devise-simple-auth/globals
#= require_tree ./templates
#= require_tree ./components
#= require_self
#= require app
# app/assets/javascripts/application.js.coffee
#= require jquery
#= require jquery_ujs
#= require jquery.timeago
#= require turbolinks
#= require bootstrap
#= require activities
#= require collaborators
#= require dashboard
#= require plans
#= require profiles
#= require projects
#= require roles
#= require sections
#= require templates
#= require subscriptions
#= require select2
[Edit 2: Im wondering if app/javascripts/components path is even loading]
I found in rails I can run this command from rails console.
>> y Rails.application.config.assets.paths
---
- /Users/richie/Projects/bimbicycle/app/assets/images
- /Users/richie/Projects/bimbicycle/app/assets/javascripts
- /Users/richie/Projects/bimbicycle/app/assets/stylesheets
- /Users/richie/Projects/bimbicycle/vendor/assets/components
- /Users/richie/Projects/bimbicycle/vendor/assets/ember
- /Users/richie/Projects/bimbicycle/vendor/assets/fonts
- /Users/richie/Projects/bimbicycle/vendor/assets/images
- /Users/richie/Projects/bimbicycle/vendor/assets/javascripts
- /Users/richie/Projects/bimbicycle/vendor/assets/stylesheets
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/bootstrap-sass-3.1.1.0/vendor/assets/fonts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/bootstrap-sass-3.1.1.0/vendor/assets/javascripts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/font-awesome-sass-4.0.3.2/vendor/assets/fonts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/font-awesome-sass-4.0.3.2/vendor/assets/stylesheets
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/xray-rails-0.1.14/app/assets/javascripts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/xray-rails-0.1.14/app/assets/stylesheets
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/select2-rails-3.5.7/app/assets/images
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/select2-rails-3.5.7/app/assets/javascripts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/select2-rails-3.5.7/app/assets/stylesheets
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/turbolinks-2.1.0/lib/assets/javascripts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/jquery-rails-3.0.4/vendor/assets/javascripts
- /Users/richie/.rvm/gems/ruby-2.0.0-p481/gems/coffee-rails-4.0.1/lib/assets/javascripts
- !ruby/object:Pathname
path: /Users/richie/Projects/bimbicycle/vendor/assets/components
=> nil
It's interesting to note the error at the end relating to vendor/assets/components, but Im not sure this is really related to my issue as my components are under app/assets/components.
Wondering, is there a better rails commend to check that require_tree ./components is loading my time-ago.js file?
Upvotes: 0
Views: 215