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

我试图建立一个使用飞镖和聚合物的Web组件库，但我无法使数据绑定在我的组件内工作。创建聚合物飞镖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>

该组件的进口并使用我的库中定义的我 - 主 - 应用：

<!-- 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。所以我想知道：我做错了什么？创建聚合物飞镖组件库的“正确”方法是什么？

为了完整这里是主要的应用程序组件（使用可观察周围混入版本的工作）的代码：

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>

我正在使用最新的聚合物版本（0.13.x），编译为JS。 @edit：修正了一个错字。

来源

2014-09-10 Vittorio Ballestra

我看不出什么毛病。我会简化你的'切换'，并使其成为'@observable bool showPanel = true;'和'void toggleDrawer（）=> showPanel！= showPanel;'，

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

回答

相关问题