我有类似的情况,我在根聚合物元素中有一个可观察的对象,我将其分配给子聚合物元素的属性。
然后,子聚合物元素可以绑定到该属性。
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> 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>