Dart compiled to JS but object notation is not working

Issue

I have created a Dart app and grabs weather information from some weather API source.

Just out of my curiosity, I want to test if I can encapsulate the weather information in an object and then render the object’s properties in the Polymer template.

The snippet is something like this:

HTML file:

<polymer-element ...>
  <template>
    Today in {{weather.city}}, the temperature is {{weather.temp}}. 
  </template>
</polymer-element>

and the Dart file:

@published Weather weather;
...
weather=new Weather.created(a_json_string);

class Weather
{
   String city;
   num temp;

   // The constructor just creates an instance by extracting the city, temp info fromthe JSON string
}

In Dartium, it works perfectly fine.

However, if I pub build that app and tried to run that output HTML file, it sucks: no display at all.

Solution

Probably tree-shaking is dropping your fields.
When fields are only referenced by polymer expressions in your markup tree-shaking doesn’t recognize the fields are needed, so it drops them.

I think you want to use @observable anyway because otherwise value changes are not reflected in your view.

class Weather
{
   @observable String city; // or @reflectable String city;
   @observable num temp; // or @reflectable num temp;

   // The constructor just creates an instance by extracting the city, temp info fromthe JSON string
}

Answered By – Günter Zöchbauer

Answer Checked By – Marie Seifert (FlutterFixes Admin)