gpt4 book ai didi

dart - 使所有类属性在 dart PolymerElement 模板中可观察

转载 作者:行者123 更新时间:2023-12-01 06:32:10 25 4
gpt4 key购买 nike

在下面的示例中,当单击更新类按钮时,{{testClass.someProperty}} 会更新为新类的 someProperty,但更新 testClass.someProperty 不会更新模板中的 {{testClass.someProperty}}。

我认为使 TestClass @observable 可以使其属性可观察,并且在更新属性时,模板中的属性会发生变化。

将 TestElement.testClass.someProperty 绑定(bind)到 {{testClass.someProperty}} 以及作为扩展,将任何类的属性绑定(bind)到 Polymer Element 模板的正确方法是什么?

test_class.dart

library test;

import "package:polymer/polymer.dart";

@observable
class TestClass extends ObservableBase {
String someProperty;
TestClass(this.someProperty);
}

test_element.dart:

library test_element;

import "package:polymer/polymer.dart";
import "test_class.dart";

@CustomTag("test-element")
class TestElement extends PolymerElement with ObservableMixin {
@observable
TestClass testClass = new TestClass("original");

void updateClass() {
testClass = new TestClass("xyz");
}
void updateProperty() {
testClass.someProperty = "foobar";
}
}

test_element.html

<polymer-element name="test-element">
<template>
{{testClass.someProperty}}
<button on-click="updateProperty">Update Property</button>
<button on-click="updateClass">Update Class</button>
</template>
<script type="application/dart" src="test_element.dart"></script>
</polymer-element>

test.dart

library test;

int main() {

}

test.html:

<!DOCTYPE html>

<html>
<head>
<link rel="import" href="test_element.html" />
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<test-element></test-element>
<script type="application/dart" src="test.dart"></script>
</body>
</html>

最佳答案

我通过将@observable 从类移动到属性来让它工作。我认为用 @observable 注释类应该与将所有属性注释为可观察的相同,但这不起作用:

test.dart

图书馆测试;

import "package:polymer/polymer.dart";

class TestClass extends ObservableBase {
@observable
String someProperty;
TestClass(this.someProperty);
}

关于dart - 使所有类属性在 dart PolymerElement 模板中可观察,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19151333/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com