Rails 3.1 has Template Inheritance feature built in, very nice. But when I tried to use it with unobtrusive javascript, it doesn't work.
I have a bunch of controllers all respond to :js and all of the xxx.js.erb are almost the same, so I moved them into app/views/application folder, and then the controller just couldn't find the xxx.js.erb from that folder like it does for finding xxx.html.erb. Am I miss something or it isn't supported?
It seems to me your javascript files should be in the assets folder instead.
Related
In Sitefinity WebForms you have a ResourceLinks control allowing you to combine multiple, but what do you use in MVC layouts?
I'm not sure if the razor helper #Html.StyleSheet will do the job?
Adding all the CSS files to the Global folder in App_Data\Sitefinity\WebsiteTemplates[template_folder]\App_Themes[theme] will automatically add them to the site, but won't combine them.
We're working with Sitefinity 8.x and looking for a definitive way to compress and combine JS and CSS, but the pickings seem slim.
With the move from webforms to mvc, Sitefinity didn't include specifically introduce a new bundler or something so you're left with essentially 2 default options, but they've seemed to have opted for approach #3.
1) Use .less and .sass to pre-process as part of your build process.
So in your theme folder you would have a global.less (or scss or sass) that essentially combines them using the #import directive.
Install a VisualStudio extension like Mad's Kristensen Bundler and Minification VS Extension (previously part of WebEssentials) and then define in the VS settings that it should compile and minify on build.
Then every time you build or publish, your one bundled-and-compressed .min.css will be available for Sitefinity.
2) Second option would be to use default ASP.NET Web Optimization.
Where you define static bundles in VisualStudio and then use these bundles by means of #Styles.Render or #Scripts.Render to output them.
3) Lastly a new way has been added with the new Feather approach, which uses the current fashionable approach of Grunt to bundle and optimize your styles and scripts.
In the /ResourcePackages folder you'll already see a gruntfile.js file which has a task you can run which can then compile (and can be extended to prefix, bundle, minify, etc) your .sass into a .min.css which you can then add to your solution.
A sample can be seen here (https://github.com/Sitefinity/feather-packages/blob/master/Bootstrap/gruntfile.js)
I'd use a combination of the above approach to receive the maximum result with Sitefinity where you use option 1 to have VS build out your core/base CSS and JS and then include them using Web.Optimization.
Any additional page or widget related styles or JS can then be included afterwards manually through the css widget which gets compiled through option number 3.
Once you get more familiar with this new approach you can create and load optimized .css and .js on demand - even using a RequireJS approach to load them depended on the widget dragged and dropped on the page. RequireJS might seem out-dated given the latest gadgets and gizmo's but with v9.0 its still being used by Sitefinity itself to add inline-editing functionality.
Let me know if you need more info on option 3, I'm happy to extend my answer with some code snippets, or sample scripts on how I've tailored them.
I have a Durandal 1.2 project which is built using require.js. The directory structure looks a lot like the below. (Much more than this, just a snippet). Each directory contains an index.js file for the require module js, and an index.html for it's view. I'm wanting to minify and concatenate these files into one (as that seems to be the whole point of using require...), but I'm not having any luck with my build scripts. Are there any suggestions on how to go about this? All Durandal docs seem to only reference 2.0 now, so I'm not getting any help there. Many thanks!
You can download a version of Durandal 1.2 docs at http://durandaljs.com/version/1_2_0/Documentation.zip and #JohnHunter uploaded them to github : https://github.com/johnhunter/durandal-1.2-docs
Assuming you're using a OOTB 1.2 layout running optimizer.exe in app/durandal/amd should be all that's needed.
Many jQuery plugins have the following directory structures:
/<plugin name>
../css
../images
../js
The CSS files usually have relative links to the images in them. What I want to do is include these plugins in the Rails Way under the Asset Pipeline, and hopefully that doesn't involve having to renamed the file references to remove the relative links. Is there such a Rails Way?
Could it also be that it's overkill to include an already-minified jQuery plugin in the Asset Pipeline?
You should try to add your assets to the load path which is the recommended way, as far as I know. If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("plugins/plugin_name/assets/")
Not shure, if this is what you asked for but if not, you should check: http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Remeber to restart your server
I had the same issue and also tried to find "the Rails way" to do this. And this is what I ended up with at the end of the day:
As Rob already mentioned:
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Source: 2.1 Asset Organization
Lets take a practical example: using the jquery_datepicker gem (Note: we had to use a workaround because of this issue: bundle pack does not work with git sources).
1) Installing the gem (pretty straighforward):
cd vendor/gems
git clone https://github.com/albertopq/jquery_datepicker.git
2) Add this to your Gemfile
gem 'jquery_datepicker', :path => 'vendor/gems/jquery_datepicker'
3) Install a jquery-ui theme
From ThemeRoller select a theme, check Datepicker and Slider
and the jQUery version
Download and extract the content of the package
CSS/images from the css/theme-name folder move them:
jquery-ui-1.8.xx.custom.css to app/vendor/stylesheets/
the images folder to app/vendor/images/ (yes, move the entire folder images so you end up with something like this app/vendor/images/images/ui-icons_256x240.png
i18n from the development-bundle/ui/i18n folder (optional) move them to:
Create a folder i18n under app/vendor/javascripts/
move jquery.ui.datepicker-xx.js to this folder app/vendor/javascripts/i18n/
make sure the i18n folder is loaded so include in application.js
//= require_directory ./i18n
vendor/assets is loaded automatically AFAIK so you don't have to include the path in the asset pipeline.
I'd like to see how others are approaching this, it's a very good question.
I think the reason you haven't received an answer is because it's kind of unclear what you're asking. Are you asking if it's overkill to put your plugins in the asset pipeline? Are you asking if you have to rename file references?
I always put all my jquery plugins in my asset pipeline. Overkill or not, there all in one place and they only get compiled once so even if compiling them takes longer, it doesn't affect my app.
I am trying to put some external images (used by a jQuery plugin) to vendor/assets/images in my Rails 3.1 app. Problem is that when I try something like:
<%= image_tag "ui-bg_flat_75_ffffff_40x100.png" %>
I get an error:
No route matches [GET] "/assets/ui-bg_flat_75_ffffff_40x100.png"
I checked my Rails.application.config.assets.paths and it list these dirs:
..../app/assets/images
..../app/assets/javascripts
..../app/assets/stylesheets
..../vendor/assets/images
..../vendor/assets/stylesheets
..../.rvm/gems/ruby-1.9.2-p180#mygems/gems/jquery-rails-1.0.9/vendor/assets/javascripts
As you can see /vendor/assets/images is listed there. If I put my image to app/assets/images everything works.
I thought that new asset pipeline was supposed to go through all assets dirs and serve requested file wherever it finds it.
Does anyone knows what's the problem here?
I had to restart my rails server after creating the vendor/assets/images directory. Before this, I was seeing the same error as you ("No route matches [GET]").
My guess is that the rails server does not check these directories if they did not exist when it was first started. When you open a rails console to diagnose the issue, you get a new instance of rails which knows about the directory, which only adds to the confusion.
If you are using a jQuery UI Theme Roller theme then the problem might be that in the jquery-ui css file the images are referenced within a sub folder 'images'.
I.e. you either have to put your images in a folder './app/assets/images/images' or you have to edit the jquery-ui css file and remove the 'images/' folder prefix.
The asset pipeline is described in this rails guide by Ryan Bigg (draft status at the moment).
http://ryanbigg.com/guides/asset_pipeline.html and http://ryanbigg.com/2011/06/sprocket-asset-tags-internals/ for the references.
According to this, your example should work.
Extract:
Assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, javascript files or stylesheets.
lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins.
Any subdirectory that exists within these three locations will be added to the search path for Sprockets (visible by calling Rails.application.config.assets.paths in a console). When an asset is requested, these paths will be looked through to see if they contain an asset matching the name specified. Once an asset has been found, it’s processed by Sprockets and then served up.
I have tested with an example in my app and the same syntax as yours works. Maybe you have a typo in the name of your asset.
For Martin: search path for Sprockets is visible by calling Rails.application.config.assets.paths in a console.
Maybe you should create another folder in /assets/images. You make a name 'images' and then you just copy all jquery-ui image and paste on folder 'images' that you create before. Hopefully this will help you.
I have a few other files related to my Rails website I am building like a few wireframes, mocks, and other design files. I want to store them in the Rails website directory so that all the things relating to that project are in the same folder. Where should I store these non-essential, non-related files inside a Rails app? Public/, Lib/, Vendor/? Please help me out. Thanks!
If you want them to be easily accessible, use public/. Otherwise, I would suggest just creating a new directory for these things, design/ perhaps.