marcador de posición de estilo diferente del valor con best_in_place

Question

Creo que me falta algo, ya que parece que no hay forma a través de CSS para diferenciar entre un valor best_in_place y el marcador de posición (data-nil = "ingrese su número"). Me gustaría diseñar el marcador de posición de forma diferente al valor real para que no parezca confuso.

He examinado los eventos y podría añadir una clase al elemento, sin embargo, cuando se muestran en la página la primera vez, no hay eventos disponibles para agregar esa clase. En este punto iteraría sobre cada $ ('best_in_place') y compararía el valor nulo con el html en el lapso, sin embargo, antes de hacerlo me pregunto si me he perdido algo.

¿Hay alguna manera de distinguir que un valor se ha establecido con best_in_place?

Si el código lo hace entender mejor: Esto funciona, simplemente agrega o elimina una clase a best_in_place, sin embargo, solo se establecerá cuando el usuario edite el campo, no en la carga de la página inicial.

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

Gracias por ese código. Resolví esto con

En mi example.js.erb

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

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

Y en 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

Una solución muy sencilla es incluir marcado en su valor :nil, así:

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

a continuación, puede tener una regla CSS como esto:

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

esto está funcionando para mí con df178520bf9ba405baee9528d5dbb630d6ff760c revisión de git: //github.com/bernat/best_in_place.git