主要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:
你可以尝试输入一些东西(如果数据没有出来请重刷页面)。