0

タイトルがまったく誤解を招く場合は、事前にお詫び申し上げます。私は一日中この問題に取り組んでおり、誰かが助けてくれるかどうか知りたいと思っていました.

概要: すべてのテンプレートは DOM に事前に読み込まれます。以前は、すべてのフォーム (テンプレート) が既存のページに表示されるように設計されていました。ただし、最近、すべてのテンプレートを jQueryUI ダイアログに表示するように移動しました。1 つのテンプレートを除いて、これを機能させるために必要なすべてのコードを正常に移動しました。これは、テンプレートを使用して jQueryUI ダイアログを開くボタンが検索後に DOM に読み込まれるためだと思います。

「追加」ボタンは、ViewModel 内の「addUos」関数を呼び出して、ユーザーが必要な数のフォームを追加し続けることができるようにします。

HTML

テンプレート: (テンプレート エンジンとして TWIG を使用)

<script type="text/html" id="adduos-form">
    {% include "sections/adduos.html" %}
</script>

jQueryUi ダイアログ:

<div id="addUosDialog" title="Add UOS (Units of Service)">
<div id="addUosDialogDiv">
    <div id="adduos_block">
        <form id="adduosForm" action="" method="">
            <div id="addUosDiv">
                <!-- Populated by Ajax via clientTabs.js -->
            </div>
        </form>
    </div>
</div>

JavaScript:

このコードは、テンプレートがレンダリングされる div を作成します

var currDialogDiv = $("#addUosDiv");
var currDialogForm = $("<div id='addUosForm' data-bind=\"" + "template: { name:'adduos-form', foreach: uos_data }\"></div>");

//Create Template
$(currDialogDiv).append(currDialogForm);

このコードは for ループ内にあり、基本グリッドにすべてのユーザー エントリを作成します。エントリごとに [追加] ボタンと [編集] ボタンが作成されます。[編集] ボタンは正常に機能しますが、[追加] ボタンを押すと必要に応じてダイアログが開きますが、テンプレートは表示されません。Chrome Dev Tools でテストした後、VM の addUos 関数はクリックしても起動されません。（それが私の主な問題です）

$(currTR).append("<td class='bodyId'>" + currRegNo + "</td>"); //TODO: This will be removed in the future
$(currTR).append("<td>" + currLastName + "</td>");
$(currTR).append("<td>" + currFirstName + "</td>");
$(currTR).append("<td>" + currDob + "</td>");
$(currTR).append("<td>" + currType + "</td>");
$(currTR).append("<td><a href='javascript:;' data-bind='click: $root.addUos' onclick='openAddUosDialog(" + currRegId + ", \"" + currFirstName + "\", \"" + currLastName + "\")' class='button blue small'>Add</a><a href='javascript:;' onclick='openEditUosDialog(" + currRegId + ")' class='button blue small'>Edit</a></td>");

次に、特定の要素にバインディングを適用します

ko.applyBindings(viewModelObj.clientsUosVM, document.getElementById("addUosForm"));

ViewModelObj: (現在、2 つの個別の VM があります)

viewModelObj = {

    clientsVM : new clientsVM(),
    clientsUosVM : new clientsUosVM()
};

ko.applyBindings(viewModelObj.clientsVM);
clientsUosVM = new clientsUosVM();

ビューモデル:

function clientsUosVM() {

var self = this;
var uCount = 0; //UOS Forms

self.uos_data = ko.observableArray();

self.addUos = function() {

    self.uos_data.push({
        uosloc : 'uos[' + uCount + '][uosloc]',
        uosloc_id : 'uosloc_' + uCount,

        uossrv : 'uos[' + uCount + '][uossrv]',
        uossrv_id : 'uossrv_' + uCount,

        uosnum : 'uos[' + uCount + '][uosnum]',
        uosnum_id : 'uosnum_' + uCount,

        uosbegin : 'uos[' + uCount + '][uosbegin]',
        uosbegin_id : 'uosbegin_' + uCount,

        uosexp : 'uos[' + uCount + '][uosexp]',
        uosexp_id : 'uosexp_' + uCount
    });

    populateLoc($('select#uosloc_' + uCount));
    $('input#uosbegin_' + uCount).mask('99/99/2099');
    $('input#uosexp_' + uCount).mask('99/99/2099');
    uCount++;
};

self.removeUos = function(item) {

    self.uos_data.remove(item);
};

self.dumpUos = function() {

    self.uos_data([]);
};
}

要因と考えられるすべてのコードを含めましたが、他の情報やコードが必要な場合はお知らせください. 前もって感謝します！

4

1 に答える 1