5

The only solid example I could find for Dart Polymer doesn't use any parameters. How can I pass parameters to the template. Is it done through the constructor?

My specific example is that I have a card element with a title, and I want to pass the title of the card as a string to the element.

I have looked at Passing data to a Polymer element

but this is not exactly what I want to do. I want to pass data from within dart code.

Community
  • 1
  • 1
clocksmith
  • 6,226
  • 3
  • 32
  • 45
  • i dunno if we can pass parameters throught a "constructor" of PolymerElement, i personnaly use this workaround to set properties within code: new Element.tag('my-tag')..property1='foo'..property2=42; – Anthony Bobenrieth Apr 11 '14 at 01:25

3 Answers3

5

The constructor of elements is called from Polymer and there is no way to pass parameters.

You can as @Vloz wrote, assign values after the element was created or you can use binding as in the question you linked (Passing data to a Polymer element) using bindings.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    The created() named constructor is actually a feature of dart:html and custom elements, not polymer. Also you can define a factory constructor and use this to pass parameters. I've posted an answer showing how to do this. But I don't use Polymer - so I'm not sure about the template binding stuff. Perhaps you could expand on this. – Greg Lowe Apr 14 '14 at 21:39
4

If you are creating a custom element you can use a factory constructor:

class MyElement extends HtmlElement {
  int _foo;
  factory MyElement(int foo) => new Element.tag('my-tag').._foo = foo;
  MyElement.created() {
     // Careful _foo has not been assigned yet.
  }
}

main() {
   document.register('my-tag', MyElement);
   var element = new MyElement(42);
}

I assume this also works for PolymerElements, but I haven't tried this myself.

Greg Lowe
  • 15,430
  • 2
  • 30
  • 33
2

even though this is a bit old: You actually can pass parameters like this:

<my-custom-element booleanAttr valueAttr="test"></my-custom-element>

And your custom element should look something like:

@CustomTag('my-custom-element')
class MyCustomElement extends PolymerElement {
  ...
  @published bool booleanAttr;
  @published String valueAttr;
  ...
}

-- EDIT --

But as already pointed out this can be easily done for polymerelements with a factory:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('my-custom-element')
class MyCustomElement extends PolymerElement {
  String a;

  factory MyCustomElement.custom(String _a) {
    MyCustomElemente = new Element.tag('my-custom-element');
    e..a = _a
    // ...
    ..initialized();
    return e;
  }

  MyCustomElement.created() : super.created() {

  }

  void initialized() {
    print("initialized: " + a);
  }
}
Robert
  • 5,484
  • 1
  • 22
  • 35
  • Pass parameters like what? Did you forget to include some code? – clocksmith Apr 23 '14 at 19:45
  • This looks like it is passing parameters through the HTML element, but the intent here is to create this HTML element in dart code and pass the parameters within the code. – clocksmith Apr 23 '14 at 19:55
  • Oh yeah, sorry ;) But in general this would work also. If all your app-code is in the enteredView function then you can create element, that would trigger the created constructed, and then you could set the attributes and finally assign it to the document and then you could use the attributes, but this is probably not what you want? – Robert Apr 23 '14 at 19:56
  • It sounds like that is actually the only solution. Thanks – clocksmith Apr 23 '14 at 20:08
  • @Robert It would be nice, if you could create a new answer with a complete example of your idea. It would be helpful for many. – grohjy Apr 24 '14 at 04:55
  • To clarify, the parameters might better be named "booleanAttr" and "stringAttr". – Tom Russell Nov 19 '15 at 21:43