fxDataGrid不会渲染

时间:2017-08-21 06:40:48

标签: jquery knockout.js

我在使用Knockout渲染fxDataGrid时遇到问题。我已经问过我认识的每个人并搜索过网络,但我找不到任何解决方案。这就是问题所在。

我有一个用于呈现UI的HTML文件。代码如下:

<div id="biab-power-user">
<div data-bind="if: isPowerUser">
    <header>
        <h2>Boxes in use</h2>
    </header>
    <div id="tenant-power-user-box-grid"></div>
    <div data-bind="if: boxRemoveVisible">
        <button class="btn btn-primary" data-bind="click: removeBox">Decommision <span data-bind="text: selectedBoxName"></span></button>
        <div data-bind="if: showDecommissioningWarning">
            <p>
                Are you sure you want to decommision <span data-bind="text: selectedBoxName"></span> box?
                <input type="button" class="btn btn-primary" value="Yes" data-bind="click: handleDecommissionBox" /> <input type="button" class="btn btn-default" value="No" data-bind="click: cancelRemoveBox" />
            </p>
        </div>
    </div>
    <section class="validation">
        <span style="color: red" data-bind="visible: !!actionError, text: actionError"></span>
    </section>
</div>
<div data-bind="ifnot: isPowerUser">
    <section class="validation">
        <span style="color: red">You are not allowed to view the content of this page.</span>
    </section>
</div>

然后我有一个代码的底层JS控制器,它有几个应该绑定数据的函数:

...
var fxGridSelector = "#tenant-power-user-box-grid";
var isGridDrawn = false;
...
function loadBoxes() {
    controller.getTenantBoxes().then(function (success) {                
            setGridData(success);
            clearBoxActions();
        }, function (error) {
            console.log(error);
        });
}

function drawGrid(gridData) {
    $(fxGridSelector).fxDataGrid({
        coulmns: [
            { name: "Name", field: "Name" },
            { name: "Project", field: "ProjectName" },
            { name: "Team", field: "Team" },
            { name: "Owner", field: "Owner" },
            { name: "GI Version", field: "GoldenImageVersionName" }
        ],
        selectable: true,
        multiselect: false,
        rowSelect: onRowSelect,
        data: gridData,
        noRows: "There are no boxes in use."
    });

    isGridDrawn = true;
}

function setGridData(gridData) {
    if (!isGridDrawn) {
        drawGrid(gridData);
        return;
    }

    $(fxGridSelector).fxDataGrid({
        data: gridData
    });
}
...

JS的其余部分与问题无关。我已经检查过,并且从REST调用中正确返回了JSON。根据文档和我发现的内容,该代码应该可行。此外,我在UI的不同部分中具有几乎相同的代码(它仅在呈现的数据中不同)并且它起作用。但是,在这个特定的HTML中,数据并不想呈现。

你能帮我解决这个问题吗?我很感激。 :)

0 个答案:

没有答案