0

2つの完全に異なるポリマー要素があり、1つにある場合

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

私が持っているもう一つ

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

私がやりたいのは、一方が変更された場合、もう一方MyVarも変更する必要があるということです...この状況をどのように処理しますか?

私が探しているものをさらに説明すると、実際にはページ全体でさまざまなバインディング/反応を行う方法です...したがって、どこかのメソッド/モジュールがMyVarの状態を変更すると、ページ全体に波及して必要な場所に変更が加えられます

4

1 に答える 1

0

子ポリマー要素の属性に割り当てるルート ポリマー要素に観察可能なオブジェクトがあるという同様の状況があります。

子ポリマー要素は、この属性にバインドできます。

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>
于 2014-01-28T14:44:37.183 に答える