自定義 Bitbucket 合並檢查 - 提交配置后動態字段呈現兩次

Question

我正在為 Bitbucket 創建自定義合並檢查。 我開始遵循本教程： https : //developer.atlassian.com/server/bitbucket/how-tos/hooks-merge-checks-guide/

我希望視圖是動態的，例如具有創建多個類似輸入字段（指定 ID）的按鈕，這些字段最終存儲在配置中。

首先，我為此使用了大豆 - 我創建了靜態模板，並調用了一個，例如 .textField。 它工作正常，但我無法即時創建新的類似字段（按“添加新”按鈕后）。

所以我使用 JavaScript 從 soy 的配置中獲取數據。 我將整個配置重寫為 JS“map”，然后動態呈現所有字段（通過將它們附加到 HTML 代碼），使用配置中的值填充它們或通過按下按鈕創建新字段。

它有效 - 我將所有數據保存在配置中，用於 field_[id] 等鍵，例如 field_1、field_2 等。

但是有一個錯誤。 當我按下“保存”按鈕並再次查看用於編輯的彈出窗口時，我可以看到 JavaScript 被執行兩次：我將所有字段呈現兩次 - 第一次在第一次執行期間，第二次在第二次執行期間出現幾秒鍾后。 當我保存配置，刷新頁面，然后再次查看彈出窗口時，沒有這樣的問題。

這是我在atlassian-plugin.xml文件中的合並檢查配置：

<repository-merge-check key="isAdmin" class="com.bitbucket.plugin.MergeCheck" name="my check" configurable="true">
        <config-form name="Simple Hook Config" key="simpleHook-config">
            <view>hook.guide.example.hook.simple.myForm</view>
            <directory location="/static/"/>
        </config-form>
    </repository-merge-check>

還有我簡化的 .soy 模板代碼：

{namespace hook.guide.example.hook.simple}

/**
 * @param config
 * @param? errors
 */
{template .myForm}
    <script type="text/javascript">
            var configuration = new Object();

            {foreach $key in keys($config)}
                configuration["{$key}"] = "{$config[$key]}";
            {/foreach}

            var keys = Object.keys(configuration);

            function addNewConfiguration() {lb}
                var index = keys.length;
                addNewItem(index);
                keys.push("field_" + index);
            {rb}


            function addNewItem(id) {lb}
                var html = `<label for="field_${lb}id{rb}">Field </label><input class="text" type="text" name="field_${lb}id{rb}" id="branch_${lb}id{rb}" value=${lb}configuration["field_" + id] || ""{rb}><br>`;
                document.getElementById('items').insertAdjacentHTML('beforeend', html);
            {rb}

            keys.forEach(function(key) {lb}
                var id = key.split("_")[1];
                addNewItem(id);
            {rb});

             var button = `<button style="margin:auto;display:block" id="add_new_configuration_button">Add new</button>`;
             document.getElementById('add_new').innerHTML = button;
             document.getElementById('add_new_configuration_button').addEventListener("click", addNewConfiguration);

    </script>

    <div id="items"></div>
    <div id="add_new"></div>

    <div class="error" style="color:#FF0000">
        {$errors ? $errors['errors'] : ''}
    </div>
{/template}

為什么在這種情況下 JavaScript 會被執行兩次？ 有沒有其他方法可以創建這樣的動態視圖？

Answer 1

每當您單擊以編輯配置時，soy 模板將再次加載並執行。 因此，javascript 也將再次執行。 為了防止這種情況，您可以創建一個 javascript 文件並將其放在您的simpleHook-config.soy模板文件旁邊，文件名相同，即simpleHook-config.js 。 javascript 文件將與您的大豆模板一起自動加載，但一次。 因此，您可以在新引入的 js 對象中保存全局初始化狀態。

此外，即使您正在動態添加字段，您仍然可以並且應該已經在 soy 模板中構建保存的配置，而不是使用 javascript 構建它。

對我來說，這種方法效果很好（我或多或少是盲目地編寫代碼，所以也許你需要稍微調整一下）：

在 .soy 文件中：

{namespace hook.guide.example.hook.simple}

/**
 * @param config
 * @param? errors
 */
{template .myForm}
<div id="merge-check-config">
    <div id="items">
        {foreach $key in keys($config)}
        {let $id: strSub($key, strIndexOf($key, "_") + 1) /}
        {call .field}
            {param id: $id /}
            {param value: $config[$key] /}
        {/foreach}
    </div>

    <div id="add_new">
        <button style="margin:auto; display:block" id="add_new_configuration_button">Add new</button>
    </div>

    <div class="error" style="color:#FF0000">
        {$errors ? $errors['errors'] : ''}
    </div>

    <script>
        myPluginMergeCheck.init();
    </script>
</div>
{/template}

/**
 * @param id
 * @param? value
 */
{template .field}
<div>
    <label for="field_${id}">Field</label>
    <input class="text" type="text" name="field_${id}" id="branch_${id}" value="${value}">
</div>
{/template}

在 .js 文件中：

myPluginMergeCheck = {
    initialized: false,
    init: function () {
        if (this.initialized) {
            return;
        }

        var me = this;
        AJS.$(document).on("click", "div#merge-check-config button#add_new_configuration_button"), function (event) {
            me.addNewItem();
        }
        this.initialized = true;
    },
    addNewItem: function() {
        var itemsDiv = AJS.$("div#merge-check-config div#items");
        var newId = itemsDiv.children("div").length;
        var html = hook.guide.example.hook.simple.field({id: newId});
        itemsDiv.append(html);
    }
};