grootjs 简明教程
grootJs簡明教程
mvvm框架也是解決的一類問題，在某些時候會提高生產(chǎn)效率；
? ? 經(jīng)過接近一個月的努力，grootJs測試版終于發(fā)布了 ??
? ? grootJs是一個mvvm的框架，名字取 grass 和root 兩個單詞的組合，既“草根”之意。在創(chuàng)作的中，本著盡量簡單實用的原則構(gòu)思完成的
grootJs不同于其他mvvm的三大亮點：
1.model模型自動回收。在框架中加入了垃圾回收機制，程序員不回再為了因不斷創(chuàng)建大量modle不能回收，或不便于回收造成內(nèi)存占用太高而煩惱
2.全新的變量值變化監(jiān)模型，改善其他mvvm框架對一些動態(tài)數(shù)組中得變量變化不便于監(jiān)控的問題
3.全新的ui控件開發(fā)接口，是控件的值和頁面頁面模型的值實現(xiàn)同步，操作開發(fā)的控件時 就像操作html內(nèi)置控件一樣
還有更多的新的東西等待你的發(fā)覺....
項目地址?https://github.com/time-go/grootJs
Grootjs官網(wǎng)(最新文檔在官網(wǎng)更新)
官網(wǎng)：http://time-go.github.io/grootJs
作者聯(lián)系方式:qq289880020，官方技術支持QQ群330603020?如有bug 疑問 或問題 請聯(lián)系作者:-)
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是數(shù)據(jù)模型，它有個屬性為say，gt-value-change=“say”為綁定這個say屬性 change 表示 輸入框的值變化 vm中say的值就變化；
相應 change該為blur，就 ?是 輸入框失去焦點的時候 vm.say得值變化；gt-text="say"得意義找個標簽的內(nèi)容綁定vm.say的值；
大家可以看到隨著輸入框的值變化，右邊標簽的值也在變化
目錄
綁定事件
綁定對象
綁定數(shù)組
$self $index $first $last parent() outerParent()
grootJs的屬性綁定指令
變量監(jiān)控 指令 gt-wach
內(nèi)置模塊加載器(commonjs規(guī)范)的使用
grootJs 屬性過濾器
checkbox radio select綁定
groot 引入外部模板
grootJs屬性擴展 groot.bindExtend
grootJS ui控件定義
grootJs 系統(tǒng)常用API介紹
轉(zhuǎn)載于:https://www.cnblogs.com/blowfish/p/3778539.html
總結(jié)
以上是生活随笔為你收集整理的grootjs 简明教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zoj 2526(一道很好的最短路应用题
- 下一篇： 2013年11月19日