Возникли проблемы при отображении данных шаблона KO с помощью кнопки, добавленной через JavaScript

Question

Заранее извиняюсь, если название вообще вводит в заблуждение. Я занимался этим вопросом весь день и хотел посмотреть, сможет ли кто-нибудь помочь.

Обзор: все наши шаблоны загружаются в DOM. Ранее все формы (шаблоны) были предназначены для отображения на существующей странице. Однако недавно мы переместили все шаблоны для отображения в диалогах jQueryUI. Я успешно переместил весь необходимый код, чтобы сделать эту работу, за исключением одного шаблона, и я верю, что это потому, что кнопка, открывающая диалог jQueryUI с шаблоном, загружается в DOM после проведенного поиска.

Кнопка "Добавить" вызывает функцию "addUos" внутри ViewModel, так что пользователь может продолжать добавлять столько форм, сколько он пожелает.

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 функция 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 отдельные виртуальные машины)

viewModelObj = {

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

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

ViewModel:

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([]);
};
}

Я включил весь код, который я бы учел, но если вам нужна другая информация или код, просто дайте мне знать. Заранее спасибо!

Answer 1

Спасибо тому, кто нашел время, чтобы прочитать мой длинный вопрос, но я вчера определил свою проблему, прежде чем ушел с работы.

Я только что удалил событие нажатия на привязку данных data-bind='click: $root.addUos и переместил его в onclick функция 'openAddUosDialog()'

Надеюсь, что это помогает кому-либо еще, имеющему подобную проблему.

//Open Add UOS Dialog
function openAddUosDialog(regid, fname, lname) {

viewModelObj.clientsUosVM.dumpUos();
viewModelObj.clientsUosVM.addUos();
$("#adduos_block").show(200);

//Open Dialog
$("#addUosDialog").dialog("open");

$("#auos_regid").val(regid);
$("#auos_fname").val(fname);
$("#auos_lname").val(lname);
}