小编nti*_*lli的帖子

这是对这个问题的跟进:访问Aurelia中的DOM元素

屏幕激活生命周期中是否有一个钩子允许我在 ref绑定设置后运行代码？目前似乎activate在ref绑定未设置之后调用挂钩之后有一段时间,然后在某些时候它们被激活.我通过在最新的(v0.13.0)骨架导航存储库的克隆版本<div ref="myDiv"></div>的底部附近添加一个welcome.html并测试视图模型中引用的存在来测试这个:

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  testMyDiv() {
    console.log("Getting my div")
    console.log(this.myDiv)
  }

  get fullName(){
    this.testMyDiv()
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}

模板底部的片段......

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <div ref="myDiv"></div>
  </section>
</template>

这是我在控制台中看到的快照......

welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div …

全部，我将SystemJS与Babel一起用作编译器，以了解如何在浏览器中从ES6生成ES5代码。当我尝试使用Chrome Dev Tools查看源代码时，看到的是ES5代码，而不是原始的ES6代码。我babelOptions在SystemJS中使用默认值config.js，如下所示：

System.config({
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  ...

我可以看到内联源代码映射插入到生成的Javascript底部，格式为：

//# sourceMappingURL=data:application/json;base64,...

Chrome浏览器不应该解释这一行并向我显示ES6代码而不是ES5代码吗？我是否会误解这样的内联源映射应该如何工作？（我已经在Chrome 43.0.2357.65和45.0.2411.0上尝试过。我也没有在Firefox 38.01上尝试过成功。我正在运行Mac OS X 10.10.2。）任何帮助将不胜感激。