風格佔位符不同於價值與best_in_place

Question

我想我錯過了一些東西，因爲似乎沒有辦法通過CSS區分best_in_place值和佔位符（data-nil =「輸入您的號碼」）。我只想以不同的方式設置佔位符，然後設置實際值，所以它看起來並不令人困惑。

我已經研究過這些事件，並且實際上可以向該元素添加一個類，但是當它們在第一次顯示在頁面上時，沒有可用於添加該類的事件。在這一點上，我將遍歷每個$（'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'); 
    } 
    }); 

Answer 1

感謝您的代碼。我

解決了這個在我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'); 
    } 
} 

Answer 2

一個非常簡單的解決方案是包括標記在:nil值，就像這樣：

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

然後你就可以有這樣的CSS規則：

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

這是從git的工作對我來說與修訂df178520bf9ba405baee9528d5dbb630d6ff760c：//github.com/bernat/best_in_place.git