What's the difference between @observable and @published in polymer.dart?

Question

In polymer.dart, if you want to expose a variable defined in controller to the view side, you define the variable with @observable and use double mustache to embed the variable. However, some docs and tutorials use @published to meet the same purpose. The official docs also uses both, so I don't think @published is legacy and deprecated way of defining variables.

So is there any difference between the two? And which one should I use in my code?

Answer 1

@published - is two way binding ( model to view and view to model)

Use case for @published is ,if your model property is also attribute in a tag.

Example : For a table-element you want to provide data from external source ,so you'll define attribute data,in this case data property should be @published .

<polymer-element name = "table-element" attributes ="structure data">
     <template>
         <table class="ui table segment" id="table_element">
             <tr>
                 <th template repeat="{{col in cols}}">
                     {{col}}
                 </th>
             </tr>
             <tr template repeat="{{row in data}}">
              etc......
     </template>
<script type="application/dart" src="table_element.dart"></script>
</polymer-element>


@CustomTag("table-element")
class Table extends PolymerElement {

 @published  List<Map<String,String>>  structure; // table struture column name and value factory
 @published List<dynamic> data; // table data

@observable - is one way binding - ( model to view)

If you just want to pass data from model to view use @observable

Example : To use above table element i have to provide data ,in this case data and structure will be observable in my table-test dart code.

<polymer-element name = "table-test">
 <template>
     <search-box data ="{{data}}" ></search-box>
     <table-element structure ="{{structure}}" data = "{{data}}" ></table-element>
 </template>
<script type="application/dart" src="table_test.dart"></script>
</polymer-element>

dart code

CustomTag("table-test")
class Test extends PolymerElement {

  @observable List<People> data = toObservable([new People("chandra","<a href=\"http://google.com\"  target=\"_blank\"> kode</a>"), new People("ravi","kiran"),new People("justin","mat")]);
  @observable List<Map<String,String>> structure = [{ "columnName" : "First Name", "fieldName" : "fname"},
                                                     {"columnName" : "Last Name", "fieldName" : "lname","cellFactory" :"html"}];
  Test.created():super.created();

Examples are taken from My Repo