Trình giữ chỗ kiểu cách khác với giá trị với best_in_place

Question

Tôi nghĩ rằng tôi thiếu một thứ gì đó vì dường như không có cách nào thông qua CSS để phân biệt giữa giá trị best_in_place và trình giữ chỗ (data-nil = "nhập số của bạn"). Tôi chỉ muốn tạo kiểu cho trình giữ chỗ khác với giá trị thực tế để nó không có vẻ khó hiểu.

Tôi đã xem xét các sự kiện và thực sự có thể thêm lớp vào phần tử, tuy nhiên khi chúng được hiển thị trên trang lần đầu tiên, không có sự kiện nào để thêm lớp đó. Tại thời điểm này tôi sẽ lặp qua mỗi $ ('best_in_place') và so sánh giá trị nil với html trong span, tuy nhiên trước khi tôi làm điều này tôi chỉ tự hỏi nếu tôi bỏ lỡ một cái gì đó.

Vậy có cách nào để phân biệt rằng giá trị đã được đặt bằng best_in_place không?

Nếu mã giúp bạn hiểu rõ hơn: Công cụ này hoạt động, chỉ cần thêm hoặc xóa lớp vào best_in_place, tuy nhiên nó sẽ chỉ được đặt khi người dùng chỉnh sửa trường, chứ không phải khi tải trang nội bộ.

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

Cảm ơn mã đó. Tôi giải quyết này với

Trong example.js.erb tôi

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

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

Và trong 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

Một giải pháp rất đơn giản là bao gồm đánh dấu giá trị :nil của bạn, như thế này:

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

Sau đó, bạn có thể có quy tắc CSS như sau:

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

này đang làm việc cho tôi với phiên bản df178520bf9ba405baee9528d5dbb630d6ff760c từ git: //github.com/bernat/best_in_place.git