Question

通过资产管道让我的javascript工作，我错过了什么？

当我尝试使用jQuery链接来处理资产时，它无法正常工作，但是当我将javascript函数直接放入视图时，它可以很好地工作。

我已经安装了jquery-rails和coffee-rails宝石。我将jquery.chained.mini.js代码保存到vendor \ assets \ javascript \ jquery.chained.mini.js。

我更新了我的application.js以包含该插件。

我加入了

$("#series").chained "#mark"

脚本阻止到我的app \ assets \ javascript \ vehicle.js.coffee文件。

加载视图时，会在head -

下列出以下内容

<head>
        . Edited for brevity
        .
        .   
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
        <script src="/assets/equipment.js?body=1" type="text/javascript"></script>
        <script src="/assets/sessions.js?body=1" type="text/javascript"></script>
        <script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
        <script src="/assets/users.js?body=1" type="text/javascript"></script>
        <script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
        <script src="/assets/application.js?body=1" type="text/javascript"></script>  
        .
        .
        .
  </head>

jquery插件就在那里，veh.js页面也是如此。 vehicle.js的来源如下 -

(function() {
  $("#series").chained("#mark");
}).call(this);

这应该使编辑视图中的下拉列表相互依赖。但是，无论第二个下拉框中是什么，所有选项都可用。

如果我将脚本直接放入视图中，如下所示，它可以很好地工作。

edit.html.erb

<!DOCTYPE html>
<html>
<head>

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>  

<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div>
<select id="mark" class="span2">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

<script type="text/javascript" charset="utf-8">
  $(function(){$("#series").chained("#mark"); 
  });
</script>

</div>

</div>
</body>
</html>

有人可以解释为什么代码不能在assett管道上运行，但是当我直接将它放入视图中时？

Answer 1

尝试预编译资产：

bundle exec rake assets:precompile

http://guides.rubyonrails.org/asset_pipeline.html

然后重新启动Rails。

Javascript直接从视图中工作，但不包含在资产管道中

1 个答案: