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>
そして、これは私のViewModelです：
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"
});
}
});