13

这个练习有点棘手。想我会发布我的解决方案，看看是否有人做得不同，或者是否有人知道更好的方法。

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

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

（具有挑战性）将 JavaScript 显示添加到主页以从 140 个字符开始倒计时。

首先，我阅读了这篇关于 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/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

应用程序/资产/样式表/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 .

例如，这可行，但我不确定与在 tree 上方添加行有什么区别。

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

7 回答 7

2

我认为我在 SO 中发布的解决方案与您的解决方案有很大不同，现在我可以谦虚地发布它作为答案。

于 2012-08-06T21:50:16.347 回答
1

你可以使用 CoffeeScript 来简化它：

/app/assets/javascripts/microposts.js.coffee

更新倒计时 = ->
  剩余 = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").剩余文本 + "剩余字符"

jQuery->
  更新倒计时（）
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown

正如 jonyamo 所提到的，您不需要触摸application.js，因为它//= require_tree .已经做到了。

于 2013-02-04T01:49:36.817 回答
1

我不知道为什么，但该解决方案只对我使用咖啡脚本有效。我尝试用 javascript 实现它，但不知何故没有显示任何东西：也没有倒计时，也没有文本“剩余字符”的固定部分。

所以这里是我所做的回顾。

第 1 步：创建 app/javascripts/microposts.js.coffee 文件

updateCountdown = ->
  remaining = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").text remaining + " characters remaining"

jQuery ->
  updateCountdown()
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown

注意：因为它位于 app/javascripts 文件夹中，所以我不需要更新 application.js 文件。

第 2 步：更新 _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 %>

第 3 步：在 custom_css.css.scss 文件中实现一点 css

/* micropost jQuery countdown */

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

第 4 步：享受结果并为一切顺利而感到高兴 :)

于 2013-03-29T20:27:12.607 回答
1

Mymicroposts.js.coffee使用 jQuery .css 方法根据变量的值更改剩余字符的颜色，remaining以更接近地反映twitter的行为

updateCountdown = -> 
  remaining = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").text remaining + " characters remaining"
  jQuery(".countdown").css "color", (if (140 >= remaining >= 21) then "gray")
  jQuery(".countdown").css "color", (if (21 > remaining >= 11) then "black")
  jQuery(".countdown").css "color", (if (11 > remaining)  then "red")

jQuery ->
  updateCountdown()
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown

感谢所有之前回答的人。

于 2013-06-04T14:01:07.927 回答
1

我使用 Brett 的代码帮助我完成 Rails 教程中的这个练习，尽管我有一个小的改动。当我导航到另一个页面然后返回主页时，我遇到了文本从 .countdown 元素中消失的问题。通过一些小的研究和另一个答案的帮助，我意识到原因是 Turbolinks。我对 Brett 代码的更改，绑定到page:changeevent 而不是 to ready，如下所示。我希望这对其他人有所帮助。

function updateCountdown() {
  // 140 is the max message length
  var remaining = 140 - jQuery('#micropost_content').val().length;
  jQuery('.countdown').text(remaining + ' characters remaining');
}

function micropostChange() {
  $('#micropost_content').change(updateCountdown);
}

function micropostKeyup() {
  $('#micropost_content').keyup(updateCountdown);
}

jQuery(document).ready(function($) {
  updateCountdown();
  micropostChange();
  micropostKeyup();
  jQuery(document).on('page:change', function($) {
    updateCountdown();
    micropostChange();
    micropostKeyup();
  });
});
于 2014-06-17T22:50:36.387 回答
0

这是我基于 Adriano 解决方案的咖啡脚本版本。这会忽略空格，不涉及将空 div 添加到视图中，并且一旦您获得负数，还会添加一个错误类。

updateCountdown = ->
  text =  jQuery('#micropost_content').val()
  text = text.replace(/\s/g, '');   
  remaining = 140 - text.length
  jQuery('.countdown').text remaining + ' characters remaining'
  jQuery('.countdown').addClass 'alert alert-error' if remaining < 0
  jQuery('.countdown').removeClass 'alert alert-error' if remaining > 0

jQuery(document).ready ->
  jQuery('#new_micropost').append '<span class="countdown">140 characters remaining</span>'
  jQuery('#micropost_content').change updateCountdown
  jQuery('#micropost_content').keyup updateCountdown
  return
于 2013-04-07T13:10:57.610 回答
0

为了避免字符数减少，我将此限制添加到 _micropost_form.html.erb 部分，所以它会阻止你在 140 个字符：

<%= f.text_area :content, maxlength:140, placeholder: "Compose new micropost..." %>
于 2014-06-20T20:03:13.030 回答