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

@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