Ruby's Louvre

每天学习一点点算法

导航

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

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

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

posted on 2012-12-14 17:41  司徒正美  阅读(2311)  评论(6编辑  收藏  举报