Symbol zastępczy stylu różni się od wartości z best_in_place

Question

Wydaje mi się, że brakuje mi czegoś, ponieważ wydaje się, że nie ma sposobu, aby za pomocą CSS rozróżnić wartość best_in_place i symbol zastępczy (data-nil = "wprowadź swój numer"). Chciałbym, aby styl symbolizować inaczej niż rzeczywistą wartość, więc nie wydaje się mylące.

Przyjrzałem się zdarzeniom i mogłem dodać klasę do elementu, jednak gdy są wyświetlane na stronie po raz pierwszy, żadne zdarzenia nie są dostępne, aby dodać tę klasę. W tym momencie chciałbym iterować po każdym $ ("best_in_place") i porównywać wartość zerową do wartości html w zakresie, jednak zanim to zrobię, zastanawiam się, czy coś przeoczyłem.

Czy istnieje sposób na rozróżnienie, czy wartość została ustawiona za pomocą best_in_place?

Kod poprawia zrozumienie: działa, po prostu dodaje lub usuwa klasę do best_in_place, jednak zostanie ustawiony tylko wtedy, gdy użytkownik edytuje pole, a nie na głównym załadowaniu strony.

$('.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

Dzięki za ten kod. Postanowiłem to z

W moim example.js.erb

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

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

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

Answer 2

Jednym z bardzo prostym rozwiązaniem jest włączenie znaczników w swojej wartości :nil, jak poniżej:

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

Wtedy można mieć regułę CSS tak:

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

To działa dla mnie rewizyjnej df178520bf9ba405baee9528d5dbb630d6ff760c z git: //github.com/bernat/best_in_place.git