$.vmodel.create(param) - 建議寫法

            $.vmodel.create({
                selector: '.container', 
                model: '--message', 
                isautoload: true, 
                method: function (){
                    var vs = this;
                    this.autoload = ['init']; 

                    // 建立自訂方法,若需要自動被觸發,可將方法名稱寫入 autoload 的陣列
                    this.init = function (){
                        console.log('Hello World')
                    }
                }
            });
        
            this.autoload = ['init', 'click_button'];
            
            或
            
            this.autoload = function (){
                // 做一些處理
                return ['init', 'click_button'];
            }
        

$(selector).vmodel(selector, model, isautoload, method) - 舊寫法

            $(".container").vmodel(".container", "--message", true, function (){
                var vs = this;
                this.autoload = ['init'];
                this.yourfun = function (){
                    console.log('Hello World')
                }
            });
        

vs

等同於內部的 this,例如呼叫內部的方法, this.callme() 等同於 vs.callme()。這麼做是因為 this 這個關鍵字在太多地方會使用。而一旦使用 vs 就能清楚明白,我們準備呼叫內部的屬性或方法。

vs.root

取得跟位置的 $(selector)。

vs.selector

取得根指定的選擇器 selector。

vs.struct(name, [status])

告訴 vmodel 當前哪個方法的建構已經完成。
配合 $.vmodel.get() 第三個參數指定使用視覺化屬性的時候,需要透過該方法來輔助。通常使用在 function 的結尾。例如這裡我們先定義好模組,在使用 $.vmodel.get() 呼叫啟用。可參考這個範例:

            $.vmodel.create({
                selector: '.container',
                model: '--model',
                isautoload: false,
                method: function (){
                    var vs = this;
                    this.autoload = ['say']; // 啟用後會自動讀取 say()

                    this.say = function (){
                        console.log('Hello World')
                        // 告訴模組這個方法建構完畢
                        vs.struct('say');
                    }

                    // 做為完成後的呼叫
                    this.success = function (){
                        console.log('ByeBye')
                    }
                }
            });       

            // 啟用模組,並在 "model" 建構完畢後會做一些事情
            $.vmodel.get("model", true, function (storage){
                storage.success(); // 等同 $.vmodel.get("model").success();
            });
        

$.vmodel.get([name], [autoload], [listen])

可在任何時候,啟用 vmodel 自動讀取(初始化或是建構的概念),或是呼叫 vmodel 模組內的某個方法。如果指定 listen ,那麼完成後會在根元素添加屬性 data-vmodel-history 作為紀錄。我們可以透過 $.vmodel.history() 取得。

            $.vmodel.create({
                selector: '.container',
                model: '--model',
                isautoload: false, // 不觸發 autoload
                method: function (){
                    var vs = this;
                    this.autoload = ['init'];
                    this.init = function (){
                        //....
                    }
                }
            });

            $.vmodel.get("model", true);

            或

            $.vmodel.get("model", true, true);

            或

            $.vmodel.get("model", true, function (storage){
                //...
            });
        

$.vmodel.history(name)

取得視覺化的屬性物件。如果找不到,會返回 false。務必將取得的倉儲對象,設定 $.vmodel.get() 第三個參數。

            $.vmodel.get('my', true, true);
            var obj = $.vmodel.history('my');
        

$.vmodel.end([storage], [callback])

監控多組倉儲,直到完成視覺化後,即刻觸發函式。若要使用該方法,務必啟用 $.vmodel.get() 第三個參數為 true 或 function,以及配合 vs.struct()。

            $.vmodel.end(function (){
                //...
            })
            $.vmodel.end(['login', 'register'], function (){
                //...
            })
        

$.vmodel.delete([name])

刪除指定的倉儲。

            $.vmodel.delete();
            $.vmodel.delete('my');
        

$.vmodel.version()

取得當前的 vmodel 版本編號。

            console.log( $.vmodel.version() ); // 輸出如 1.5.1