将变量从bean传递到primefaces页面[重复]答案

【问题标题】：Pass variable from bean to primefaces page [duplicate]将变量从bean传递到primefaces页面[重复]
【发布时间】：2015-05-15 19:28:32
【问题描述】：

这里是另一个 Primefaces 新手。

我想将数据从 bean 传递到 XHTML 页面以在 javascript 中使用。让我明确一点，primefaces XHTML 页面没有组件，所以像“#{bean.property}”这样的普通绑定不是我的要求。

有没有办法在页面加载时将 bean 变量传递给页面，然后将其用作 javascript 中的参数。

如您所见，我尝试使用 RequestContext 传递“selectedProject”，但无法使其工作。我的场景代码：

豆子：

@Named(value = "ganttBean")
@SessionScoped
public class GanttBean implements Serializable {

@EJB
ProjectService projectService;
private Long selectedProjectId;
private Project selectedProject = null;

public GanttBean() {
}

public void init(){

    //get the actual project by ID.
    this.selectedProject = projectService.findById(selectedProjectId);
    //package all the tasks of the selected project in a JSON object
    jasonifyProject(selectedProject);

    RequestContext.getCurrentInstance().addCallbackParam("selectedProject",      selectedProject);
   //RequestContext.getCurrentInstance().execute("ggg()");
}

JSF 页面：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../../WEB-INF/templates/master/default.xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:em="http://java.sun.com/jsf/composite/ezcomp" 
            xmlns="http://www.w3.org/1999/xhtml">
  <ui:define name="content">
    <f:metadata>
        <f:viewParam name="projectId" value="#    {ganttBean.selectedProjectId}"/>
        <f:event type="preRenderView" listener="#{ganttBean.init()}"/>
    </f:metadata>
    <h1 class="title ui-widget-header ui-corner-all">
        Project Gantt View
    </h1>
    <h:outputScript library="jsGantt" name="jquery.1.8.js"/>
    <h:outputScript library="jsGantt" name="jquery-ui.min.js"/>
    <h:outputStylesheet library="jsGantt" name="jsgantt.css"/>
    <h:outputScript library="jsGantt" name="jsgantt.js" target="head"/>


    <div style="position:relative" class="gantt" id="GanttChartDIV">
        The gantt chart container

    </div>

    <script type="text/javascript">
     var ggg = function(datafrombean){
         ....do something with datafrombean....
     };

        //ionstantiate a gantt chart.
        var g = new    JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');


        //add tasks.
        g.AddTaskItem(new JSGantt.TaskItem(3,   'Define Chart API',       '2/10/2008','25/10/2008','000ff2', 'http://help.com', 0, 'Brian',     0, 1, 0,   1));
        g.AddTaskItem(new JSGantt.TaskItem(12,  'Chart Object',         '2/10/2008', '25/10/2008', 'ff00ff', 'http://www.yahoo.com', 0, 'Shlomy',  100, 0,3, 1));

        //draw the chart
        g.Draw();       
        g.DrawDependencies();

    </script>

    <h:form id="test">
        <h:inputHidden id="hiddenInput"  
                       value="hidden"/>

        <p:dialog id="editTaskDialog" widgetVar="editTaskDialog"   header="Edit Task">

    </p:dialog>
    </h:form>
</ui:define>
</ui:composition>

【问题讨论】：

ajax 请求呢？？ api.prototypejs.org/ajax/Ajax/Request
HI Jordi，您能更清楚地说明您的意思吗？如何在页面加载时发送 ajax 请求而不实际按下按钮或操作某些输入组件。
如果您想在页面加载时执行此操作，请将其添加到window.onload = function ()，如果您想在单击按钮时执行此操作，只需将其添加到函数并在按下按钮时调用它。 . ajax 调用的要点是您可以向服务器发出请求，而无需重新加载视图以更新某些部分或在操作完成时获取结果，
谢谢乔迪。这在纯 JavaScript 情况下可以很好地工作。但我一直在寻找特定于 primefaces/Ajax 上下文的东西。
您对请求上下文的“试用”不起作用，因为 f:event 中的侦听器不是 ajax 调用，因此在请求上下文中设置回调参数不能用于 oncomplete 事件或其他。使用下面的答案或尝试使用<p:remoteCommand listener="#{bean.retrieveDate}" oncomplete="handleXHR(.....)" autorun="true"。但是，如果页面的数据是“静态的”（假设因为它处于 preRender 阶段），您是否尝试过在 javascript 中使用 EL：stackoverflow.com/questions/11335071/…

标签： javascript jsf primefaces requestcontext

【解决方案1】：

嗯....让我们想想它是如何工作的。

Javascript 在客户端运行，纯粹是前端。 JSF 在服务器端运行并将其组件呈现为 HTML，因此它具有读取服务器端属性、您的 bean，然后在客户端呈现属性的优势。

因此，需要在服务器端和前端之间架起一座桥梁，而 JSF 已经做到了。

您声称您的页面没有组件，因此普通绑定无法满足您的要求，但是……不可见的组件呢？

JSF：

<h:form id="formTest">
     <h:inputText style="display:none" id="idComp1" value="#{ganttBean.property}"></h:inputText>
</h:form>

JS：

<script type="text/javascript">
 function(){
     var datafrombean = document.getElementById('formTest:idComp1').value 
 };
</script>

我不知道你想调用那个函数多少次和什么时候，但是你可能不得不使用ajax再次渲染不可见的组件，然后再次调用JS函数。

另外，我确信还有其他简单的选择，这只是一种方法

【讨论】：

啊！这是一个很好的答案。我试过了，它似乎工作。谢谢你。现在我只需要找出一种方法来解析我发送的对象。但这是另一个讨论。
如果您仍然需要解析对象（它是一个字符串吗？），请使用我在 cmets 中的两个建议之一。两者都会自动生成对象
不，它不是字符串。这是一个对象，是的，您的示例会产生一个对象。现在的问题是我的 javascript 方法不知道这个对象，我必须找到一种方法来解压它。也许是 JSON 的东西。我想它还需要重新审视我传递给 javascript 方法的内容。
我添加了另一个答案。事实上，我什至认为您的问题与我回答中的链接重复。

【解决方案2】：

你可以简单地使用EL in javascript：

<script type="text/javascript">
    function(){
        var datafrombean = #{bean.data};
    };
</script>

创建页面时会调用 bean 上的 getData()。

【讨论】：

嗨 Kukeltje，在 javascript 中使用 EL 不适合我；我刚刚试过你上面的例子。我会检查链接，看看是否有什么导致它不起作用。谢谢！