加载JSON的YUI3数据表仅显示无结果（Scala / Play 2.1）

Question

我是YUI的新手，但我是JQuery UI的老手。所以这个让我难过。我无法使用Rest服务渲染我的Datatable。我有两个版本的代码。我将服务中捕获的JSON对象用作数据对象和本地数据源。那个工作正常。当我尝试切换到GET插件并从服务中获取它时。它永远不会呈现。

我当地的例子：

@main("Play 2.1") {

<script type="text/javascript">

    YUI().use("datatable", "datasource-local", "datasource-jsonschema", "datatable-datasource", function (Y) {

        var data = [
            {"script":{"id":34534,
                "scriptText":"234523452345234",
                "modifiedDate":1367525647000,
                "status":"Reviewed",
                "qcDate":1367526006000,
                "location":{"id":1},
                "orderInfo":{"id":1,
                    "orderName":"Order Name",
                    "dealerName":"Dealer Name"}
            }},
            {"script":{"id":656435,
                "scriptText":"36536543636365",
                "modifiedDate":1367525646000,
                "status":"Reviewed",
                "qcDate":1367526017000,
                "location":{"id":1},
                "orderInfo":{"id":43534534,
                    "orderName":"Order Name",
                    "dealerName":"Dealer Name"}
            }}
        ];

        var localDataSource = new Y.DataSource.Local({source:data});

        localDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema:{
                resultListLocator:"",
                resultFields:[
                    {
                        key:"id",
                        locator:"script.id"
                    },
                    {
                        key:"scriptText",
                        locator:"script.scriptText"
                    },
                    {
                        key:"modifiedDate",
                        locator:"script.modifiedDate"
                    }

                ]
            }
        });


        var simple = new Y.DataTable({
            columns:["id", "scriptText", "modifiedDate"],
            summary:"Example Summary",
            caption:"Example Caption"
        });

        simple.plug(Y.Plugin.DataTableDataSource, {
            datasource:localDataSource
        });

        simple.render("#dataGrid");
        simple.datasource.load();

    });

</script>

<span id="listView">
            <div id="dataGrid" style="height: 95%;width: 100%;"></div>
        </span>


<div id="dataCheckArea">
    <h3>RAW DATA AREA</h3>
    <ul>
        @records.map {record =>
        <li>@record.toString</li>
        }
    </ul>

</div>

}

我的REST服务示例：

@main("Welcome to Play 2.1") {

<script type="text/javascript">

    YUI().use("datatable", "datasource-get", "datasource-jsonschema", "datatable-datasource", function (Y) {

        var dataSource = new Y.DataSource.Get({
            source:"http://localhost:9000/reviewRecords?q=query"
        });

        dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema:{
                resultListLocator:"",
                resultFields:[
                    {
                        key:"id",
                        locator:"script.id"
                    },
                    {
                        key:"scriptText",
                        locator:"script.scriptText"
                    },
                    {
                        key:"modifiedDate",
                        locator:"script.modifiedDate"
                    }

                ]
            }
        });


        var dataGrid = new Y.DataTable({
            columns:["id", "scriptText", "modifiedDate"],
            summary:"Example Summary",
            caption:"Example Caption"
        });

        dataGrid.plug(Y.Plugin.DataTableDataSource, { datasource:dataSource });

        dataGrid.render("#dataGrid");
        dataGrid.datasource.load();

    });

</script>

        <span id="listView">
            <div id="dataGrid" style="height: 95%;width: 100%;"></div>
        </span>

**编辑，因为原始提交丢失了我的第二个代码块。

Answer 1

问题不在于我的javascript代码。问题在于我如何发送回复。 YUI框架期望响应将包含在回调函数中。当我改变我的回复以使用回调给出JSONP响应时，它开始工作。

YUI.Env.DataSource.callbacks.yui_3_11_0_1_1379097239018_187([
        {"script":{"id":34534,
            "scriptText":"234523452345234",
            "modifiedDate":1367525647000,
            "status":"Reviewed",
            "qcDate":1367526006000,
            "location":{"id":1},
            "orderInfo":{"id":1,
                "orderName":"Order Name",
                "dealerName":"Dealer Name"}
        }},
        {"script":{"id":656435,
            "scriptText":"36536543636365",
            "modifiedDate":1367525646000,
            "status":"Reviewed",
            "qcDate":1367526017000,
            "location":{"id":1},
            "orderInfo":{"id":43534534,
                "orderName":"Order Name",
                "dealerName":"Dealer Name"}
        }}
    ])

我是通过在Scala / Play 2.1的方法响应中使用JSONP调用来实现的。

def reviewRecords(q: String, callback: String) = Action {

val reviewRecords = reviewRecordsService.currentReviewRecords

Ok(new Jsonp(callback, Json.toJson(DataTablesReturnObject(reviewRecords.size, reviewRecords.toArray)))).as("application/json")

}

我将编辑原始问题的标题，以包含Play 2.1和Scala的关键字，因为这最终与Java响应略有不同。