javascript - 如何使用 jsf 渲染器类中的字符串值初始化 JavaScript 变量

Question

我正在尝试加载一个包含基于我在上一页中选择的设备的信息的 d3 图表，即基于数据的动态加载。下面给出了我当前的配置，尽管它不起作用，因为一旦加载图形，它就会给我 d3.event as null exception。

我的 faces-config.xml 具有渲染套件:

  <render-kit>
            <renderer>
              <display-name>ABCTopologyView</display-name>
              <component-family>javax.faces.ABCTopologyView</component-family>
              <renderer-type>com.jsf.component.ABCView</renderer-type>
              <renderer-class>com.jsf.component.ABCViewRenderer</renderer-class>
            </renderer>
        </render-kit>

如何将 json 作为字符串从 ABCViewRenderer 类传递到 ABC.js 文件中的 View 页面，这是一个 d3 脚本:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui"
    xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
    xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:icecore="http://www.icefaces.org/icefaces/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ace="http://www.icefaces.org/icefaces/components">
    <icecore:config messagePersistence="false" />
    <aui:layout id="x">
        <aui:column id="y">
            <h:form id="z">
                <icecore:singleSubmit />
                <h:messages globalOnly="true" layout="table" />
                    <ice:panelGroup binding="#{myBean.view}"/>


                    <h:outputScript library="js" name="d3.min.js" type="text/javascript" target="head"/>
                    <h:outputScript library="js" name="ABC.js"  type="text/javascript" />
                </ice:panelGroup>
            </h:form>
        </aui:column>       
    </aui:layout>

</ui:composition>

ABC.js :

topology = {

        CreatePage: function(data) {

                    var svg = d3.select("#chart").append('svg');

                    svg.append("rect")
                            .attr("width", "100%")
                            .attr("height", "100%")
                            .attr("fill", "#F8F8F8");

                    // SVG Building
                    // Base D3 Properties
                    //

                    var margin = {top: -5, right: -5, bottom: -5, left: -5};
                    var width = 1300 - margin.left - margin.right;
                    var height = 500 - margin.top - margin.bottom;
                    var transform = d3.zoomIdentity;
                    var contextMenuOpenBool = false;
                    var edges;

                    // Setting Up data from Function call
                    // May need to be omitted/altered with actual code base
                    var formId = data.formId;
                    var nodes = data.nodes;
                    var links = data.edges;
})
                    };

ABCViewRenderer.java : encodeEnd 方法将数据从对象解析为 JSON 对象并调用 javascript 函数..

public void encodeEnd(FacesContext facesContext, UIComponent uiComponent)
            throws IOException {

        JsonElement dataElement = parseData(object);
        JsonObject options = dataElement.getAsJsonObject();

        JavascriptContext.addJavascriptCall(facesContext,
                String.format("topology.CreateHtml(%s);", options.toString()));
    }

Answer 1

您应该在 encodeEnd 方法中向响应编写器写入一个 JavaScript 元素:

ResponseWriter writer = context.getResponseWriter();
writer.startElement("script", this);
writer.writeText("alert('foo');", null);
writer.endElement("script");

只需将 alert('foo') 替换为您的 JavaScript 语句即可。