Как добавить кнопку в рубиновом вольте?

Я пытаюсь понять, как добавить кнопку в среду ruby ​​Volt - это действительно вопрос для новичка.

Я пытался адаптировать пример задач ( часть 1 и часть 2), но не получил его на работу.

Я не совсем уверен, если я неправильно понял HTML или код контроллера. Любые указатели будут с благодарностью.

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>

Это действительно помещает кнопку на страницу, но когда я нажимаю ее, я надеялся вызвать следующий код в контроллере, однако ничего не происходит.

main_controller.rb

module Main
  class MainController < Volt::ModelController
    model :store

 ...

    def add_message
      p "### Message triggered ###"
      _messages << {msg: "test-msg-01"}
    end

end

Я поставил в качестве проверки оператор p - он определенно не срабатывает при нажатии кнопки.

2 ответа

Решение

Работаю с помощью @ryanstout - большое спасибо.

Я публикую этот ответ, так как были две простые ошибки, которые могут стать ошибкой, если вы пытаетесь начать работу с средой ruby ​​вольт:

Код контроллера был в порядке, но в html было две ошибки:

  1. В HTML есть небольшая ошибка, вторая <tr> должно быть </tr> закрыть ряд

Вывод: в настоящее время нет ошибок, генерируемых ни volt (0.9.3), ни версией Firefox, которую я использую для плохо сформированного HTML, но это может помешать работе вашего кода - в этом случае кнопка не работает

  1. Ссылка на поле переменной итератора требует начального подчеркивания (поэтому m._msg, а не m.msg)

Вывод: подчеркивания необходимы для родительского объекта и его полей

Вот как должен выглядеть 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>

Надеюсь, это помощь кому-то еще.

Это кажется правильным. Но помните - контроллер работает на стороне клиента. Таким образом, вы должны увидеть вывод оператора p в консоли браузера.

Просто чтобы быть уверенным - ваш взгляд живет в app/main/views/main/?

Другие вопросы по тегам