7

CSS を介して best_in_place 値とプレースホルダー (data-nil="enter your number") を区別する方法がないように見えるため、何かが足りないと思います。紛らわしくないように、プレースホルダーのスタイルを実際の値とは異なるスタイルにしたいだけです。

イベントを調べたところ、実際に要素にクラスを追加できましたが、最初にページに表示されたときに、そのクラスを追加するためのイベントがありません。この時点で、各 $('best_in_place') を繰り返し処理し、nil 値をスパン内の html の値と比較しますが、これを行う前に、何かを見逃していないかどうか疑問に思っています。

では、best_in_place で値が設定されていることを区別する方法はありますか?

コードで理解が深まる場合: これは機能し、クラスを best_in_place に追加または削除するだけですが、ユーザーがフィールドを編集したときにのみ設定され、最初のページの読み込みでは設定されません。

$('.best_in_place').bind('best_in_place:update', function(evt){
    if($(this).data('nil') == $(this).html()){
      $(this).removeClass('has_value');
    }else{
      $(this).addClass('has_value');
    }
  });
4

2 に答える 2

6

そのコードをありがとう。私はこれを解決しました

私のexample.js.erbでは

$('.top-column .best_in_place').each(function() {
  var element = $(this);

  if(element.data('nil') != element.text()) {
    updateBestInPlace($(this));
  }
});

そしてexample.jsで

$(document).ready(function(){
  $('.top-column .best_in_place').live("ajax:success", function(){
  updateBestInPlace($(this));
  });
});

function updateBestInPlace(element){
  if(element.data('nil') == element.html() || element.html() == ""){
  element.removeClass('has_value');
  }else{
   element.addClass('has_value');
  }
 }
于 2012-08-09T19:39:33.687 に答える
5

非常に簡単な解決策の 1 つは、次:nilのように値にマークアップを含めることです。

= best_in_place @user, :email, nil: '<span class="none-yet">None yet!</span>'

次に、次のような CSS ルールを作成できます。

.none-yet {
  font-style: italic;
}

これは、git://github.com/bernat/best_in_place.git のリビジョン df178520bf9ba405baee9528d5dbb630d6ff760c で機能しています。

于 2014-01-24T05:02:00.233 に答える