Question

我正在玩Volt并且正在尝试为我的Volt应用中的侧边栏做一个简单的toggleClass（没有运气）。这是一个代码示例。

应用程序/主/视图/ 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>

应用程序/主/资产/ 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

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

在控制器中：

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

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

在视图中：

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

当我们调用self.toggled =方法时，它会更改状态并使用该数据反应性地更新任何绑定。电子邮件调用控制器上的toggle_sidebar方法。像这样简单的常见Volt方法是将if直接放入视图中。我们也可以将它放入一个返回字符串并绑定到该方法的方法中。

def toggled_class
  toggled ? 'toggled' : ''
end

....

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

希望这有帮助，如果需要，我可以澄清更多。

如何在Volt中执行jQuery toggleClass？

1 个答案: