Question

我正在尝试使用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：修正了一个错字。

Answer 1

有一个错字。 main_app.html中的第一个非评论行：<lik rel...应为<link rel...。

Answer 2

最后，我发现了它无法正常工作的原因。不仅在主应用程序中，而且在pubspec库中，必须有聚合物变压器。

这是我的lib的正确pubspec：

name: mylib
version: 0.0.1
dependencies:
  core_elements: '>=0.2.0 <0.3.0'
  paper_elements: '>=0.1.0 <0.2.0'
  polymer: '>=0.13.0 <0.14.0'

transformers:
- polymer

创建聚合物飞镖网组件库的正确方法？

2 个答案: