迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能。
一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速慢时将花括号暴露出来。
<!DOCTYPE html>
<html>
<head>
<title>avalon入门</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.modern.js" type="text/javascript"></script>
<script>
var model = avalon.define({
$id: "test",
array: [{check: 1}, {check: 2}, {check: 3}],
aaa: "999"
})
</script>
<style>
.ms-controller{
visibility: hidden
}
</style>
</head>
<body>
<div ms-controller="test" class="ms-controller">
<div ms-repeat="array">
{{el.check}}
</div>
<a ms-href="xxxx{{aaa}}.html">ddd</a>
</div>
</body>
</html>

双花括号也默认是python一些著名模板的界定符,为了防止冲突,我们有更换界定符的需求。这时我们可以这样做
<!DOCTYPE html>
<html>
<head>
<title>avalon入门</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.modern.js" type="text/javascript"></script>
<script>
avalon.config({
interpolate: ["<!--","-->"]
})
var model = avalon.define({
$id: "test",
array: [{check: 1}, {check: 2}, {check: 3}],
aaa: "999"
})
</script>
</head>
<body>
<div ms-controller="test" class="ms-controller">
<div ms-repeat="array">
<!--el.check-->
</div>
<a ms-href="xxxx<!--aaa-->.html">ddd</a>
</div>
</body>
</html>
<!–与–>会生成一个注释节点,这样用户在网速慢时就看不到乱七八糟的内容了。当然这个也有风险,如果用户在页面上定义了许多注释,可以有搞混的问题。
我们再看下一个有用的配置项,debug。avalon默认是在控制台下打印没有调试消息的,上线时我们不愿用户看到它们,可以这样关掉它们。



avalon.config({debug: false})
avalon拥有自己的AMD加载器,如果你想用requirejs或seajs,那你得禁用自带的加载器,或像第一节建议的那样,直接在源码里面把它整个删掉。
avalon.config({loader: false})
此外,avalon还有两个隐秘的配置项。
maxRepeatSize是用来配置ms-repeat循环绑定生成的代理节点所在的池子大小,目的是重复利用这些VM对象。默认是100。手机上对内存比较严重,可以将此阀值调少点。
avalon.config({lmaxRepeatSize: 40})
dettachVModels是决定在事件绑定的this对象上添加$vmodels、 $vmodel属性。以前是默认添加的,现在是默认不添加,这是出于CG回收的考虑。并且在IE6-8下,为元素添加$vmodels属性不知为何会抛异常。看源码:

$vmodels、 $vmodel应该鲜为人知,大家不要管它们就是。此配置项也将在1.36中去掉。
迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
随机推荐
- bzoj 4484 [Jsoi2015]最小表示——bitset
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4484 每个点上存一下它到每个点的连通性.用 bitset 的话空间就是 \( \frac{n ...
- Ionic 3 自定义组件的使用
1. 创建组件 ionic g component myComponent myComponent为组件名称 创建好后,生成的文件如下图 2. 在Page 中使用 使用的是home 在home.htm ...
- 【selenium】XPATH语法(一)
XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 我们将在下面的例子中使用这个 XML 文档. <?xml v ...
- Windows OS系统变量
%userprofile% C:\Users\Administrator\ %windir% C:\Windows\
- 获取post发送过来的xml包
if (Request.HttpMethod.ToLower() == "post") { byte[] ar; ar = new byte[this.Request.Input ...
- bzoj2565 最长双回文子串
Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为n的串S,求S的最长双回文子串T, ...
- NB-IOT/LoRa/Zigbee无线组网方案对比
物联网设备节点组网存在2种组网方式, 无线组网和有线组网. 无线组网我们常见到的有Zigbee,LoRa, NB-IOT等,其中Lora/NB-IOT属于LPWAN技术,LPWAN技术有覆盖广.连接多 ...
- 纯文本文件 numbers.txt, 里面的内容(包括方括号)如下所示
from collections import OrderedDict import xlwt with open('student.txt','r') as f: number_list = jso ...
- Spring AOP的注解方式实现
spring也支持注解方式实现AOP,相对于配置文件方式,注解配置更加的轻量级,配置.修改更加方便. 1.开启AOP的注解配置方式 <!-- 开启aop属性注解 --> <aop:a ...
- poj 3046 Ant Counting(多重集组合数)
Ant Counting Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Total ...