0

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?

Evolve
  • 8,939
  • 12
  • 51
  • 63
  • What happens if you type the following in your browser console: `App.__container__.lookup('component:time-ago');`? – stephen.hanson Nov 11 '14 at 03:51
  • 1
    This file `app/assets/javascripts/tenmplates/components/time-ago.js` should be a `.hbs` right? – dasnixon Nov 11 '14 at 04:46
  • @liamneesonsarmsauce yep sorry typo when bringing the code across to stackoverflow, yup it's meant to say time-ago.js.hbs – Evolve Nov 11 '14 at 11:50
  • @steve.hanson ok that command works fine from the console, returned an object ---> Class {_outlets: Object, elementId: "ember861", currentState: Object, _state: "preRender", _isVisible: true…} – Evolve Nov 11 '14 at 11:53
  • Do you have the Ember Inspector browser extension? If you open the inspector and go to `View Tree`, and check `Components` at the top, do you see `timeAgo` in the list? When you hover over it, is it highlighting your `timeAgo` template on the page? Also, do you see `components/time-ago` in the list of templates when you type `Ember.TEMPLATES` in your browser console? Everything looks fine to me, so I'm really not sure what the problem might be. – stephen.hanson Nov 11 '14 at 13:31
  • @steve.hanson yes all those things show, and I suppose reflect that the component template file is loading nicely as would work if no component js file was even defined. This issue affects any components I try to make in this project, Im wondering now if this is an issue with require_tree ./components. Is there a rails console command I can use to check that each of the components js files are being found by rails in the requires? How to debug that ./components is working? I've added an edit to my qeustion from running Rails.application.config.assets.paths so far. – Evolve Nov 12 '14 at 02:00
  • Your components should be in `app/assets/javascripts/components`. I just noticed that you said above that they are in `ass/assets/components`. If that is the case, your components are not in your Rails asset pipeline path. Can you try moving them to be inside `javascripts`? To confirm that the components aren't being loaded by the asset pipeline, take a look at your network traffic in your browser dev tools, and you will see that your component JS files are not being loaded. – stephen.hanson Nov 12 '14 at 14:21
  • @steve.hanson I've just checked, they are definitley in app/assets/javascripts/components, so it's not that. Thanks for the tip of checking in the browser dev tools, I'll follow that next. – Evolve Nov 17 '14 at 04:39

0 Answers0