Question

实际上，我想在我的rails应用程序中执行javascript代码。

我在“app / assets / javascripts”中创建了新文件custom.js.

custom.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require nicetitle
//= require custom

我还补充说，// =在application.js文件中要求自定义，但代码在最开始时仍然没有隐藏。

的application.js

<a href="#" class="toggle-formed" style="float: right;" >Search</a>

                <div id="sample" class="<%= @xvaziris_data.present? ? 'hidden' : '' %>">

                    <%= form_tag xvaziris_path, method: 'get', class: "form-group", role: "search" do %>
                    <p>
                        <center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", class: "form-control-search" %>
                            <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center>
                        </p>
                        <% end %><br>

                        <% if @xvaziris.empty? %>

                        <center><p><em>No results found for.</em></p></center>              

                        <% end %>

                    </div>

index.html.erb

.hidden {
  display: none;
}

general.scss

$(document).on('page:change', function () {
        $("div#sample").hide();

    //    | === HERE
    $("a.toggle-formed").click(function(event) {
        event.preventDefault();
        $("div#sample").fadeToggle();
    });
});

上面的custom.js代码，当我放在javascript脚本标签下的index.html.erb时，它可以正常工作。但是我不想在每个其他控制器/索引中重复自己，因为轨道遵循DRY原则，即不要重复自己。

search.js

Bindings bindings = new SimpleBindings();
bindings.put...
scriptEngine.setBindings(bindings, ScriptContext.ENGINE_SCOPE);
Bindings bindings1 = new SimpleBindings();
bindings1.put...
scriptEngine.setBindings(bindings1, ScriptContext.GLOBAL_SCOPE);

欢迎任何建议。

提前谢谢。

Answer 1

而不是将文件中的div隐藏起来。您可以将display: none;与css一起使用。然后，当您的文档加载fadeToggle()时，它仍可以使用它。

您还应该考虑使用

$(document).on('page:change', function () {

因为涡轮连接。有时会出现turbolink会在不加载页面的情况下更改页面并且准备好的文档无法调用的情况。

Answer 2

向@Joe's answer添加更多内容：

因此，当您需要实施搜索时，您可以这样做：

在类编写中在CSS中添加一个类hidden：

.hidden {
  display: none;
}

因此，当页面加载时检查搜索数据是否存在，则不要添加类hidden或者添加它。示例：

<div id="test" class="<%= search_data.present? ? 'hidden' : '' %>">

因此，当搜索数据存在时，它将显示它。

希望这有帮助。

在rails应用程序中使用javascript实现显示/隐藏功能

2 个答案: