Was ist der Unterschied zwischen @observable und @published in polymer.dart?

Question

Wenn Sie in der Datei polymer.dart eine Variable definieren möchten, die im Controller für die Ansichtsseite definiert ist, definieren Sie die Variable mit @observable und verwenden Sie den doppelten Schnurrbart zum Einbetten der Variablen. Einige Dokumente und Lernprogramme verwenden jedoch @published, um den gleichen Zweck zu erfüllen. Die offizielle Dokumentation verwendet auch beide, daher glaube ich nicht, dass @published eine veraltete und veraltete Möglichkeit zur Definition von Variablen ist.

Gibt es also einen Unterschied zwischen den beiden? Und welchen sollte ich in meinem Code verwenden?

Answer 1

@published - ist Zweiweg (Modell anzuzeigen und Ansicht zu modellieren) Bindung

Anwendungsfall für @published ist, wenn Ihr Modell Eigenschaft wird auch in einem Tag-Attribute.

Beispiel: Für ein Tabellenelement, das Daten aus einer externen Quelle bereitstellen soll, definieren Sie Attributdaten. In diesem Fall sollte die Dateneigenschaft @published sein.

<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 - ist eine Möglichkeit, die Bindung - (Modell anzuzeigen)

Wenn Sie wollen einfach nur Daten gelangen von Modell Verwendung @observable

Beispiel anzuzeigen: obigen Tabelle verwenden Element Ich muss Daten zur Verfügung stellen, in diesem Fall werden Daten und Struktur in meinem Table-Test Dart Code beobachtbar sein.

<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(); 

Beispiele aus My Repo