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

Question

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

Обзор: Все наши шаблоны загружены спереди в DOM. Раньше все формы (шаблоны) были предназначены для отображения на существующей странице. Тем не менее, мы недавно переместили все шаблоны для отображения в jQueryUI Dialogs. Я успешно переместил весь необходимый код, чтобы сделать эту работу за исключением одного шаблона, и я считаю, что это потому, что кнопка, открывающая диалог 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); 

Этот код в цикле и создает все записи пользователя в основной сетке. Для каждой записи создается кнопка «Добавить и редактировать». Кнопка «Редактировать» работает отлично, но кнопка «Добавить» откроет диалоговое окно по желанию, но шаблон не будет отображаться. После тестирования с помощью 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); 
}