小程序中模板调用 data 里的函数

微信小程序 glass-easel 组件框架新增特性中支持在模板中调用 data 里的函数。

如果 data 中的某个字段是函数，在模板里可以直接调用它：

Component({
  data: {
    getDataField() {
      return 'someValue'
    },
  },
})
<view>{{ getDataField() }}</view>

尽管这样做有时会很方便，在实践中依然不建议滥用。

从代码可维护性的角度看， data 中的内容应当与数据内容强相关。如果函数的主要目的是对数据展示方面的预处理，推荐旧写法使用 WXS 的方式，将函数实现内联在模版中。

<!--wxml-->
<wxs module="m1">
var getDataField = function() {
  return 'someValue';
};


module.exports.getDataField = getDataField;
</wxs>


<view> {{m1.getDataField()}} </view>

WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。

比如数据处理：

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}


module.exports.getMax = getMax;
</wxs>


<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。