CODEWITHSUNDEEP
dartdart-polymer
robbie
robbie

Reputation: 269

Reference static consts from HTML

I'd like to use a const within a Dart class and reference its value in my HTML. For example:

Dart class:

Class MyClass 
{
        static const String MY_VALUE = "foo";
}

HTML:

<input value="{{MyClass.MY_VALUE}}">

Can we do this?

Upvotes: 1

Views: 429

Answers (2)

si t
si t

Reputation: 1

I tried it because I'm new to polymer, and I don't think you can have static final class variables published/observable, but you can have final instance variables. published/observable. 

// my.dart
class MyClass 
{
  @observable static final String MY_VALUE="foo";
}

Doesn't work but this does.

// my.dart
class MyClass 
{
  @observable final String MY_VALUE="foo";
}

... the rest of my rambling answer.

then

<!--  mytemplate.html  -->

<polymer-element name="my-tag" >   
  <!-- lowercase and minus convention for html tag names -->
  <template>
    <input value={{MY_VALUE}}/>
  </template>
  <script type="application/dart" src="my.dart"/>
</polymer-element>

then go back to my.dart , add

import 'package:polymer/polymer.dart';
import 'dart:html'; // what for ?  why is there single quotes ?

@CustomTag('my-tag')
// camel case , brackets, single quotes, 
class MyClass  {

 @observable static final int MY_VALUE="foo";
 // lowercase after @, no brackets, no single quotes
}

from my reading of custom polymer elements

And then finally

<!-- index.html -->

<html>
  <head>
    <link rel="import" href="mytemplate.html"/>
    <script type="application/dart"> 
       export 'package:polymer/init.dart';
    </script>       
    <script src="packages/browser/dart.js" />
  </head>
  <body>
    <my-tag></my-tag>
  </body>
</html>

Looking back , there's a lot of referencing going on. The custom html polymer element has to link to dart code, so inside the 

<polymer-element></polymer-element>

tags there is a 

<script type="application/dart" src="my.dart"/>

The dart code has to link to the custom html element , so there is a

@CustomTag('my-tag')

before the class declaration. There is also a need to import the polymer library, and the html library, and a need to make class static constant observable. Maybe the @observable tag only works on objects.

I tried it , and it only worked on objects, and it didn't compile when I used the abbreviated script tag inside my.html, so I had to do

<script type="application/dart" src="my.dart">
</script>

Upvotes: 0

Shailen Tuli
Shailen Tuli

Reputation: 14191

No, as far as I know, you cannot use a static const in your template. The template expects instance methods and getters. There is however an easy workaround: define a getter that returns the value of the const, and then use that getter in your HTML.

Here is the code for the getter:

String get myValue => MY_VALUE;

And here is the use of the getter in the HTML:

<input value="{{myValue}}">

Upvotes: 3

Related Questions