jquery – 将JavaScript显示添加到主页以从140个字符倒数. (Rails教程,第2版,第10章,练习7)

这个练习有点棘手.想到我会发布我的解决方案,看看是否有人做了不同的,或者有谁知道一个更好的方法.

我不确定使用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与你的不同,现在我可以谦虚地把它当作答案.