來自Javascript文件的訪問控制器值（映射）

Question

我將所有數據保存在map ，現在無法從單獨的JS文件訪問它們。

在我的（索引）頁面上，我有2個表。 LHS表顯示可用指令列表，RHS將顯示所選指令的所有詳細信息。

換句話說，當用戶單擊LHS表上的ID＃1時，RHS表將僅顯示該ID號的所有指令信息。

我在我的LHS表中的ID中添加了onclick函數。 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文件中（從這里獲得了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版本有關。 我很幸運，用一個標簽指示grails不要轉引號來包圍encodeAsJson ：

<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變量，您可以在外部文件中對其進行訪問。