Blaze模板中基于ViewModel的按钮组件动态属性绑定失效问题

我之前也踩过Blaze这个动态属性绑定的坑！你现在遇到的问题根源在于{{b "attrs: getAttrs"}}的写法：当你用引号把attrs: getAttrs包裹起来时，Blaze会把整个内容当作字符串字面量解析，而不是去调用你的getAttrs()方法。它会把字符串getAttrs拆解成以字符位置为键的对象（比如索引0对应'g'，索引1对应'e'，以此类推），这就导致了那些奇怪的0-7键的出现。

正确的实现方式 #

Blaze的{{b}}（或部分版本中的{{bind-attrs}}）绑定需要接收一个对象类型的值，而非字符串。你可以用以下两种方式实现：

1. 直接绑定辅助函数返回的对象

如果getAttrs是你的模板辅助函数，直接把它作为attrs的值传递即可：

<button {{b attrs=getAttrs}}>{{text}}</button>

对应的辅助函数示例（返回属性对象）：

Template.button.helpers({
  getAttrs() {
    // 根据组件参数返回需要的属性
    return {
      class: 'btn btn-primary',
      type: 'button',
      disabled: this.isDisabled,
      'data-id': this.itemId
    };
  }
});

2. 调用组件实例的方法（如果getAttrs是实例方法）

如果getAttrs是模板对应的JS类/实例中的方法，你可以通过this直接引用：

<button {{b attrs=this.getAttrs}}>{{text}}</button>

如果需要给方法传递参数，使用Blaze的函数调用语法：

<button {{b attrs=(getAttrs this.param1 this.param2)}}>{{text}}</button>

这样写之后，Blaze会正确调用getAttrs方法，把返回的属性对象应用到<button>元素上，而不会再出现那些奇怪的字符索引键了。

内容的提问来源于stack exchange，提问作者ZzZombo