How do I add a button in ruby volt?

Question

I'm trying to work out how to add a button in the ruby volt framework - it's a bit of a beginner question really.

I've tried to adapt the todos example ( part 1 and part 2 ), but haven't got it to work.

I'm not quite sure if I've got the html wrong or the 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 does put a button on the page, but when I press it I was hoping to trigger 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've put in the p statement as a check - it's definitely not triggered when the button is pushed.

Answer 1

Got this working with some help from @ryanstout - many thanks.

I'm posting this answer as there were two simple errors, which are potential gotchas if you're trying to get started with the ruby volt framework:

The controller code was fine, but there were two errors in the html:

1. There is a small error in the HTML, the second <tr> should be </tr> to close the row

Take-away: there is currently no error generated either by volt (0.9.3) or the version of Firefox I'm using for badly formed HTML, but it could stop your code working - in this case the button didn't work

2. The reference to the field of the iterator variable needs a leading underscore (so m._msg not m.msg)

Take-away: the underscores are needed on the parent object and its fields

Here's how the HTML should look:

<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 that's a help to someone else.

Answer 2

This seems to be correct. But remember - the controller runs in the client side. So you should see the output of the p statement in the browsers console.

Just to be sure - your view lives in app/main/views/main/ ?