dynamic but not yet reactive text in handlebars

app/assets/javascript/vue_r/application.rb

@@ -61,5 +61,6 @@ module VueR
       end
       effect.call
     end
+
   end
 end

app/assets/javascript/vue_r/mounter.rb

@@ -1,3 +1,5 @@
+require 'opal-parser'
+
 module VueR
   class Mounter
 
@@ -11,8 +13,22 @@ module VueR
     end
 
     def mount_Text elem
-      puts "Text: #{elem.text}"
-      puts "DYN text" if elem.text.include? "{{"
+      text = elem.text
+      puts text
+      scan = text.scan(/{{\s?([^}]*)\s?}}/)
+      return unless scan.length > 0
+      puts scan
+      raise "only one curly per text implemented not:#{scan.length}" if scan.length > 1
+      match = text.match(/{{\s?([^}]*)\s?}}/)
+      str_before = text[0 ... match.begin(0)]
+      str_after = text[ match.end(0) .. -1]
+      ruby = match[0][2 ... -2]
+
+      proc = Proc.new do
+        elem.text = str_before + @application.eval(ruby).to_s + str_after
+      end
+      proc.call
+
     end
 
     def mount_Element(elem)

app/views/kanta/show.html.haml

@@ -1,9 +1,10 @@
-#app.flex.justify-center
-  .flex.flex-col
+#app
+  .flex.justify-center
     = @image.attributes
 
+  .flex.justify-center
     %a.underline{ e_click: "hi"}
-      {{Back}}
+      {{ bg }}
     %div{ r_class: 21 }
 :opal
   class Clicker < VueR::Application
@@ -11,7 +12,4 @@
   end
 
   kanta = Clicker.new(bg: 'bg-cyan-200')
-  puts kanta.bg
-  kanta.bg = "bg-cyan"
-  puts kanta.bg
   kanta.mount("#app")