Polymer Dart 1,0 - наблюдатель не работает

Question

У меня есть пользовательский элемент <test-object> который выглядит следующим образом:

@PolymerRegister('test-object') 
class TestObject extends PolymerElement with TestBehavior { 

    TestObject.created() : super.created() { 
    } 

} 

TestBehavior:

@reflectable 
class TestModel extends JsProxy { 

    @Property(notify: true) 
    num value = 0; 
    PolymerElement _target; 

    TestModel(PolymerElement target) { 
    _target = target; 
    } 

    changeBy(num by) { 
    value += by; 
    _target.set('testModel.value', value); 
    } 

} 

@behavior 
abstract class TestBehavior implements PolymerBase { 

    @Property(notify: true) 
    TestModel testModel; 
    PolymerElement _instance; 

    static ready(instance) { 
    instance._init(instance); 
    } 

    static created(instance) { 
    instance._instance = instance; 
    } 

    _init(PolymerElement instance) { 
    set('testModel', new TestModel(instance)); 
    } 

} 

Мое главное приложение выглядит следующим образом:

<dom-module id="main-app"> 
    <style> 
    :host { 
     display: block; 
     @apply(--layout-center-center); 
    } 
    </style> 

    <template> 
    <div>{{testObject.testModel.value}}</div> 
    <test-object id="obj"></test-object> 
    </div> 
    </template> 
</dom-module> 

@PolymerRegister('main-app') 
class MainApp extends PolymerElement { 

    @Property(notify: true) 
    TestObject testObject = null; 

    MainApp.created() : super.created(); 

    ready() { 
    set('testObject', testObject = $$('#obj') as TestObject); 
    } 

    @Listen('click') 
    clicked([_]) { 
    testObject.testModel.changeBy(1); 
    } 

    @Observe('testObject.testModel.*') 
    valueChanged([_]) { 
    window.console.log('Value was changed'); 
    } 

} 

Это очень простой пример игрушки. Я нажимаю <main-app>, что увеличивает значение в testModel (это работает). Однако <main-app> не обновляет div, который должен отображать значение. Кроме того, valueChanged никогда не вызывается. Я хочу уведомить testObject об обновлении value в формате testModel и развернуть это уведомление до main-app, которому необходимо обновить его интерфейс пользователя путем привязки данных.

Почему это не работает?

Answer 1

Вы не можете иметь свойства в классах модели, только в компонентах

@Property(notify: true) 
num value = 0; 

должен быть просто

@reflectable 
num value = 0; 

Answer 2

set и notifyPath методы должны действительно быть вызваны из ваших классов элементов, не модели. Это значительно упрощает ваш код и заставляет все работать так, как ожидалось. Ниже я вставил новые классы MainApp, TestModel и TestBehavior (я также сделал некоторые другие незначительные изменения).

@PolymerRegister('main-app') 
class MainApp extends PolymerElement { 

    // Defines a read-only property (implicit because of the getter). 
    @property 
    TestObject get testObject => $['obj']; 

    MainApp.created() : super.created(); 

    // I added the 2nd optional argument here, to fix a reflectable error 
    @Listen('click') 
    clicked([_, __]) { 
    // Notify directly here, this is the primary change. 
    notifyPath('testObject.testModel.value', testObject.testModel.changeBy(1)); 
    } 

    @Observe('testObject.testModel.*') 
    valueChanged([_]) { 
    window.console.log('Value was changed'); 
    } 

} 

// Removed the `_instance` field. 
class TestModel extends JsProxy { 

    // use @reflectable instead of @Property(notify: true) 
    @reflectable 
    num value = 0; 

    TestModel(); 

    num changeBy(num by) { 
    value += by; 
    // Added a return value for convenience 
    return value; 
    } 

} 

@behavior 
abstract class TestBehavior implements PolymerBase { 
    @Property(notify: true) 
    TestModel testModel = new TestModel(); 
}