Meteor+Blaze：在Promise回调中访问模板ReactiveVar的问题

这个问题的核心是回调函数中this的指向问题——在Promise的then回调和chargingchange事件监听器里，默认的this已经不再指向你的模板实例了，所以直接用this.isBatteryCharing会报错。下面给你两种简单有效的解决方法：

方法1：提前保存模板实例的引用 #

在onCreated函数开头，把模板实例（也就是当前的this）存到一个变量里，之后所有回调都用这个变量来访问ReactiveVar：

Template.Sidebar.onCreated(function(){
  // 保存模板实例的引用
  const templateInstance = this;
  templateInstance.isBatteryCharing = new ReactiveVar(false);

  navigator.getBattery().then(function(battery) {
    // 初始化设置当前充电状态（避免页面加载后无初始值）
    templateInstance.isBatteryCharing.set(battery.charging);

    battery.addEventListener('chargingchange', function(){
      // 用提前保存的模板实例变量访问ReactiveVar
      templateInstance.isBatteryCharing.set(battery.charging);
    });
  });
});

方法2：使用箭头函数（ES6+） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是模板实例），这样就能直接在回调里用this访问ReactiveVar了：

Template.Sidebar.onCreated(function(){
  this.isBatteryCharing = new ReactiveVar(false);

  navigator.getBattery().then((battery) => {
    // 初始化设置当前充电状态
    this.isBatteryCharing.set(battery.charging);

    battery.addEventListener('chargingchange', () => {
      // 箭头函数继承了外层的this（模板实例）
      this.isBatteryCharing.set(battery.charging);
    });
  });
});

小提示 #

我把你的ReactiveVar初始值从0改成了false，因为battery.charging本身是布尔值，这样类型匹配更合理；如果你的业务逻辑确实需要数字初始值，改回0即可。另外别忘了初始化时设置一次当前充电状态，不然页面加载后ReactiveVar会一直停留在初始值，直到第一次充电状态变化才更新。

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