Avalon 学习系列（五）—

Avalon 学习系列（五）—— 过滤器

news2025/2/2 20:52:18

Avalon 本身有很多过滤器，例如 date、number等文本过滤器、循环过滤器；avalon 也提供了方法可以根据需求自定义过滤器。

示例：

（1）定义一个 myFunc 的个性化过滤器，并加在元素上；

（2）使用 avalon 本身定义的过滤器。

如下：

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Avalon demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./avalon.js"></script>
  <script type="text/javascript">
    avalon.filters.myFunc = function () {
      return '这是一个自定义的过滤器'
    }
    var vm = avalon.define({  // wrap 用作该 Model的载体
      $id: "maincontainer",   // 告诉avalon这个Model是作用于哪个ms-controller的
      msg: "Hello,world!",   // 定义一个avalon对象属性“msg”，其值是“Hello,world!”
      time: 1482878745000
    });
    avalon.scan(); // 这句话可以加，也可以不加，因为avalon有自己的DOMReady模块，会自动扫描全文。
  </script>
  <style>
    .ms-controller {
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <!-- 给div加上监听器 -->
    <div ms-controller="maincontainer">
      <p>{{msg | myFunc}}</p>
      <!-- 使用过滤器date，传入时间格式 -->
      <p>{{time|date('yyyy-MM-dd HH:mm:ss')}}</p>
    </div>
  </div>
</body>

</html>