Search code examples
dartdart-polymer

Polymer data binding does not work

I am trying to get the <core-menu> working with Dart. It displays fine but the selectedIndex property is not updated. The following code works fine with PolymerJS but in the Dart version the selectedIndex is not updated (<core-menu selectedIndex="{{selectedMenuIndex}}"...>)

I would expect the {{selectedMenuIndex}} to be available in the <core-animated-pages> tag but the {{selectedMenuIndex}} variable is empty. It does not get updated. The .dart file has the var declared as this:

@observable num selectedMenuIndex = 0;

This is the .html code:

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_drawer_panel.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_selector.html">
<link rel="import" href="packages/core_elements/core_item.html">
<link rel="import" href="packages/core_elements/core_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/paper_elements/core_animated_pages.html">

<polymer-element name="test-app">

<template>
<!-- [START html] -->
<core-drawer-panel id="drawerPanel">

    <core-header-panel drawer>
        <core-toolbar id="navheader'">
            <span>Menu</span>
        </core-toolbar>
        <core-menu selected="0" selectedIndex="{{selectedMenuIndex}}" id="coreMenu" on-click="{{togglePanelButton}}">
            <core-item icon="settings" label="One"></core-item>
            <core-item icon="search" label="Two"></core-item>
        </core-menu>
    </core-header-panel>

    <core-header-panel main>
        <core-toolbar id="mainheader">
            <paper-icon-button id="navicon" icon="menu" on-click="{{ togglePanelButton }}"></paper-icon-button>
            <span flex>Title</span>
        </core-toolbar>
        <core-animated-pages selected="{{selectedMenuIndex}}" notap id="core_animated_pages" transitions="slide-from-right">
            <section class="content-section">
                Section 1
            </section>
            <section class="content-section">
                Section 2
            </section>
        </core-animated-pages>
    </core-header-panel>

</core-drawer-panel>
<!-- [END html]-->
</template>

<script type="application/dart" src="testapp.dart"></script>
</polymer-element>

Are you guys having problems with databing as well or is it me that does something wrong?

UPDATE: I have filed a bug report for it here: https://code.google.com/p/dart/issues/detail?id=19794

Solution

  • I got an answer from the Dart Polymer group here: https://code.google.com/p/dart/issues/detail?id=19794

    Seems there is an issue with the 2-way binding with the core_elements.