Rendering a react component in Ruby on Rails partial - ruby-on-rails

Is it possible to render a react component in a rails partial through an AJAX call? Basically for performance reasons, I have to do some condition checks in order to render and initialize a react component in rails view. I cannot require the react JS upfront as well. I am thinking about rendering a partial through AJAX call and replacing the html in the view from jQuery. I am using react-rails for this purpose.
I'm not sure if this is the best way to do it. Other alternatives would be helpful too.

checked react-rails source code and had to manually call ReactRailsUJS.handleMount() via javascript.

For me, calling ReactRailsUJS.mountComponents() fixed my issue.

Related

React, Ruby on Rails: jsx vs html.erb

I'm using the react-rails gem to integrate react with rails, and I'm conflicted on how I should organize my code.
Is it preferable that I have my core html in the html.erb files or in the jsx files? Currently, I basically made everything a component. All I do in my html.erb files is using the react_component helper to call those components. For example, I would have a ProfileShow.js.jsx file for my profile page and a EditPost.js.jsx for my edit post page.
What is your suggestion?
I prefer move my react-component's code to js-files. And link them using react_component helper method. It isn't good practice to write your js-code in views.
There are multiple ways to do this.
One of the best solutions I seen so far is to write your react jsx components in an app/assets/javascripts/components folder.
Setup a react gem like https://github.com/shakacode/react_on_rails
that would help with passing on data as props to the view layer as these would be accessible outside react.
I hope this helps.
Cheers.

Rails needs page refresh to render correctly bootstrap markdown

I am developing an app using Ruby on Rails. In a specific view I have a textarea that uses Bootstrap Markdown.
The problem is that each time I visit that view, the textarea is rendered completely plain, without the Markdown functionality. Hitting F5 (refresh) renders the form correctly.
I tried to clear my browsers cache etc, but no luck. I always have to hit refresh to see the page correctly.
What may cause that?
Edit:
I am using this Markdown Plugin
I have also included the js files as stated in this question.
The turbolinks gem has been known to interfere with other javascript files and it's recommended that you remove it completely unless you really need it.
As Mohammad AbuShady said in his comment, you'll need to edit the part of the javascript files for your markdown that tells the page to start rendering. In your case this involves adding
$("#some-textarea").markdown({autofocus:false,savable:false})
inside page:load on the relevant pages.
In case you need turbolinks still, I found this very helpful: JQuery gets loaded only on page refresh in Rails 4 application
I had the same issue and adding jquery-turbolinks gem allowed the bootstrap-markdown editor to load perfectly for me.

What is the best practice for Ruby on Rails 3 layout?

Rails 3 offer application.html.erb as a layout template. However, whenever you send request to access a controller view, the content of application.html.erb will be loaded again. This seems not efficient, since header, navigation, footer only need to be loaded once.
In addition, when you need to have a javascript code executed in $(window).load for application.html.erb and another js method executed in $(window).load for <controller>.html.erb, this will mess up. I think the reason is that $(window).load can only execute once for each page.
So I wonder what's the best Layout practice for Rails 3.
Thanks
Rails 4 includes Turbolinks, which will only reload the body of your website when a link is clicked, instead of reloading all of the assets like javascript and CSS. If you want to fine tune what gets loaded further, you can take a look at pjax, but I think for most applications Turbolinks will be sufficient.

Rails+Backbone.js - dynamical loading templates for mustache

Hi
Please anyone tell me how to load a mustache template from other file into my backbone script?
I'd tried a Ajax but he loads it to me too late and view is already prepared...
Anyway... how to load assets/templates/single/index.html.mustache into backbone View and redirect it into View #el element?
Many thanks
Actually, haven't been able to find a gem similar to handlebars_assets for mustache. Maybe something similar for mustache since handlebars is an extension of mustache.
https://github.com/leshill/handlebars_assets

Sharing templates beetween JS and Rails using Haml + Mustache

I am trying to make common templates that used both by Rails and the client side, ie in coffescript.
I use hogan_assets and haml_assets to export templates to JS. However I can't find a way to use HAML and Mustache to render server-side views.
Partial solution is described here, but it doesn't work with view helpers, ie, "render partial" doesn't work.
For some unknown reason chaining of handlers, such as .mustache.haml, doesn't work, and I can't find neither good info on Rails template handler nor an example on how to build "chainable" handler.
I've been experimenting with something like smt_rails lately, but I have yet to find a silver bullet.

Resources