聚合物飛鏢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關於testModel中的value更新，並將此通知傳播至main-app，這應該通過數據綁定更新其UI。

爲什麼這不起作用？

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