Buen día, si lo que quieres es obtener el valor de algún elemento del DOM y asignarlo a otro, te recomiendo jQuerymy , que replica el uso de DataBinding con jQuery. Dale un vistazo a la pagina tiene buenos ejemplos que te ayudaran a tu pregunta.
Sin embargo dejare un ejemplo acá de guía, para obtener el valor de tus inputs y al tiempo que escribes en ellos ir mostrando su valor en un párrafo.
Pero antes recuerda mirar los demos de jQuerymy.
En tu html.erb
<!-- define el alcance, encierra los datos que vas a manipular con un div -->
<div id="formulario">
<%= simple_form_for(@point) do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<!-- asignale un id a los elementos que manipularas -->
<div class="form-inputs">
<%= f.input :total_balance %>
<%= f.input :quantity %>
<%= f.input :type_point %>
<%= f.association :material, label_method: :name, value_method: :id %>
</div>
<!-- mostrando los datos en tiempo real -->
<p id="total_balance"></p>
<p id="quantity"></p>
<p id="type_point"></p>
<p id="unir-texto"></p>
<p id="multiplicacion"></p>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
</div>
En una etiqueta javascript asumiendo que @point == Point.new
//declara arreglo donde se alamacenaran los datos de los inputs
var datos = { "total_balance": null, "quantity": null, "type_point": null};
//ahora enlaza los inputs con el arreglo
var comportamiento = {};
for( var key in datos){
comportamiento["#point_"+key] = {bind: key}; //asocia input con arreglo
comportamiento["#"+key] = {bind: key,
watch: "#point_"+key
}; // enlaza arreglo con los parrafos
};
//agregando los dos parrafos personalizados[ unir-text , multiplicacion]
comportamiento["#unir-texto"] = {
bind: function (data) {
return (data.total_balance + " " + data.quantity + " " + data.type_point);
},
watch: "#point_total_balance, #point_quantity, #point_type_point"
};
comportamiento["#multiplicacion"] = {
bind: function (data) {
return (data.total_balance * data.quantity * data.type_point);
},
watch: "#point_total_balance, #point_quantity, #point_type_point"
};
// inicializar dataBinding
$("#formulario").my({ui:comportamiento}, datos);
Como ves solo es cuestión de que armes la cadena a mostrar a tu antojo.
Posdata: en las dependencias la versión Sugar Library v1.4.0
fue compatible para mi. Presenté problemas con la ultima versión.
Probado en:
Rails v5.1.6 ruby v2.3.3