dart - 聚合物元素触发器更新

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>