bitbucket - カスタム Bitbucket Merge Check - 構成を送信した後、動的フィールドが 2 回レンダリングされます

Question

Bitbucket 用のカスタム マージ チェックを作成しています。このチュートリアルに従うことから始めました: https://developer.atlassian.com/server/bitbucket/how-tos/hooks-merge-checks-guide/

たとえば、(指定された ID の) 複数の同様の入力フィールドを作成するボタンがあり、最終的に構成に格納されます。

まず第一に、私はこれに大豆を使用しました.1つの.textFieldなどへの呼び出しで静的テンプレートを作成しました. 問題なく動作しましたが、その場で新しい同様のフィールドを作成できませんでした ([新規追加] ボタンを押した後)。

そこで、JavaScript を使用して soy の構成からデータを取得します。構成全体を JS の「マップ」に書き直してから、すべてのフィールドを動的に (HTML コードに追加して) レンダリングし、構成から値を入力するか、ボタンを押して新しいフィールドを作成します。

それは機能します-field_[id]、たとえばfield_1、field_2などのキーの構成に保存されたすべてのデータを取得します.

しかし、バグがあります。[保存] ボタンを押して編集用のポップアップをもう一度表示すると、JavaScript が 2 回実行されることがわかります。すべてのフィールドが 2 回レンダリングされます。ほんの数秒後。構成を保存し、ページを更新してからポップアップをもう一度表示すると、そのような問題はありません。

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 が 2 回実行されるのはなぜですか? このような動的ビューを作成する他の方法はありますか?