所有这些JavaScript到底都去哪儿了

Where does all of this javascript go anyway?

本文关键字：JavaScript 所有这些      更新时间：2024-05-14
<div id="title">
  <h1>Explore Your Lending Options</h1>
  <div class="row">
    <button class="btn btn-primary" id="filter_projects">Filter Projects</button> </br>
    <%= render partial: "shared/project_filters" %>
    <div id="projects"></div>
  </div>
</div>
<script charset="utf-8">
  $("#filter_projects").on("click", function() {
        $("#filters").animate({width: "toggle"}, 1000);
      });
</script>
<script charset="utf-8">
  $(document).ready(function() {
    var auth_token = " <%= form_authenticity_token %>"
    var cleanFilters = function(filters) {
      var cleanedFilters = [];
      filters.forEach(function(element) {
        cleanedFilters.push(element.match(/'[(.*?)']/)[1]);
      });
      return cleanedFilters;
    }
    var appendProject = function(project) {
      $("#projects").append(
        "<div><a href='/" + project.organization + "/projects/" + project.id + "'>" + project.title + "</a></div>" +
        "<a href='/" + project.organization + "/projects/" + project.id + "'><img src='" + project.image_url +
        "' width='250px' height='auto'></a>" + "<div class='project-desc'>" + project.description + "</div>" +
        '<form action="/pending_loan" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden"' +
        'value="&#x2713;" /><input type="hidden" name="authenticity_token" value="' + auth_token + '" />' +
        '<input value="1" type="hidden" name="pending_loan[project_id]" id="pending_loan_' + project.id + '" />' +
        '<input value="2500" type="hidden" name="pending_loan[loan_amount]" id="pending_loan_loan_amount" />' +
        '<input type="submit" name="commit" value="Lend $25" class="btn btn-default" /></form>'
      )
    }
    var appendProjects = function(projects) {
      projects.forEach(function(project) {
        appendProject(project);
      });
    };
    var renderProjects = function(filteredProjects) {
      $("#projects").empty();
      console.log(filteredProjects);
      appendProjects(filteredProjects);
    };
    var filterProjectsByCategory = function(projects, checkedFilters) {
      return projects.filter(function(project) {
        return project.categories.some(function(category) {
          return checkedFilters.indexOf(category) > -1;
        });
      });
    };
    var filterProjects = function(projects, checkedFilters) {
      projectsFilteredByCategory = filterProjectsByCategory(projects, checkedFilters);
      //return filterProjectsByPrice(projectsFilteredByCategory, checkedFilters);
      return projectsFilteredByCategory;
    };
    var all_projects;
    $.getJSON("/projects.json", function(data) {
      all_projects= data;
      console.log(all_projects);
      var initial_category_selected = window.location.href.slice(window.location.href.indexOf('=') + 1);
      //window.location.search gives us query parameters. so that's sick
      var initial_categories = [];
      initial_categories.push(initial_category_selected);
      var filteredProjects = filterProjects(all_projects, initial_categories);
      renderProjects(filteredProjects);
    });
    $(":checkbox").on("click", function() {
      var filters = [];
      $("input:checked").each(function(index) {
        filters.push(this.name);
      });
      var cleanedFilters = cleanFilters(filters);
      var filteredProjects = filterProjects(all_projects, cleanedFilters)
      renderProjects(filteredProjects);
    });
  });
</script>

以上是我的index.html.erb文件，其中包含一堆erb，html和javascript函数。我应该把所有的javascript函数放在哪里？他们都去哪儿了？我所有的jquery都去哪儿了？有没有一种方法可以不用所有标签？

首先，您需要将javascript文件放入app/assets/javascript文件夹。

您可以根据需要选择一种方法。有两种方法可以包含 javascript 文件：

1(如果您希望该JavaScript文件仅包含在一个页面中，则可以在视图中编写以下代码： 

= javascript_include_tag 'file.js'

并将以下行添加到 config/environment/production.rb 中(在生产模式下制作 Rails 预编译文件需要它(：

config.assets.precompile += %w(file.js)

之后，您只能在连接它的页面中使用此文件。

2(您可以将此行添加到app/assets/javascripts/application.js

//= require file

之后，您可以在所有页面中使用JavaScript代码。

是的，你可以把所有的jquery，javascript函数都保留在

  app/assets/javascripts folder

应用程序.js将自动调用所有所需的JavaScript。

rails 中理想的方法是将 javascript 放在与控制器名称对应的文件夹中app/assets/javascripts，

例如，如果你有一个projects_controller那么你可以将相应的javascript代码放在app/assets/javascripts/projects.js

这将自动加载到您的index页面上，因为您的app/assets/javascripts/application.js文件中
的这一行
//= require .这将加载该文件夹中所有可用的 js 文件。

但是这种方法不必要地加载了该视图可能不需要的其他 js 文件，以摆脱它从应用程序中删除//= require ..js并将javascript_include_tag 'projects.js'添加到您的索引.html.erb 文件中，例如 

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "projects.js" %>
<% end %>

这样，这个 JavaScript 只加载到你使用它的视图上。

对于 jquery，我假设您已经在使用 gem(因为您没有通过 index.html.erb 上的任何脚本标签加载它(，您只需要在应用程序.js文件中要求它，如下所示：
//= require jquery

要进行更多挖掘，您可以尝试在 Rails 中进行布局和渲染

相关文章：