13

この演習は少しトリッキーでした。解決策を投稿して、誰かが別の方法で行ったかどうか、またはより良い方法を知っている人がいるかどうかを確認したいと考えました。

Asset Pipline を使用するためのベスト プラクティスについてはよくわかりません。たとえば、application.js マニフェスト ファイルに配置する正しい順序や、lib と app に配置するタイミングなどです。libに次を入れて、動作させてみました。

Michael Hartl の Rails Tutorial 2nd ed Chapter 10、Exercise 7 から:

(難しい) JavaScript 表示をホームページに追加して、140 文字からカウントダウンします。

最初に、jQuery の Twitter のようなカウントダウンに関するこの記事を読みました。

次に、 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

理由はわかりませんが、その解決策はコーヒースクリプトを使用した場合にのみ機能しました。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

私は Brett のコードを使用して、Rails チュートリアルのこの演習を進めましたが、若干の変更があります。別のページに移動してからホームに戻ると、.countdown 要素からテキストが消えるという問題がありました。SOに関するいくつかのマイナーな調査と別の回答の助けを借りて、原因がTurbolinksであることに気付きました。page:changeの代わりにイベントにバインドするブレットのコードへの私の変更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 に答える
1

CoffeeScript を使用して簡略化できます。

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

updateCountdown = ->
  残り = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").text 残り + " 残り文字"

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

そして jonyamo が述べたように、すでにトリックを行っているので、 application.jsに触れる必要はありません。//= require_tree .

于 2013-02-04T01:49:36.817 に答える
1

Mymicroposts.js.coffeeは jQuery .css メソッドを使用して、変数の値に基づいて残りの文字の色を変更し、twitterremainingの動作をより厳密に反映します。

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 に答える
0

Adriano のソリューションに基づく私の coffeescript バージョンは次のとおりです。これは空白を無視し、ビューに空の 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 に答える