avalon.js 绑定属性完整指南：从作用域到循环渲染

avalon.js 框架概述

avalon 是一款前端 MVVM 框架，它将前端代码明确划分为视图层与业务逻辑层两部分。视图层的处理依赖于绑定机制（Angular 中称为指令），而业务逻辑则封装在名为 VM（ViewModel）的对象中。开发者只需操作 VM 中的数据，视图便会自动同步更新，实现数据到界面的自然映射。

在 avalon 中，$model 代表所有非 $ 开头的属性，$event 代表事件对象。

作用域控制与绑定基础

1、作用域圈定

ms-controller：依据就近原则，自下而上扫描 DOM 树以确定作用域范围。

ms-important：仅扫描当前节点及其子节点作为作用域扫描区。

ms-skip：使该节点上的数据绑定失效。

双向数据绑定 ms-duplex

2、ms-duplex 双向绑定属性：除了将 VM 中的数据同步到 DOM 节点外，还会在节点上自动绑定监听事件。当节点数据发生变化时，及时将视图（V）中的数据同步回 VM，实现双向数据流。

(1) text、password、textarea 类型要求绑定值为字符串，对应属性为 ms-duplex-text。

(2) radio 类型绑定为布尔值，对应属性为 ms-duplex-boolean。

(3) checkbox 类型绑定为数组，对应属性为 ms-duplex-string。

(4) select 类型绑定为字符串或数组，对应属性为 ms-duplex-string。

上述为 ms-duplex 2.0 版本的绑定属性规范。

视图控制与属性操作

3、ms-visible：功能类似 toggle，当表达式为 true 时显示元素。其实现方式是将元素的 display 属性设置为 block 或 none，从而控制显示或隐藏。

4、插入移除处理 ms-if：通过添加节点元素来显示，或通过设置 <!--ms-if--> 注释来隐藏节点（即删除节点）。

5、数据缓存 ms-data-*：用于保存对象或数组。使用 ms-data 将数据绑定在 DOM 节点对象上而非作为 HTML 属性，显示时进行处理并返回。绑定结果表现为 data-* 属性形式。

6、属性操作：包括 ms-class（class 属性）、ms-duplex（value 属性）、ms-attr、ms-href、ms-src。

布尔属性操作：使用 ms-attr-disabled、ms-attr-readonly、ms-attr-selected、ms-attr-checked。

字符串固有属性操作：使用 ms-attr-id、ms-attr-name、ms-attr-title、ms-src、ms-href。

自定义属性操作：使用 ms-attr-data-url、ms-attr-data-id。

ms-class 用法示例：ms-class='active' 或 ms-class='active:isOk'。此外还有 ms-active、ms-hover 等辅助属性。

样式、事件与循环操作

7、ms-duplex 2.0 版本特性。

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

辅助属性包括 data-duplex-focus、data-duplex-changed、data-duplex-event，用于增强双向绑定的交互体验。

8、样式操作：ms-css 用于内联样式，ms-class 用于外部引入的 CSS 类。

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9、事件绑定：使用 ms-on-eventName 或简写为 ms-eventName。

例如 ms-mouseenter、ms-mouseleave 仅作用于被选元素，ms-input（即 ms-on-input）。多事件绑定的执行顺序与自然数无关，而是取决于事件绑定的书写顺序。

10、循环操作。

ms-each：在父级元素上绑定，遍历生成临时变量。

ms-repeat：在子元素上绑定，遍历生成临时变量。

ms-with：在父级元素上绑定，遍历生成临时变量。

数组遍历时，el 为默认临时变量，$index 表示当前元素的索引，$first 表示是否为第一个元素（布尔值），$last 表示是否为最后一个元素，$remove 返回一个函数用于删除当前元素，$outer 表示内层循环的外层循环变量。

哈希（对象）遍历时，$key 表示键名，$val 表示键值，$outer 表示外层循环变量（可通过 $outer.$index 访问索引）。

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

数据修改与回调处理

修改对象的键值：

修改对象的键值对：

修改数组的值：使用数组对象.set(下标，值)。

修改数组中对象值：使用数组对象[下标].键名 = 键值。

遍历回调函数（属性）。

data-each-rendered：用于 ms-each 遍历完成后的回调。

data-with-rendered：用于 ms-with 遍历完成后的回调。

data-repeat-rendered：用于 ms-repeat 遍历完成后的回调。

data-with-sorted：用于排序后的回调处理。

循环时使用 size 计算数据长度，而非 length。使用 ms-if-loop 而非 ms-if，因为 ms-if 的执行优先级高于 ms-repeat。

高级特性与总结

11、模版引用。

12、属性监听。

13、模块通信。

下面介绍下 avalon 作用域圈定方法。

在使用 avalonJS 进行前端开发时，需要圈定数据绑定的作用域，存在三种方式：

（1）ms-controller：此绑定属性会按照就近原则来圈定作用域，先从当前标签开始向上查找。

（2）ms-important：此绑定属性仅查找当前标签，倘若查找不到 VM 绑定数据，则原样输出在页面上。

（3）ms-skip：此绑定属性的作用是使数据绑定失效，即插值表达式原样输出，无论是否找到作用域内绑定数据。

以上所述是小编给大家介绍的 JavaScript 中 avalon 绑定属性总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！