这个练习有点棘手.想到我会发布我的解决方案,看看是否有人做了不同的,或者有谁知道一个更好的方法.
我不确定使用Asset Pipline的最佳做法..例如,正确的顺序将事情放在application.js清单文件中,或何时将内容放在lib与应用程序中.我只是在lib中放入以下内容来尝试让它工作.
从Michael Hartl’s Rails Tutorial 2nd ed
第10章练习7:
(具有挑战性)将JavaScript显示添加到主页以从140个字符倒数.
首先,我读了这个post about jQuery Twitter-like countdowns,它提供了代码来做到这一点.
接下来,我更新了app / views / shared / _micropost_form.html.erb,看起来像这样:
<%= form_for(@micropost) do |f| %> <%= render 'shared/error_messages',object: f.object %> <div class="field"> <%= f.text_area :content,placeholder: "Compose new micropost..." %> </div> <%= f.submit "Post",class: "btn btn-large btn-primary" %> <span class="countdown"></span> <% end %>
然后,我在lib中创建了一个javascripts目录并添加了文件
LIB /资产/ JavaScript的/ microposts.js
function updateCountdown() { // 140 is the max message length var remaining = 140 - jQuery('#micropost_content').val().length; jQuery('.countdown').text(remaining + ' characters remaining'); } jQuery(document).ready(function($) { updateCountdown(); $('#micropost_content').change(updateCountdown); $('#micropost_content').keyup(updateCountdown); });
最后,我添加了一点点CSS
应用程序/资产/样式表/ custom.css.scss
/* micropost jQuery countdown */ .countdown { display: inline; padding-left: 30px; color: $grayLight; }
最后,添加指令到app / assets / javascripts / application.js
//= require jquery //= require jquery_ujs //= require bootstrap //= require microposts //= require_tree .
最终结果看起来像这样
http://grab.by/dbC6
题:
将清单行放在// = require_tree之后是错误的.
例如,这是有用的,但我不知道有什么区别,而不是添加树上面的行.
//= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . //= require microposts
解决方法
我认为
my solution posted here in SO与你的不同,现在我可以谦虚地把它当作答案.