Open catmando opened 6 years ago
already there:
React::Test::Utils.render_component_into_document(MyComponent, args)
maybe needs a better name
actually, its built into react-rails, and works with the <% react_component ...%>
helper!
we can make it a bit nicer like this:
#jquery-mounter.rb
require 'jquery'
require 'opal-jquery'
%x{
(function ( $ ) {
$.fn.mount_components = function() {
this.each(function(e) { ReactRailsUJS.mountComponents(e[0]) })
return this;
}
}( jQuery ));
}
Element.expose :mount_components
Now we can add the components to the view using <%= react_component ... %>
and mount them by doing a dom query, then calling mount_components
.
Typical in JS:
// fetch.js.erb
$('#target_div').html("<%= escape_javascript(render partial: 'fetch') %>").mount_components();
// fetch.erb contains our html code including 1 or more component mount points
In Ruby
Element['body'].mount_components # mount everything!
From opal you can call
Hyperloop.mount_all
or from js land itshyperloop_mount_all()
It will find all components with the data-hyperloop-mount data attribute, and the name of the component will be the attribute value. For example
will mount MyBigComponent at the DIV and pass it 'some data' as param1