Polymer Dart core-style ref not resolved

Question

When I pass parameters to a Polymer element the core-style ref does not get resolved.

Here is the child code:

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_style.html">

<core-style id="s1" unresolved> div { background: yellow; } </core-style>
<core-style id="s2" unresolved> div { background: pink;   } </core-style>

<polymer-element name='test-cell' attributes='s t' noscript>
  <template>
      <core-style ref="{{s}}"></core-style>
      <div>{{t}}</div>
  </template>
</polymer-element>

As you can see, there are two core styles.

Here is the parent code. It takes a List and instantiates 'test-cell' with text and a style reference.

<polymer-element name='test-rows'>
  <template>
    <template repeat='{{ v in x }}'>
      <test-cell s={{v.s}} t={{v.t}}></test-cell>
    </template>
  </template>
</polymer-element>

In this simple example the Dart code is inline. Here it is:

  <script type='application/dart'>
    import  'package:polymer/polymer.dart';

    //======================================
    class Info {
      String  s, t;
      Info(this.s, this.t) {}
      }
    //======================================
    @CustomTag('test-rows')
    class TestRows extends PolymerElement {

      @observable List<Info> x = toObservable([]);

      //-----------------------------------
      TestRows.created() : super.created() {
        x.add(toObservable(new Info('s1', 'first' )));
        x.add(toObservable(new Info('s2', 'second')));
        }
      }
  </script>

In the generated HTML the text comes through OK but the core-style instances both have

ref="{{s}}"

and the styles are not applied. Can I force resolution of the style ref parameter by some alternative annotation? It is essentially a final/const.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-11-20T05:36:46

Update

I think the problem is your noscript in your test-cell element.
Binding doesn't work in Dart with Polymer elements without a backing script (noscript) as far as I know.

I think in your case the <test-cell> element needs a field

@observable
var s;

to make this work.

Original

Your code doesn't show if you ever assign a value to s.

I doubt toObservable works on plain Dart objects. This is for lists and maps as far as I know.

The Info class should look like this and you don't need to use toObservable() with it.

  class Info extends Object with Observable {
    @observable
    String  s;

    @observable 
    String t;

    Info(this.s, this.t) {}
  }

Polymer Dart core-style ref not resolved

1 Answers

Update

Original