How to add a button to ruby volt?
I'm trying to figure out how to add a button to a ruby volt framework - this is a bit of a beginner's question.
I tried to adapt todos example ( part 1 and part 2 ), but it doesn't work.
I'm not entirely sure if I have the wrong html or controller code. Any pointers would be greatly appreciated.
watering.html
<button e-click="add_message">Start Watering</button>
<table class="message_table">
{{ _messages.each do |m| }}
<tr>
<td> {{ m.msg }} </td>
<tr>
{{ end }}
</table>
This makes the button appear on the page, but when I click it I was hoping to call the following code in the controller, however nothing happens.
main_controller.rb
module Main
class MainController < Volt::ModelController
model :store
...
def add_message
p "### Message triggered ###"
_messages << {msg: "test-msg-01"}
end
end
I put the p statement as a check - it definitely doesn't fire when the button is pressed.
source to share
Got this working with some help from @ryanstout - thanks a lot.
I am posting this answer as there are two simple errors that are potential errors if you are trying to get started with a ruby volt map:
The controller code was correct, but there were two errors in the html:
- There is a small error in the HTML, the second one
<tr>
must be</tr>
to close the line
Cancel: There are currently no errors generated by volts (0.9.3), nor the version of Firefox I'm using for the malformed HTML, but that might stop your code from working - in this case the button didn 't work
- An iterator variable field reference needs a major underscore (so m._msg not m.msg)
Takeaway: underlines are required for the parent object and its margins
This is what the HTML looks like:
<button e-click="add_message">Start Watering</button>
<table class="message_table">
{{ _messages.each do |m| }}
<tr>
<td> {{ m._msg }} </td>
<tr>
{{ end }}
</table>
Hope it helps someone else.
source to share