我的MVVM框架 v3教程——數據填充

主要API：

API

toViewModel(model. parentObject)

model:是一個普通對象，用於轉換為ViewModel

parentObject:可選，如果有，也是個普通對象，用於把ViewModel放掛它下面。

compute(fn. paths, model)

fn:是一個普通對象，用於轉換為組合訪問器

paths:ViewModel的其他訪問器的路徑的集合。

model：可選，ViewModel或ViewModel某一級下的對象。

render( model, node)

model:ViewModel或一個普通對象。不會ViewModel會轉換為ViewModel。

node：可選，從哪個節點開始綁定。默認是body。

數據填充涉及到text, html, value這三種綁定。value分為單向綁定與雙向綁定兩種，data-value-one為單向的，data-value為雙向的。

        <p data-html="innerHTML"></p>
        <p data-text="innerText"></p>
        <p>
            firstName: <input data-value="firstName"/>
        </p>
        <p>
            lastName: <input data-value-one="lastName"/>
        </p>
        <p>
            fullName: <input data-value="fullName" />
        </p>

            require("avalon,ready", function($) {

                var $$ = $.MVVM

                var VM = $$.toViewModel({
                    innerHTML:'Ruby  Louvre',
                    innerText: "這是文本標簽會被序列化防止破壞原來的結構",
                    firstName: "清風",
                    lastName: "火羽",
                    fullName: $$.compute(function(a){
                        if(arguments.length){
                            var arr = a.split(" ");
                            this.firstName(arr[0])
                            this.lastName(arr[1]);
                        }else{
                            return this.firstName() + " " + this.lastName();
                        }
                    }, ["firstName","lastName"])
                });

                $$.render(VM)
            })

示例

firstName:

lastName:

fullName:

你可以嘗試輸入一些東西（如果數據沒有出來請重刷頁面）。