聚合物元件觸發更新

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>