best_in_place의 값과 다른 스타일의 자리 표시 자

Question

CSS를 통해 best_in_place 값과 자리 표시 자 (data-nil = "사용자 번호 입력")를 구별 할 방법이없는 것 같아서 뭔가 놓친 것 같습니다. 난 단지 혼란스러워 보이지 않도록 실제 값과 다르게 스타일을 지정하고 싶습니다.

이벤트를 살펴본 결과 실제로 클래스에 요소를 추가 할 수 있지만 페이지에 처음 표시 될 때 해당 클래스를 추가 할 수있는 이벤트가 없습니다. 이 시점에서 나는 각 $ ('best_in_place')를 반복하고 스팬의 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'); 
    } 
    }); 

Answer 1

고맙습니다. 나는

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

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

그리고

$(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'); 
    } 
} 

Answer 2

한 매우 간단한 해결책은 다음과 같이 당신의 :nil 값에 마크 업을 포함하는 것입니다 example.js 내 example.js.erb에서

이것을 해결 :

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

그럼 당신은이 같은 CSS 규칙을 가질 수 있습니다

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

이 는 자식에서 개정 df178520bf9ba405baee9528d5dbb630d6ff760c과 나를 위해 노력하고 있습니다 :