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更改时都会调用此方法如果您在val内更改valChanged，则可能会遇到无限循环。

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`
}

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

1 个答案: