聚合物元件触发更新

Question

如果我有两个完全不同的聚合物的元素，并且我有

<template if="{{MyVar}}">htmlhere</template> 
<template if="{{!MyVar}}">otherhtmlhere</template> 

其他的我都

<template if="{{MyVar}}">hello</template> 
<template if="{{!MyVar}}">world</template> 

什么我想要做的是，如果在一个MyVar变化，它应该改变另一个以及...我将如何处理这种情况？

为了进一步解释我所寻找的是一种在整个页面中都有各种绑定/反应的方法......所以如果某处某个方法/模块改变了MyVar的状态，它会在整个页面上产生变化它应该

Answer 1

我有一个类似的情况，我有一个可观察的对象在根聚合物元素，我分配给子聚合物元素的属性。

子聚合物元素可以绑定到这个属性。

AppModel（全球模型）

class AppModel extends Object with Observable { 
    @observable bool isLoggedIn = false; 
    @observable List<String> authenticationProvider = ['Google', 'Yahoo', 'GitHub', 'Amazon']; 
} 


@CustomTag("app-element") 
class AppElement extends PolymerElement { 
    @observable AppModel appModel; 

    AppElement.created() : super.created() { 
    } 
} 

AppElement（HTML）这里的全球模型中获取的分配给子元素

<polymer-element name="app-element"> 
    <template> 
    <my-login id="mylogin" model="{{appModel}}"></my-login> 
    </template> 
    ... 
</polymer-element> 

MyLogin（DART）模型属性被分配给模型字段。

@CustomTag("my-login") 
class MyLogin extends PolymerElement { 

    MyLogin.created() : super.created(); 

    @published AppModel model; 
} 

MyLogin（HTML）全球模型来显示/隐藏登录按钮/登录的用户信息

<polymer-element name="bwu-login"> 
    <template> 
    <template if="{{!model.isLoggedIn}}"> 
     <bs-dropdown> 
     <div class="dropdown"> 

      <div class="dropdown-toggle btn btn-default btn-xs navbar-btn" role="button" data-toggle="dropdown"> 
      <span class="glyphicon glyphicon-log-in"></span>&nbsp;&nbsp;Login 
      </div> 

      <ul class="dropdown-menu" role="menu" aria-labelledby="select authentication provider"> 
      <template repeat="{{ap in model.authenticationProvider}}"> 
       <li role="presentation"> 
       <a role="menuitem" tabindex="-1" href="{{ap.authenticationUrl}}" on-click="{{openLogin}}" target="_blank">{{ap.name}}</a> 

       </li> 
      </template> 
      </ul> 
     </div> 
     </bs-dropdown> 
    </template> 

    <template if="{{model.isLoggedIn}}"> 
     <small>{{model.name}}<template if="{{model.isAdmin}}">&nbsp;(Admin)</template></small> 
     <div id="logoutButton" on-click="{{onLogoutHandler}}" class="btn btn-default btn-xs navbar-btn" role="button"> 
     <span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Logout 
     </div> 

     <!--<div><img src="{{model.avatar}}"></img>{{model.name}} <button id="logout">Log out</button></div>--> 
    </template> 

    </template> 

    <script type="application/dart" src='my_login.dart'></script> 

</polymer-element>