javascript - 从 Javascript 文件访问 Controller 值(映射)

Question

我将所有数据保存在 map 中，但现在无法从单独的 JS 文件访问它们。

在我的(索引)页面上有 2 个表格。左侧表格显示可用指令列表，右侧表格显示所选指令的所有详细信息。

换句话说，当用户单击左侧表格上的 ID#1 时，右侧表格将仅显示该 ID 号的所有说明信息。

我已将 onclick 函数添加到 LHS 表中的 ID。 index.gsp 中的代码:

<tbody>
        <g:each in="${deliveryInstructions}">                           
            <tr>
                <td id="instruction_ID">
                    <a href="#" onclick="display_DI_details(${it.id})">${it.id}</a>
                </td>
                <td>${it.deliveryName}</td>
                <td>${it.bankName}</td>
                ...
                ...
                ...
            </tr>
        </g:each>
</tbody>

在我的 JS 文件中(从 here 得到 JSON 的想法):

function display_DI_details(id) {
    var deliveryID = id; 
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};

    document.getElementById('diName').innerHTML = ${deliveryInstructions.deliveryName}
    document.getElementById('diID').innerHTML = ${deliveryInstructions.id}
    document.getElementById('fundingAccount').innerHTML = ${deliveryInstructions.fundingAccountNumber}
    ...
    ...
    ...
    document.getElementById('beneficiary').innerHTML = ${deliveryInstructions.beneficiary}
    document.getElementById('comments').innerHTML = ${deliveryInstructions.comments}
}

document.getElementById("display-di-list").innerHTML = display_DI_details(id);

再次在 index.gsp 中，这就是我为 RHS 表所做的...

<div id="display-di-list">
    <!-- <g:each in="${deliveryInstructions}"> -->
        <label>Delivery Name: <p class="receiptData" id="diName"></p></label>
        <label>Delivery ID: <p class="receiptData" id="diID"></p></label>
        <label>Funding Account: <p class="receiptData" id="fundingAccount"></p></label>
        ...
        ...
        ...
        <label>Beneficiary: <p class="receiptData" id="beneficiary"></p></label>
        <label>Comments: <p class="receiptData" id="comments"></p></label>
    <!-- </g:each> -->
</div>

最后在controller文件中:

def index() {
    [deliveryInstructions: DeliveryInstruction.list()]
}

现在我很难连接几个点来完成这个任务。在我的 JS 文件中，如何让它只获取传递的 ID 的参数值(假设在本例中 ID 号为 1)？非常感谢您的帮助和时间!

Answer 1

Grails 对象转换为 Javascript 变量:

var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};

为我生成无效的 json，我相信差异(如果你的方法有效)与使用的 grails 版本有关。 我很幸运围绕encodeAsJson带有指示 grails 不要转义引号的标记:

<g:applyCodec encodeAs="none">
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};
</g:applyCodec>

如果您的方式已经有效，请忽略此内容，您可以通过查看生成的 html 进行验证。

<小时/> 在您的函数中，如果您有 id和对象数组 deliveryInstructions ，您只需使用 javascript 函数即可获取数组中的匹配元素

var matchingDeliveryInstruction = deliveryInstructions.find(function(element){
    return element.id == id;
});

现在，只需使用 matchingDeliveryInstruction设置右侧的 html:

document.getElementById('diName').innerHTML = matchingDeliveryInstruction.deliveryName;
document.getElementById('diID').innerHTML = matchingDeliveryInstruction.id;
...
etc.

我非常喜欢使用 .js 库来做这样的事情，但根据您的项目有多大，这可能有点过头了。

<小时/>

附加: 再次查看您的问题后，您提到了一个单独的 .js 文件。 ${...}只能在您的 gsp 范围内工作。您可以保留外部 .js 文件(一个很好的做法)，但您需要将其包含在您的 gsp 中:

<script>
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};
</script>

根据生成的内容，您可能仍需要用 <g:applyCodec encodeAs="none"> 包装它。现在，这将创建一个全局 deliveryInstructions可在外部文件中访问的变量。