Polymer Elements trigger update - dart

Question

If I have two completely different polymer elements, and in one i have
<template if="{{MyVar}}">htmlhere</template>
<template if="{{!MyVar}}">otherhtmlhere</template>
the other i have
<template if="{{MyVar}}">hello</template>
<template if="{{!MyVar}}">world</template>
what I want to do is if on one MyVar changes, it should change on the other as well... How would I handle this situation?
To explain further what I am looking for is in effect a way to have various bindings / reactions throughout the whole page... so if some method / module somewhere changes MyVar's state it would ripple through the entire page make changes where it should

Answer 1

I have a similar situation where I have an observable object in the root polymer element which I assign to an attribute of the child polymer element.
The child polymer element can then bind to this attribute.
AppModel (global model)
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) here the global model get's assigned to a child element
<polymer-element name="app-element">
<template>
<my-login id="mylogin" model="{{appModel}}"></my-login>
</template>
...
</polymer-element>
MyLogin (dart) the model Attribute is assigned to the model field.
#CustomTag("my-login")
class MyLogin extends PolymerElement {
MyLogin.created() : super.created();
#published AppModel model;
}
MyLogin (html) the global model is used to show/hide the login button/logged-in user info
<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> 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}}"> (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> 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>