0
드롭 다운 메뉴 모음을 만들려고하고 있는데 클릭하면 드롭 다운이 표시되고 오른쪽 화살표에서 아래쪽 화살표로 아이콘이 변경됩니다. 그러나 Knockout JS는 바인딩 내에서 span 태그를 계속 삭제합니다. 이 문제를 어떻게 해결할 수 있습니까?아이콘을 삭제하지 않고 바인딩에 아이콘을 어떻게 추가 할 수 있습니까?
이 내 HTML입니다 :
<!-- Recursively traverse the nested structure -->
<ul data-bind="template: {name: 'document_index_template', foreach: children}"><l><a href="#">Document Index</a></l></ul>
<script type="text/html" id="document_index_template">
<li class="collapsible-child" >
<a data-bind="text: label, click: function(){isExpanded(!isExpanded())}" href="#"><span class="glyphicon glyphicon-triangle-right" ></span></a>
<ul class="collapsible-child" data-bind='template: { name: "document_index_template", foreach: visibleChildren}'></ul>
</li>
</script>
그리고 이것은 내 뷰 모델입니다 :
var document_type = 'loan';
var key = 'comparison';
define(['jquery', 'knockout'], function($, ko){
var structureRequest = getStructure();
structureRequest.then(function(data){
window.treeNode = new TreeNode(data);
ko.applyBindings(window.treeNode);
});
function TreeNode(data){
var self = this;
self.key = ko.observable(data.key);
self.label = ko.observable(data.label);
self.children = ko.observableArray([]);
$.each(data.children, function(index, child){
self.children.push(new TreeNode(child));
});
self.isExpanded = ko.observable(false);
self.visibleChildren = ko.computed(function(){
if(self.isExpanded()){
return self.children();
}else{
return [];
}
});
}
function getStructure() {
var url = "../structure/api/0?document_type=" + document_type + "&key=" + key;
return $.ajax({
url: url,
type: "GET",
dataType: "json"
});
}
});