聚合物飞镖1.0 - 观察员不工作

我有一个自定义元素<test-object>，看起来像这样：聚合物飞镖1.0 - 观察员不工作

@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。

为什么这不起作用？

来源

2016-02-27 Basic Coder

你不能在模型类的属性，只有在部件

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

应该只是

@reflectable 
num value = 0;

来源

2016-02-27 18:02:08

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

来源

2016-02-29 15:44:24

聚合物飞镖1.0 - 观察员不工作

回答

相关问题