我的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:

你可以尝试输入一些东西（如果数据没有出来请重刷页面）。