ruby - 如何在 Volt 中创建 jQuery 切换类？

Question

我正在玩Volt目前正在尝试在我的 Volt 应用程序中为侧边栏做一个简单的切换类(没有运气)。这是一个代码示例。

应用程序/main/views/main.html

<:Title>
  {{ view main_path, "title", {controller_group: 'main'} }}

<:Body>

  <div id="wrapper">
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#">blah</a></li>
        <li><a href="#">blah</a></li>
        <li><a href="#">blah</a></li>
        ...
      </ul>
    </div>

    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="btn btn-default sidebar-toggler">Toggle Sidebar</div>
        <:volt:notices />
        {{ view main_path, 'body', {controller_group: 'main'} }}
      </div>
    </div>
  </div>

app/main/assets/js/sidebar.js

$(document).ready(function() {
  $(".sidebar-toggler").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });
});

当点击 div.sidebar-toggler 时，应将 toggled 类添加到 div#wrapper ...事实并非如此，也许还有另一种方法可以用 Volt 来做到这一点。

上面的代码不起作用。 执行此操作的好的 Volt 方法是什么？

Answer 1

在伏特中，您通常会将 Controller 上的切换状态设置为“reactive accessors ”，然后使用绑定(bind)来更新类状态。由于 Controller 是绑定(bind)的上下文，因此我们可以在 if 绑定(bind)中检查reactive_accessor 的状态。

在 Controller 中:

module Main
  class MainController < Volt::ModelController
    reactive_accessor :toggled

    def toggle_sidebar
      self.toggled = !toggled
    end
    ....

在 View 中:

...
<div class="btn btn-default sidebar-toggler {{ if toggled }}toggled{{ end }}" e-click="toggle_sidebar">Toggle Sidebar</div>
...

当我们调用 self.toggled = 方法时，它会更改状态并使用该数据 react 性地更新任何绑定(bind)。 e-click 调用 Controller 上的toggle_sidebar 方法。完成此类简单操作的常见 Volt 方法是将 if 直接放入 View 中。我们还可以将其放入返回字符串的方法中并绑定(bind)到该字符串。

def toggled_class
  toggled ? 'toggled' : ''
end

....

<div class="btn btn-default sidebar-toggler {{ toggled_class }}" e-click="toggle_sidebar">Toggle Sidebar</div>

希望这对您有所帮助，如果您需要，我可以澄清更多信息。