Evolve
Evolve

Reputation: 9193

Ember Rails Components not working

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

Answers (0)

Related Questions