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介紹