长版

我了解如何使用Polymer创建元素。但是，当我想要与他们联系时，我正在遇到一个路障。我用什么结构来让组件在它们之间进行交谈。

来自Angular背景我对相应的内容有一个相对准确的看法。例如：数据包含在可从控制器，指令和html元素访问的范围内，您可以使用服务从应用程序的不同部分提取数据。

在聚合物中，我不知道数据的边界在哪里。不是在组件本身，而是在它之外，它存在的地方以及另一个组件是否可以访问它。一个简单的绘图可以帮助我很多。在聚合物文档中没有解释这样的事情，可能是因为它比聚合物更广泛。

为了让您了解我的问题，这就是我遇到的问题：

我根据Polymer Starter Kit
我想用firebase-element

我创建了自己的元素，它本身使用<firebase-auth>：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/firebase-element/firebase-auth.html">

<dom-module id="my-login">
  <template>
    <firebase-auth id="firebaseLogin"
      user="{{user}}"
      location="https://my-project.firebaseio.com"
      provider="facebook"
      on-error="_errorHandler"
      on-login="_loginHandler"></firebase-auth>

    <button on-tap="login">Login with facebook</button>
    <button on-tap="logout">Logout</button>
  </template>
</dom-module>
<script>
Polymer({
  is: 'my-login',
  properties: {
    successRedirect: String
  },
  _errorHandler: function(e){
    console.log(e.detail);
  },
  _loginHandler: function(e){
    if(this.successRedirect){
      // How can I tell pagejs to redirect me ?
      app.route = this.successRedirect;
    }
  }
});
</script>

基本上如何在成功登录后告诉pagejs（我的路由库）将应用程序重定向到页面？我的pagejs配置存在于它自己的routing.html文件中，我不明白如何拼凑所有这些。

我希望有人能够理解这个广泛的问题并希望能帮助我。

由于

Answer 1

简短回答：事件听众。在路由器上放置一个事件监听器。让登录处理程序在路由器上触发事件。路由器将接收该事件，然后重定向。

...
_loginHandler: function(e){
  if(this.successRedirect){
    // How can I tell pagejs to redirect me ?
    var router = document.querySelector('router');
    router.dispatchEvent(new Event('redirect', {redirectURL: this.successRedirect});
    app.route = this.successRedirect;
  }
}
...

然后在路由器中：

connectedCallback() {
  this.addEventListener('redirect', function(event) {
    var url = event.redirectURL;
    // Redirect using the router's API.
  });
}

如何构建Polymer SPA？

长版

1 个答案: