knockout快速建立樹形菜單

效果圖，圖比較簡陋：

如何建立

引入knockout

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>

Html代碼

<ul  data-bind='template: { name: "guideTmpl", foreach: menus }'></ul>

Js代碼

<!--菜單項模板-->
<script id="guideTmpl" type="text/html">
    <li >
		<span data-bind='text: name, click:$root.openOrClose'></span>
		<ul data-bind='template: { name: "guideTmpl", foreach: children }, visible:opened'></ul>
	</li>
</script>
<script type="text/javascript">
var Menu = function(name, children, opened) {
    this.name = ko.observable(name);
	this.children = ko.observableArray(children || []);	//下級子菜單
	this.opened = ko.observable(opened); //true:展開  false:摺疊
};

var PeopleModel = function() {
    this.menus = ko.observableArray([
	    new Menu("Twitter BootStrap", [
		    new Menu("bootstrap介紹"),
			new Menu("響應式設計"),
			new Menu("JavaScript插件")
		]),
		new Menu("Knockout", [
		    new Menu("監控屬性(Observables)"),
			new Menu("控制流綁定(Control flow)"),
			new Menu("表單域綁定(Form fields)"),
			new Menu("自定義綁定(Custom)")
		])
	]);
	//展開、摺疊操做
	this.openOrClose = function(source){
	   var opened = source.opened();
	   if(opened)
	      source.opened(false);
	   else
	      source.opened(true);
	};
};

ko.applyBindings(new PeopleModel());
</script>

以上代碼可直接粘貼運行

來自：http://www.see-source.com/front/front!index