제목이 오해의 소지가있는 경우 사전에 사과드립니다. 저는 하루 종일이 문제를 다루었으며 누군가가 도울 수 있는지 알고 싶었습니다.자바 스크립트로 버튼을 추가하여 KO 템플릿 데이터를 렌더링하는 데 문제가 발생했습니다.
개요 : 모든 템플릿은 DOM 앞에로드됩니다. 이전에는 모든 양식 (템플리트)이 기존 페이지에 표시되도록 설계되었습니다. 그러나 최근에 우리는 jQueryUI Dialogs에 표시 할 모든 템플릿을 옮겼습니다. 하나의 템플릿을 제외하고이 작업을 수행하는 데 필요한 모든 코드를 성공적으로 옮겼습니다. 템플릿을 사용하여 jQueryUI Dialog를 여는 버튼이 검색을 수행 한 후 DOM에로드되기 때문에 믿습니다.
'추가'버튼은 ViewModel 내부의 'addUos'함수를 호출하여 사용자가 원하는만큼의 양식을 계속 추가 할 수 있도록합니다.
HTML
템플릿 :
<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>
자바 스크립트 :
<script type="text/html" id="adduos-form">
{% include "sections/adduos.html" %}
</script>
jQueryUi 대화 (템플릿 엔진으로 나뭇 가지를 사용)
이 코드는이 코드는 for 루프에 있고 기본 그리드에있는 모든 사용자 항목을 작성
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로 테스트 한 후 VM의 addUos 기능이 클릭시 실행되지 않습니다. 나는 특정 요소
ko.applyBindings(viewModelObj.clientsUosVM, document.getElementById("addUosForm"));
ViewModelObj에 바인딩 적용 다음
$(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>");
(그건 내 주요 문제) : (나는 현재 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([]);
};
}
모두 포함 어떤 요소를 고려해 볼만하지만 다른 정보 나 코드가 필요하면 코드를 알려주십시오. 미리 감사드립니다.