使用Dojo 1.8函数对JSF ajax结果执行

我是Dojo新手(实际上所有前端编程都是新手，我已经用Java和c#在服务器端工作了多年)。我目前正在使用Java Server Faces (JSF) 2.1，并尝试将JSF和Dojo Grid (dgrid)与Dojo 1.8组合在一起进行一个简单的演示。我有一个来自dgrid站点的示例，展示了如何制作甘特图，但是这个示例没有展示如何从应用服务器提取JSON数据并将其提供给函数。问题是我的大脑很难理解ARM——我希望有一些经验可以帮助我减轻一些痛苦。下面是一些代码:

这是在我创建的html文件中，当加载时，它只创建gantt:

<script>
    require([ "gantt/GanttGrid", "gantt/data" ], function(GanttGrid, data){
        // Instantiate the GanttGrid using predefined test data
        new GanttGrid({
            store: data,
            query: {
                // Only tasks with no parent task should be displayed in the root of the chart
                parent: undefined
            }
        }, "gantt");
    });
</script>

"data"是从一个单独的js文件中提取的，只是JSON数据，它被吸进了DOJO的内存对象:

define(["dojo/store/Memory"],function(Memory){
return new Memory({data:[
        {name: "100", start: 1327900000000, end: 1328300000000, completed: 0.9, id: 1},
        {name: "101", start: 1328100000000, end: 1328400000000, completed: 0.9, id: 2},
        {name: "102", start: 1329100000000, end: 1329800000000, completed: 0.4, dependencies:[1], id: 3},
        {name: "103", start: 1328400000000, end: 1328900000000, completed: 0.4, dependencies:[1], id: 4},
        {name: "104", start: 1329000000000, end: 1329800000000, completed: 0.4, id: 5},
        {name: "105", start: 1329000000000, end: 1329400000000, completed: 0.4, id: 6},
        {name: "106", start: 1329400000000, end: 1329800000000, completed: 0.4, id: 7}
    ],
    getChildren: function(parent, options){
        return this.query({parent: parent.id}, options);
    },
    mayHaveChildren: function(parent){
        return parent.hasChildren;
    }
});});

现在，我想要的是能够调用JSF Managed Bean的方法，该方法将在后端执行一些逻辑，然后返回JSON数据，我可以添加到DOJO的内存存储并将其传递到GanttGrid，但是，我似乎无法弄清楚如何使用ajax请求来完成。

下面是我的XHTML文件中成功地从bean获取数据并将其显示在屏幕上的内容:

<fieldset>
    <h:form id="schedulerForm">
        <h:commandButton value="Execute Demo" id="executeDemo">
            <f:ajax event="click" listener="#{autoScheduler.executeDemo}" render="result"  />
        </h:commandButton>
        <p />
        <h:outputText id="result" value="#{autoScheduler.result}"  />
    </h:form>
</fieldset>

我想要的是捕获JSF bean上的executeDemo的结果，并将其传递给创建GanttGrid的函数。我已经尝试使用"on"功能在DOJO，但这只允许我捕捉按钮点击(从我可以告诉)…我无法知道执行何时完成，以便从bean获取数据并创建图表。最大的问题是我不知道如何用DOJO请求模块调用JSF bean。

我希望有人知道一个简单的方法来完成这个。提前感谢任何帮助!如果你需要更多的信息，请告诉我。我试图包含所有相关代码。

保罗

嗯，JSF不允许使用JavaScript调用任意Java代码。它只允许您触发调用bean方法的请求，如果JSF组件触发了bean方法(例如，单击了commandButton)，则使用jsf.ajax Javascript对象调用bean方法。点击这里查看API。

这个API与View代码非常紧密，它触发了一个请求，也更新了View的部分。

例如，这里是一个commandButton非常类似于你的，但使用香草JavaScript触发AJAX而不是f:ajax标签，并有一点额外的JS代码:

<h:commandButton value="Execute Demo" id="executeDemo"
  onclick="console.log('hey, I am an arbitrary JS code');
  jsf.ajax.request(this, event, {execute:'@this', render: 'result'});
  return false;" />

此外，虽然f:ajax允许您在请求完成时执行JavaScript代码，但此时您确实不能"调用java bean代码"来获取您想要的数据。但是您可以使用JSF Ajax将数据放入DOM，并在回调中从DOM获取数据。

下面是一个示例，它以JSON格式获取数据:

一个简单的Bean方法，返回带有JSON编码对象的字符串:

public String getMyData() {
    return "{"fruit": "banana"}";
}

视图代码:

<fieldset>
    <h:form id="schedulerForm">
        <h:commandButton value="Execute Demo" id="executeDemo">
            <f:ajax event="click" listener="#{autoScheduler.executeDemo}"
               render="result myHiddenData" onevent="parseData()" />
        </h:commandButton>
        <p />
        <h:outputText id="result" value="#{autoScheduler.result}"  />
        <h:panelGroup id="myHiddenData" style="display: none">#{autoScheduler.myData}</h:panelGroup>
    </h:form>
    <script>
        function parseData(data){
            if (data.status == "success") {
                var myRawData = document.getElementById("schedulerForm:myHiddenData").innerHTML;
                var myJsonData = JSON.parse(myRawData);
                alert(myJsonData.fruit);
            }
        }
    </script>
</fieldset>

参见以下相关问题:

使用JSF AJAX方法保持JavaScript模块作用域

相关内容

最新更新

热门标签：