【发布时间】：2014-09-10 08:51:23
【问题描述】：
我正在尝试使用 dart 和聚合物构建一个 Web 组件库，但我无法在我的组件中进行数据绑定。
我制作了一个测试应用程序和一个库。 测试应用定义了一个简单的主要组件：
<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/MyLib/main_app.html">
<polymer-element name="my-launcher">
<template>
<style>
</style>
<my-main-app></my-main-app>
</template>
<script type="application/dart" src="launcher.dart"></script>
</polymer-element>
该组件导入并使用我的库中定义的 my-main-app：
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<polymer-element name="my-main-app" >
<template>
<style>
</style>
<core-scaffold id="mainScaffold">
<core-header-panel navigation flex mode="seamed">
<core-toolbar>MYAPP</core-toolbar>
<core-menu theme="core-light-theme" selectedItem="{{mainMenuItem}}" selected="0">
<core-item icon="settings" label="Activities"></core-item>
<core-item icon="settings" label="Other"></core-item>
</core-menu>
</core-header-panel>
<div tool>Activities</div>
<div>Hello we got some action here:
<br>
<br>
<paper-button label="Toggle Drawer" on-click="{{toggleDrawer}}" raisedButton> </paper-button>
<br>
<template if="{{toggled==0}}">
Panel is shown (int) ?
</template>
<template if="{{toggled==1}}">
Panel is hidden (int) ?
</template>
</div>
</core-scaffold>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
一切正常（纸质组件，单击按钮时面板抽屉切换），但条件模板没有反应。唯一的解决方法是直接使用 Observable mixin 并在我的方法中调用“deliverChanges”。
我发现的所有示例都不需要这样做，即使我正在使用并且在我的测试应用程序中工作的纸质组件也不需要使用 Observable mixin。所以我想知道：我做错了什么？创建聚合物飞镖组件库的“正确”方法是什么？
为了完整起见，这里是主要应用程序组件的代码（使用 Observable mixin 的工作版本）：
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_scaffold.dart';
import 'package:core_elements/core_item.dart';
@CustomTag('my-main-app')
class MyMainApp extends PolymerElement with Observable /* <- THIS SHOUDN'T BE NECESSARY! */ {
@observable CoreItem mainMenuItem;
@observable int toggled=0;
CoreScaffold scaffold;
MyMainApp.created() : super.created() {
}
@override
void attached() {
super.attached();
scaffold = $['mainScaffold'];
}
void toggleDrawer() {
toggled = 1 - toggled;
scaffold.togglePanel();
// THIS SHOULD NOT BE NECESSARY!!!!!
deliverChanges();
}
}
@edit : 添加“index.html”源以确保完整性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestAPp</title>
<!-- include the web_components polyfills with support for Dart. -->
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Poylmer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="launcher.html">
<link rel="stylesheet" href="testapp.css">
</head>
<body>
<my-launcher></my-launcher>
<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
我正在使用最新的 Polymer 版本 (0.13.x)，编译为 JS。 @edit：修正了一个错字。
【问题讨论】：
-
我看不出有什么问题。我会简化你的
toggled并使其成为@observable bool showPanel = true;和void toggleDrawer() => showPanel != showPanel;、<template if="{{showPanel}}">。如果这在没有“可观察黑客”的情况下工作会很有趣 -
你试过
deliverChanges();不带`与Observable? What Polymer version are you using? How does yourindex.html`的样子吗？启动页面时是否收到任何警告？ -
@GünterZöchbauer 我的第一个版本使用“bool”，但我切换到 int 以检查问题是否出在数据类型上。不是那样的。
-
@GünterZöchbauer 我试过在不使用mixin的情况下调用deliverChanges()，但它不起作用。这种想法让我很生气......
标签： dart dart-polymer