grootjs 简明教程
grootJs簡明教程
mvvm框架也是解決的一類問題，在某些時候會提高生產效率；
? ? 經過接近一個月的努力，grootJs測試版終于發布了 ??
? ? grootJs是一個mvvm的框架，名字取 grass 和root 兩個單詞的組合，既“草根”之意。在創作的中，本著盡量簡單實用的原則構思完成的
grootJs不同于其他mvvm的三大亮點：
1.model模型自動回收。在框架中加入了垃圾回收機制，程序員不回再為了因不斷創建大量modle不能回收，或不便于回收造成內存占用太高而煩惱
2.全新的變量值變化監模型，改善其他mvvm框架對一些動態數組中得變量變化不便于監控的問題
3.全新的ui控件開發接口，是控件的值和頁面頁面模型的值實現同步，操作開發的控件時 就像操作html內置控件一樣
還有更多的新的東西等待你的發覺....
項目地址?https://github.com/time-go/grootJs
Grootjs官網(最新文檔在官網更新)
官網：http://time-go.github.io/grootJs
作者聯系方式:qq289880020，官方技術支持QQ群330603020?如有bug 疑問 或問題 請聯系作者:-)
Hello word(index1.html)
博客園上的教程不再更新
<html><head>
<title>hello word</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="groot.js"></script>
</head>
<body>
<div gt-view="myview">
<div gt-object="data">
<input type="text" gt-value-change="say">+<input type="text" gt-value-change="say2"><span
gt-text="{say}+{say2}"></span>
</div>
<input type="button" value="點擊" gt-click="fuzhi">
</div>
</body>
</html>
<script>
groot.view("myview", function (vm, ve) {
vm.data = {
say: 1,
say2: 2
}
/*vm.say = 1;
vm.say2 = 20;*/
ve.fuzhi = function () {
vm.data = {say: 10, say2: 50}
vm.dataRender();
}
})
</script>
說明:程序中首先引jquery，框架的docment操作都是基于jquery的。
gt-view="myview" 是定義一個作用于為myview的范圍，對應的在js里也有一個 groot.view("myview"...,這個兩個是相對應得；
vm是數據模型，它有個屬性為say，gt-value-change=“say”為綁定這個say屬性 change 表示 輸入框的值變化 vm中say的值就變化；
相應 change該為blur，就 ?是 輸入框失去焦點的時候 vm.say得值變化；gt-text="say"得意義找個標簽的內容綁定vm.say的值；
大家可以看到隨著輸入框的值變化，右邊標簽的值也在變化
目錄
綁定事件
綁定對象
綁定數組
$self $index $first $last parent() outerParent()
grootJs的屬性綁定指令
變量監控 指令 gt-wach
內置模塊加載器(commonjs規范)的使用
grootJs 屬性過濾器
checkbox radio select綁定
groot 引入外部模板
grootJs屬性擴展 groot.bindExtend
grootJS ui控件定義
grootJs 系統常用API介紹
轉載于:https://www.cnblogs.com/blowfish/p/3778539.html
總結
以上是生活随笔為你收集整理的grootjs 简明教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zoj 2526(一道很好的最短路应用题
- 下一篇： 2013年11月19日