如何在变化时获得可观察值的值？

Question

这里是我的代码：

飞镖：

import 'dart:html'; 
import 'package:polymer/polymer.dart'; 

@CustomTag('my-thing') 
class MyThing extends PolymerElement { 
    @observable var val = "Hello, World"; 

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

HTML：

<link rel="import" href="../../../packages/polymer/polymer.html"> 

<polymer-element name="my-thing"> 
    <template> 
    <textarea id="asdf" value="{{val}}"></textarea> 
    <p>Val is: {{val}}</p> 
    </template> 
    <script type="application/dart" src="my_thing.dart"></script> 
</polymer-element> 

你可以看到val表示textarea的价值。我想要做的是：当textarea的值发生变化时，将其中的最后一个单词，修改它，并用新文本更新textarea。

例如，如果用户键入“Hello，world”，我可能想要识别单词“world”并将其替换为全部大写版本“WORLD”。

我必须使用querySelector来观察该字段，与我的@observable行分开吗？我想这和它没有工作：

querySelector('#inputName').onInput.listen(someUpdate); 

void someUpdate(Event e) { 
    print('changed'); 
} 

我试了一下在MyThing类，我试图在主，我试了一下的东西之外，并没有奏效。

我觉得应该有某种我可以听的事件，使用@observable进行设置。在那儿？如果没有我可以听的东西或者没有我自己可以添加的自动回调，我怎样才能将我的querySelector产品线改为实际工作？

Answer 1

我不知道textarea是否有什么特别之处，但我想它应该满足您的需求，只需将valChanged方法添加到您的MyThing类。每次更改val时都会调用此方法。
如果您在valChanged内更改val，则可能会遇到无限循环。

valChanged(oldValue, newValue) { 
    // do stuff here 
} 

，或者您可以使用change事件

<textarea id="asdf" value="{{val}}" on-change="{{valChangeHandler}}"></textarea> 

valChangeHandler(Event e) { 
    // here you get the element passed as `e.target` 
    // and you can access `val` 
}