将JavaScript显示添加到首页以从140个字符开始倒数. (《 Rails教程》，第二版，第10章，练习7) [英] Add a JavaScript display to the Home page to count down from 140 characters. (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)

问题描述

此练习有些棘手.想通了我会发布我的解决方案，看看是否有人做的不同，或者是否有人知道更好的方法.

This exercise was a bit tricky. Figured I'd post my solution to see if anyone did it differently or if there's anyone who knows a better way.

我不确定使用Asset Pipline ..的最佳做法，例如，将内容放入application.js清单文件的正确顺序，或何时将内容放入lib与app的顺序.我只是将以下内容放到lib中以尝试使其正常工作.

I'm not sure on best practices for using the Asset Pipline .. for example, the correct order to put things in the application.js manifest file, or when to put things in lib versus app. I just put the following in lib to try getting it to work.

来自 Michael Hartl的Rails教程第二版 第10章，练习7:

From Michael Hartl's Rails Tutorial 2nd ed Chapter 10, Exercise 7:

(具有挑战性)将JavaScript显示添加到首页，以从140个字符开始递减计数.

首先，我阅读了这篇有关jQuery Twitter倒计时的帖子，该帖子提供了做到这一点的代码.

First, I read this post about jQuery Twitter-like countdowns, which provided the code to do it.

接下来，我更新了app/views/shared/_micropost_form.html.erb，使其看起来像这样:

Next, I updated app/views/shared/_micropost_form.html.erb to look like this:

<%= 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目录并添加了文件

Then, I created a javascripts directory in lib and added file

lib/assets/javascripts/microposts.js

lib/assets/javascripts/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

Finally, I added a tiny bit of CSS

app/assets/stylesheets/custom.css.scss

app/assets/stylesheets/custom.css.scss

/* micropost jQuery countdown */

.countdown {
  display: inline;
  padding-left: 30px;
  color: $grayLight;
}

最后，将指令添加到app/assets/javascripts/application.js

Finally, add directive to the app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require microposts
//= require_tree .

最终结果看起来像这样 http://grab.by/dbC6

The FINAL RESULT looks like this http://grab.by/dbC6

问题: 将清单行放在//= require_tree .

例如，这可行，但是与在树上方添加行相比，我不确定会有什么不同.

For example, this works but I'm not sure what the difference would be, versus adding the line above tree .

 //= require jquery
 //= require jquery_ujs
 //= require bootstrap
 //= require_tree .
 //= require microposts

推荐答案

我认为我在此处发布的解决方案是与您现在的情况有很大不同，我可以谦虚地将其发布为答案.

I think my solution posted here in SO is different enough from yours now that I can humbly post it as an answer.

这篇关于将JavaScript显示添加到首页以从140个字符开始倒数. (《 Rails教程》，第二版，第10章，练习7)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！