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

我是Dojo的新手（事实上，所有的前端编程，我在Java和C#服务器端工作了多年）。我目前正在使用JavaServerFaces（JSF）2.1，并尝试将JSF和DojoGrid（dgrid）与Dojo1.8结合起来，制作一个简单的演示。我有一个来自dgrid站点的示例，展示了如何制作甘特图，但这个示例没有展示如何从应用程序服务器提取JSON数据并将其提供给函数。问题是，我很难将我的大脑包裹在手臂上——我希望一些经验能帮助我减轻一些痛苦。下面是一些代码：

这是在我创建的html文件中，加载时，它只创建甘特图：

<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>

现在，我想要的是能够调用JSF托管Bean的方法，该方法将在后端执行一些逻辑，然后返回JSON数据，我可以将这些数据添加到DOJO的内存存储中，并将其传递到GantGrid，但是，我似乎不知道如何通过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>

我想要的是捕获JSFbean上executeDemo的结果，以传递给创建GantGrid的函数。我曾尝试在DOJO中使用“on”功能，但这只允许我捕获按钮单击（据我所知）。。。我无法找到一种方法来知道执行何时完成，以便从bean中获取数据并创建图表。最大的问题是我不知道如何使用DOJO请求模块调用JSFbean

我希望有人知道一个简单的方法来实现这一点。提前感谢您的帮助！请让我知道如果你需要更多的信息。。。我试图包括所有相关的代码

---

-Paul

好吧，JSF不允许使用JavaScript调用任意Java代码。 它只允许您使用

JSF.ajax

Javascript对象触发调用bean方法的请求，如果JSF组件触发了bean方法（例如，单击了

commandButton

）。退房

这个API与视图代码的关系非常紧密，它会触发一个请求，并对视图的某些部分进行更新

例如，这里有一个与您的命令按钮非常相似的

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;" />

查看代码：

<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>

#{autoScheduler.myData}
函数解析数据（数据）{
如果（data.status==“成功”）{
var myRawData=document.getElementById（“schedulerForm:myHiddenData”）.innerHTML；
var myJsonData=JSON.parse（myRawData）；
警惕（myJsonData.fruit）；
}
}

另见这些相关问题：

---

谢谢Elias，这很有帮助，但不能解决我的问题（我认为）。我基本上有这个，我使用OneEvent触发JS函数，但我的问题是DOJO和ARM架构。它都是封装的，所以我不能只调用someDojoGridFunction（data）——它都在范围外的“require”块中运行。我能够通过设置这个调用窗口“全局”公开一些函数来破解一个解决方案；在“require”块中。然后我可以从vanilla JS访问GantGrid，但这不是他们想要的。我在努力忠于他们的拱门。@PaulP1975嗯。。。对不起，伙计，我想我不能帮你解决你问题中的Dojo部分，我从来没用过。也许你会更幸运地问一个专门的Dojo问题。我希望我至少能帮助澄清其中的JSF部分Elias，这绝对有助于我理解JS的本质，我感谢你花时间提供详细的答案。我能够通过全局公开我的函数来解决Dojo问题（我发现我可以将其编写为全局函数，但这是为了使用它们的解析函数）。我所做的并不是听起来像Dojo1.8，但现在已经足够了（它只是一个原型）。我会勾选你的答案，因为我不认为我会得到一个完整的答案！再次感谢您抽出时间@PaulP1975酷，不客气，祝你的项目好运！：）

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>