使用通过JavaScript添加的按钮呈现KO模板数据时遇到问题

如果标题有误导性，我提前表示歉意。我整天都在处理这个问题，我想看看是否有人能帮忙

概述： 我们所有的模板都预先加载到DOM中。以前，所有表单（模板）都设计为显示在现有页面上。但是，我们最近移动了所有模板以显示在jQueryUI对话框中。除了一个模板之外，我已经成功地移动了所有必要的代码，我相信这是因为打开带有模板的jQueryUI对话框的按钮是在执行搜索后加载到DOM中的

“添加”按钮在ViewModel中调用“addUos”函数，以便用户可以继续添加所需数量的表单

HTML

模板：（使用细枝作为模板引擎）

ViewModelObj：（我目前有两个独立的虚拟机）

视图模型：

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

---

我包括了所有我认为是一个因素的代码，但是如果你需要任何其他的信息或代码，请告诉我。提前谢谢你

多亏了那些花时间阅读我长长的问题的人，但我昨天在下班前发现了我的问题

我刚刚删除了数据绑定单击事件

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);
}

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

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

$(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 = {

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

//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);
}