Is there a sample Rails backend + ember.js 1.0.0-pre.2 app to refer.
My application is broken after upgrade.
I read about the named handlebars but there seems to be an issue.
If I write in index.html.haml
<script type="text/x-handlebars" data-template-name="application">
<h1>HI</h1>
</script>
Ember.TEMPLATES has a template named application
if I write a file application.handlebars with same content, I get the error Unable to find template 'application'
Is there any path configuration which has to be done which is missing. Please help.
I'm maintaining an up-to-date Rails / ember example you could reference:
https://github.com/dgeb/ember_data_example
Are you using ember-rails to compile your templates? Of course, you'll also need to require your templates in your application.js if you're using the asset pipeline.
Removed handlebars-assets Gem from Gemfile it used to work till 1.0.pre, it was generating handlebars which were not compatible to Ember code. Ember adds all templates to Ember.TEMPLATES, it was adding into HandlebarsTemplates.
Actually handlebars-assets was never needed. Thanks everyone for help.
Related
Can't seem to figure out how to make the asset pipeline play nice AngularJS template files for components which like this:
app.component("chart", {
templateUrl: "./templates/chart_element_tpl.html",
controller: ChartElementController,
bindings: {
accounts: '='
}
});
I've looked at the various posts on this problem here but none of the suggestions seem to work. I always get the 404 error. One of them talks about upgrading sprockets to version 2.x but I am on version 4 already.
I have taken care to make sure my template has a different name than the javascript file as suggested in another post, but none of these things quite seems to do the trick.
FYI, the structure of the assets relevant assets directory is:
app/assetsjavascripts/chart_component.js
app/assets/javascripts/templates/chart_element_tpl.html
It does seem weird to me that an html template is stored in the javascripts folder but that seems to be the way people do it. I also made sure to include the directory in the applications.js manifest with
//= require_tree ./templates
I tried things like assets:clean and assets:precompile and yarn install and restarting the server but none of that seems to solve the problem.
I also have installed the angular-rails-templates gem and required it in application.js, also no help.
It does make sense to me that this is failing because the actual files are versioned etc. in the public directory, but not sure what to do about that so AngularJs can find my templates.
So, using Rails 5.2beta (gem install rails --pre), if you create a new app via rails new myapp --webpack=react... how would I go about incorporating Lodash into my flow from there?
I've mucked around with babel-plugin-lodash and lodash-webpack-plugin to no avail.
The compile doesn't fail if I do something like import { _pick, _map } from 'lodash/array'; ... but those variables are undefined when trying to use them.
I'm a bit lost as I'm both new to webpacker & webpack, and a lot of existing examples seem to target an older version of webpack?
Anyway, thank you for any help...
UPDATE:
Ok, looks like you can just do import map from "lodash/map"
So where are you trying to use lodash from? By this I mean are you sure the files are getting compiled / processed by Webpacker, or are they getting processed via the Asset Pipeline?
On my webpacker project I realized that there's a problem: that yes, regular old Javascript compiled with the Asset Pipeline won't know about the NPM Modules included via Webpack. (or at least the require statements wouldn't work).
Because of this I made a hard rule: all javascript goes where webpacker expect it (app/javascript) and no Javascript goes in app/assets. We only use the asset pipeline for CSS (which works great in our case, as I still don't think React - our frontend framework of choice - has a good story around site wide CSS).
I'm using .nghaml for my templates and using the following gems for Angular integration:
gem 'angularjs-rails'
gem 'angular-rails-templates'
My Rail view layouts are name.html.haml and using image_tag within them works fine. On production I can see the images.
In contrast, in my Angular templates (assets/template) with their .nghaml extension I can not use Rails helper image_tag and a direct reference does not work
%image(src="assets/sample_image.png")
The direct reference works locally, but on production images don't render.
This person (Rails Image assets in Angular Directive and template) had a similar issue, but using
%img(ng-src='assets/sample_image.png')
worked locally but not in production. And attempting to use image-url results in the error of undefined method (just as image_tag) because none of the Rails helpers seem to be working in the .nghaml extension.
The images that are working (Rails views with image_tag helpers) are referencing the precompiled assets which have their names changed with the addition of a md5-hash (based on the first linked article), but I'm having issues figuring out how to tell the nghaml templates what the new precompiled assets are called without a Rails helper method.
I ran into this issue with helpers a few months ago (Rails App to Angular: HAML + Rails Helpers) and didn't find a solution, but only recently needed to get images into nghaml templates rather than just creating what I needed with CSS.
I'm currently planning to just move the angular templates back to erb if I can't get this figured out, but if there are alternatives (or solutions) I'm unaware of, I'd love to hear them.
The solution proposed in the post Rails App to Angular: HAML + Rails Helpers will allow you to use the helpers (including the image_tag helper) in your haml files when generating the client-side html files.
One issue: According to the official repo for the angular-rails-template library, the .nghaml extension is no longer supported. You have to rename it to .haml
The bigger issue is that you're using Rails to serve a single-page JS app. There's no need for this, you can serve the site using nginx or Apache and control the caching and do cache busting there (nginx & apache cache busting tutorial)
If you're using Rails for the REST API, it should be de-coupled from your frontend AngularJS app.
If you're trying to do some fancy stuff in the templates aside from the cache busting, you should be doing it in JS and plain HTML. It's weird and strange but AngularJS and other frontend MVC/MVVM frameworks are different beasts compared to Rails and Django and the server-side MVC frameworks.
I have a rails app with the ember-rails gem installed it is throwing the following error:
Error: assertion failed: Ember Views require jQuery 1.8, 1.9 or 2.0
(in /Users/toverly/Code/tgsoverly/green-zebra/app/assets/javascripts/templates/application.handlebars)
I have recently upgraded the ember with the included command in the ember-rails gem, which pulls and compiles the latest emberjs and places it in /vender/assets of the rails app. I did this because I wanted to incorporate routes, and wanted to make sure I had the newest version.
I have pushed the branch of my project which is on github.
Code Link to Project
What I have done:
Manually included the jQuery link to a CDN.
Removed the link in the 'application.js' file that loads my app to check the jquery being loading on the page. It is there and above any ember.js file.
Tried 1.8.3 and 1.9.1 of jquery
What am I missing in the rails asset pipeline? Is there a better way to understand the way ember loads views? It was working with the previous version of ember.
First off, in order to keep Ember up to date with the gem, you'll want to configure your Gemfile to use the latest Ember-Rails. By default, it will load the latest official versions of Ember and Ember-Data.
Second, your application needs a few changes to be compatible with the latest versions of both. I submitted a pull request with the necessary modifications and some explanation. Hopefully it should clear things up.
I searched le interwebs, but I haven't found someone experiencing the same problem as me, so I propose my question here.
I just started using Rails 3.1 with Compass, Haml and CoffeeScript and ran into a problem. When I rename my controller-specific JavaScript file located in app/assets/javascript/index.js to index.js.coffee and translate the JavaScript code to CoffeeScript, everything works as expected - the file is requested by the browser and compiled on the fly into JavaScript. Changes in the CoffeeScript file do also trigger recompilation.
However, when I try to do this with unobtrusive JavaScript (:remote => true) and rename the already working JavaScript file located in the view folder app/views/index/index.js.haml to index.js.coffee.haml and translate the included code, Rails doesn't recognize it as a CoffeeScript that needs to be compiled.
What am I doing wrong? Do I actively have to enable CoffeeScript evaluation for the view? Where?
The asset pipeline introduced in Rails 3.1 will automatically compile coffeescript assets into javascript for you, as you've mentioned. This is currently NOT the case for views: only files in app/assets/javascripts will be compiled.
To use Coffeescript in views, you'll need to use https://github.com/markbates/coffeeBeans for the time being.
Update : per Kyle Heironimus' comment below, it seems this functionality can be provided by coffe-rails (see https://github.com/rails/coffee-rails and http://rubygems.org/gems/coffee-rails )