創建聚合物飛鏢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組件庫的正確方法？

回答

相關問題