knockout不操作dom来实现带管理功能的树形菜单

knockout已经使用一段时间了，但真正感觉到一些东西了，还是从下面这个例子开始的。不需要直接操作dom，有个绑定(当然是双向的)即可，将数据和dom元素联系起来，免去了在定位dom。

一个tree树的例子，带有复选框、删除节点及重命名功能。

效果图：

由于iteye无法插入演示代码，可以从这里  演示效果

 

 

Css代码

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>
<style type="text/css">
  li {list-style:none; font-size:14px;}
  ul {padding-left:25px;}
  .operaterDiv{width:100px; margin-left:100px;; z-index:100px;position:absolute;margin-top:-5px; border:1px solid #000;background-color:#FFF}
  .operaterDiv li{list-style-type:none; padding:1px; margin-left:20px;}
  .operaterDiv a:link {text-decoration: underline; color:blue;}
  .operaterDiv a:visited{text-decoration: underline;; color:blue;}
  .operaterDiv a:hover {text-decoration: none; color:blue;}
  .close{float:right; font-size:5px; color:red;}
  .highLight{background-color:#009; color:#FFF;}
</style>

 Html代码

<ul  data-bind="template: { name: 'guideTmpl', foreach: menus}"></ul><br/>
  <a href="javascript:void(0)"  onClick="getSelectedValues()">查看选中值</a><br/>

 Js代码

<!--节点模板模板-->
<script id="guideTmpl" type="text/html">
    <li>	    
	    <img data-bind="attr: {src:imageUrl}, click:$root.openOrClose"/>
		<input type="checkbox" data-bind="checked:selected"/>
		<span data-bind="text: name, visible:switchS, css:{highLight:editOpened}, event:{contextmenu:$root.myContextmenu, click:$root.openOrClose}, clickBubble: false"></span>
		<span data-bind="visible:!switchS()"><input type="text" data-bind="value:name,event:{blur:$root.closeAllOpenedDiv}"/></span>
		<div  data-bind="visible: editOpened" class="operaterDiv">
		    <span class="close" data-bind="click:$root.closeOpenedDiv">关闭</span>
		    <ul style="padding:0;margin:0; margin-top:5px;">
			   <li><a href="#"  data-bind="click:function(){if(confirm('确定要删除吗?')){$parent.children.remove(this)}; this.editOpened(false);}, clickBubble: false">Delete</a></li>
			   <li><a href="#"  data-bind="click:$root.doSwitch, clickBubble: false">Rename</a></li>
			</ul>
		</div>
		<ul data-bind="template: { name: 'guideTmpl', foreach: children }, visible:opened"></ul>		
		
	</li>
</script>
<script type="text/javascript">
var index = 1;//用于模拟value值(实际中应是每个节点的唯一标识)
var Menu = function(name, children, opened, imageUrl, selected, value) {//节点对应的js对象
    this.name = ko.observable(name);
	this.children = ko.observableArray(children || []);	//下级子节点
	this.opened = ko.observable(opened); //true:展开  false:折叠
	this.imageUrl = ko.observable("http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/images/dhtmlgoodies_plus.gif"); //true:展开  false:折叠
	this.selected = ko.observable(false);
	this.value = "000" + index++;
	this.editOpened = ko.observable(false);
	this.switchS  = ko.observable(true);
};

var MenuModel = function() {
    var self = this;
    self.menus = ko.observableArray([
	    new Menu("Twitter BootStrap", [
		    new Menu("bootstrap介绍", [new Menu("2222")]),
			new Menu("响应式设计"),
			new Menu("JavaScript插件")
		]),
		new Menu("Knockout", [
		    new Menu("监控属性(Observables)"),
			new Menu("控制流绑定(Control flow)"),
			new Menu("表单域绑定(Form fields)"),
			new Menu("自定义绑定(Custom)")
		])
	]);
	//展开、折叠操作
	self.openOrClose = function(source){
	   self.closeAllOpenedDiv();
	   var opened = source.opened();
	   if(source.children() == 0)
	      return ;
	   if(opened){
	       source.opened(false);
		   source.imageUrl("http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/images/dhtmlgoodies_plus.gif");
	   }else{
	       source.opened(true);
		   source.imageUrl("http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/images/dhtmlgoodies_minus.gif");
	   }
	   var children = source.children();
	   for (var i in children){
	       if(children[i].children().length == 0 ){//存在子节
		      children[i].imageUrl("http://www.see-source.com/images/dhtmlgoodies_white.gif");
		   }
	   } 	   
	};
	//获得复选框所有选中的value值
	self.selectedValues = function(){
	    var valuesStr = "";
		var menus = self.menus();
		for (var i in menus){
		    if(menus[i].selected()){
			   valuesStr += ",";
			   valuesStr += menus[i].value;			   
			}
			var qiantao = function(child){
			    for (var i in child){
				    if(child[i].selected()){
			           valuesStr += ",";
			           valuesStr += child[i].value;			   
			        } 
					qiantao(child[i].children());
				}
			}
			qiantao(menus[i].children());
		}
		return valuesStr;
	};
	//右键事件(弹出操作层)
	self.myContextmenu = function(source){
	    self.closeAllOpenedDiv();
	    source.editOpened(true);
	};
	//切换
	self.doSwitch = function(source){
	    source.switchS(false);
		source.editOpened(false);
	};
	//关闭所有弹出操作层
	self.closeAllOpenedDiv = function(){
	   var menus = self.menus();
		for (var i in menus){		    
			var qiantao = function(child){
			    for (var i in child){
				    child[i].editOpened(false);
					child[i].switchS(true);
					qiantao(child[i].children());
				}
			}
			qiantao(menus[i].children());
			menus[i].editOpened(false);
			menus[i].switchS(true);			
		}
	};
	//关闭当前弹出操作层
	this.closeOpenedDiv = function(source){
	    source.editOpened(false);
	}
};
var myMenuModel = new MenuModel();
ko.applyBindings(myMenuModel);
var children = myMenuModel.menus();
for (var i in children){
	if(children[i].children().length == 0 ){//存在子节
		 children[i].imageUrl("http://www.see-source.com/images/dhtmlgoodies_white.gif");
	}
} 

</script>

<script type="text/javascript">
function getSelectedValues(){  //查看选中的值列表  
    var values = myMenuModel.selectedValues();
	if(values.length != 0){
	    values = values.substring(1);
	}
    alert(values);
}
</script>

 以上代码可直接粘贴运行。