我正在使用knockback.js.我有一个值列表“projects”(值来自服务器)。这些值的内容显示在<div class="hiddendivcontent">
。
<ul data-bind="foreach: projects" class="list-group">
<li class="list-group-item" data-bind="click: function(data,event){CommunityView.showContents($data.pkey(),$data.folder(), data, event);}">
<span style="border:0px;" class="glyphicon glyphicon-plus pull-right" data-toggle="dropdown" ></span>
<ul class="dropdown-menu labellistdropdown" role="menu" style="min-width:200px;">
<li>..</li>
</ul>
<div class="hiddendivcontent">
<ul data-bind= "foreach : $root.community()" class="list-group">
<ul data-bind = "foreach :items">
<li> <span data-bind="text:cname"></span></li>
</ul>
</ul>
</div>
</li>
</ul>
“hiddendivcontent”在单击“CommunityView.showContents()”时获取值。换句话说,单击方法时应显示“hiddendivcontent”,否则它将保持隐藏状态。以下代码是我使用的Jquery代码:
showContents : function(pk,rf,data,event){
event.preventDefault();
$('.hiddendivcontent').toggle();
}
如果我使用上面的代码,则会在所有列表项中填充该值。我已经尝试了很多方法来切换div,但没有任何作用。任何人都可以向我推荐任何想法吗?
提前致谢
答案 0 :(得分:1)
尝试使用knockout visible绑定。首先,当从服务器接收项目时,添加到每个项目isVisible
observable:
$.get(..., function(projects){
projects = $.map(projects, function(project) {
project.isVisible = ko.observable(false);
return project;
});
viewModel.projects = projects; // assign received projects to your view model
});
现在在您的标记中使用visible
绑定,如下所示:
<div data-bind="visible: isVisible">
<ul data-bind= "foreach : $root.community()" class="list-group">
<ul data-bind = "foreach :items">
<li> <span data-bind="text:cname"></span></li>
</ul>
</ul>
</div>
请注意,您不再需要hiddendivcontent
课程。最后,在您的showContents
中执行如下操作:
showContents: function(name, id, data, event) {
data.isVisible(!data.isVisible());
}
见demo。我希望这就是你所需要的。
答案 1 :(得分:0)
以下是我对我的问题的回答。
我为列表添加了一些引导图标。因此,当用户点击bootstrap glyphicon时,应显示隐藏的ul(每当用户点击它时动态创建)。
$(".glyphicon ").click( function ( e ){
e.preventDefault() // prevent default action - hash doesn't appear in url
var target = $(e.target);
if(target.hasClass("glyphicon-chevron-right")){
$(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
var $newList = $("<ul />");
$newList.append("<ul class="+"hiddendivcontent"+">");
for(var i = 1; i <=4; i++) {
$newList.append("<li><span>" + "menu" + i + "</span></li>");
}
$(this).closest("li").append($newList);
}
else if(target.hasClass("glyphicon-chevron-down")){
$(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
$(e.target).parent().find("ul").remove();
}
} )