如何在 ruby 伏特中添加按钮？

Question

我正在尝试研究如何在 ruby 伏特框架中添加按钮 - 这确实是一个初学者问题。

我已经尝试修改 todos 示例 (part 1 and part 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 语句作为检查 - 它绝对不会在按下按钮时触发。

Answer 1

这似乎是正确的。但请记住 - 控制器在客户端运行。所以你应该在浏览器控制台中看到 p 语句的输出。

请确定 - 您的观点存在于 app/main/views/main/ ?

Answer 2

在@ryanstout 的帮助下完成了这项工作 - 非常感谢。

我发布这个答案是因为有两个简单的错误，如果您尝试开始使用 ruby 伏框架，这可能是陷阱：

控制器代码没问题，但是html中有两个错误：

HTML有一个小错误，第二个<tr>应该是</tr>来关闭行

要点：目前没有由 volt (0.9.3) 或我使用的 Firefox 版本生成的错误 HTML，但它可能会阻止您的代码工作 - 在这种情况下按钮不起作用

对迭代器变量字段的引用需要前导下划线（所以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>

希望这对其他人有所帮助。

如何在 ruby 伏特中添加按钮？

How do I add a button in ruby volt?

ruby

voltrb