watched attributes (and text)

app/assets/javascript/vue_r/application.rb

@@ -30,12 +30,13 @@ module VueR
     end
 
     def track( key )
+      puts "Tracking:#{key}-#{@effect.hash}"
       return unless @effect
-      subs = get_subscribers_for(key)
-      subs << @effect
+      get_subscribers_for(key) << @effect
     end
 
     def trigger(key)
+      puts "Trigger:#{key}"
       effects = get_subscribers_for(key)
       effects.each {|effect| effect() }
     end

app/assets/javascript/vue_r/mounter.rb

@@ -2,7 +2,7 @@ require 'opal-parser'
 
 module VueR
   class Mounter
-
+    HANDLEBARS = /{{\s?([^}]*)\s?}}/
     def initialize( id , app )
       @root = $document[id]
       @application = app
@@ -14,34 +14,43 @@ module VueR
 
     def mount_Text elem
       text = elem.text
-      puts text
-      scan = text.scan(/{{\s?([^}]*)\s?}}/)
+      scan = text.scan(HANDLEBARS)
       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?}}/)
+      match = text.match(HANDLEBARS)
       str_before = text[0 ... match.begin(0)]
       str_after = text[ match.end(0) .. -1]
       ruby = match[0][2 ... -2]
-
+      puts "Text: #{ruby}"
       proc = Proc.new do
         elem.text = str_before + @application.eval(ruby).to_s + str_after
       end
-      proc.call
-
+      @application.watch_effect(proc)
     end
 
     def mount_Element(elem)
       elem.attributes.each do |name , value|
-        puts "Name: #{name}"
-        puts "Value: #{value}"
-        puts "DYN" if name.start_with?("r_")
-        puts "EVENT" if name.start_with?("e_")
+        mount_attribute(elem , name) if name.start_with?("r_")
+        mount_event(elem , name)  if name.start_with?("e_")
       end
       elem.children.each do |elem|
         base_name = elem.class.to_s.split("::").last
         send "mount_#{base_name}" , elem
       end
     end
+
+    def mount_attribute(element , name)
+      native_name = name[2 .. -1]
+      ruby = element[name]
+      old_value = element[native_name]
+      puts "Attribute: #{ruby}"
+      proc = Proc.new do
+        element[native_name] = old_value + " " + @application.eval(ruby).to_s
+      end
+      @application.watch_effect(proc)
+    end
+    def mount_event(element , name)
+      puts "Event: #{name}"
+    end
   end
 end

app/views/kanta/show.html.haml

@@ -1,11 +1,10 @@
 #app
   .flex.justify-center
-    = @image.attributes
+    = #@image.attributes
 
   .flex.justify-center
-    %a.underline{ e_click: "hi"}
+    %a.underline{ e_click: "hi" , r_class: 'bg'}
       {{ bg }}
-    %div{ r_class: 21 }
 :opal
   class Clicker < VueR::Application