Làm cách nào để chuyển các thuộc tính bean được quản lý JSF sang một hàm JavaScript?

Question

Tôi muốn biết cách tôi có thể chuyển các thuộc tính bean được quản lý JSF sang một hàm JavaScript.

Something như thế này:

<script> 
    function actualizaMenu(key){ 
    #{linkedMenu.setKey(key)} 
    } 
</script> 

<ul> 
    <ui:repeat value="#{moduleList.modulos}" var="entity"> 
    <li> 
     <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a> 
    </li> 
    </ui:repeat> 
</ul> 

Answer 1

này là không chính xác "đi qua" của các biến JSF. Đây chỉ là việc in các biến JSF như thể chúng là các biến/giá trị JavaScript. Bạn biết đấy, JSF và JS không chạy đồng bộ. JSF chạy trong máy chủ web và tạo mã HTML/CSS/JS mà lần lượt chạy trong trình duyệt web khi đã đến đó.

Sự cố cụ thể của bạn có nhiều khả năng gây ra bởi vì bạn đã viết mã JSF theo cách mà nó tạo cú pháp JS không hợp lệ. Một cách dễ dàng để xác minh đó là bằng cách chỉ kiểm tra đầu ra HTML do JSF tạo ra mà bạn có thể tìm thấy bằng rightclick, Xem nguồn trong trình duyệt và bằng cách kiểm tra xem bạn có thấy bất kỳ báo cáo lỗi cú pháp nào trong bảng điều khiển JS trong trình duyệt không bạn có thể tìm thấy bằng cách nhấn F12 trong Chrome/IE9 +/Firefox23 +.

Hãy tưởng tượng rằng #{entity.key} đây

<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a> 

in một chuỗi biến Java như "foo", sau đó mã HTML được tạo ra sẽ trông như thế

<a onclick="actualizaMenu(foo)">some name</a> 

Nhưng hey, nhìn, đại diện cho một hoạt Javascript biến tên foo, không phải là giá trị chuỗi JS! Vì vậy, nếu bạn thực sự muốn cuối cùng kết thúc như

<a onclick="actualizaMenu('foo')">some name</a> 

thì bạn nên hướng dẫn JSF để tạo ra chính xác HTML:

<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a> 

Cảnh giác với những ký tự đặc biệt trong biến JSF mặc dù. Bạn có thể sử dụng OmniFaces of:escapeJS() function cho điều đó.

---

Không liên quan cho vấn đề cụ thể, việc thực hiện cụ thể của actualizaMenu() làm cho không có ý nghĩa. Dường như bạn đang cố thiết lập thuộc tính bean. Bạn không nên sử dụng JS cho điều đó, thay vào đó, thay vào đó, hãy thay thế <h:commandLink>.

<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" /> 

Làm tổ nếu cần thiết <f:ajax> để làm cho nó không đồng bộ.

Answer 2

tôi sẽ khuyên bạn sử dụng ràng buộc với jQuery sự kiện và các thuộc tính dữ liệu trên các yếu tố để có được kết quả tương tự (giả sử bạn sử dụng jQuery):

<script> 
    function actualizaMenu(key){ 
    /* Logic here ... */ 
    } 

    $(document).ready(function(){ 
    $('.menuItem').click(function(){ 
     var key = $(this).data('key'); 
     actualizaMenu(key); 
    ); 
    }); 
</script> 

...

<ul> 
    <ui:repeat value="#{moduleList.modulos}" var="entity"> 
    <li> 
     <a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a> 
    </li> 
    </ui:repeat> 
</ul> 

Và, như chỉ ra ở nơi khác, trừ khi #{linkedMenu.setKey(key)} thực sự trả về một đoạn javascript (mà đường nối không chắc chắn và có thể sẽ thực sự xấu ngay cả khi nó đã làm), bạn cần phải sửa chữa các chức năng là tốt.

Answer 3

Tôi biết câu hỏi này là cũ, nhưng đối với những người vẫn đang tìm kiếm có một thay thế.

Nếu bạn đang sử dụng các nguyên tố chỉ cần dùng thử. Request Context